Material 3 Floating Action Button Menus

Overview

Floating Action Button (FAB) Menus open from a FAB to display 2–6 related actions in a floating menu.

Material 3 FAB Menus, implemented as a Compose component via Views-Compose interop, use a single size compatible with any FAB (Regular, Medium, Large). They replace speed dial and stacked small FABs, offering a prominent, expressive style. This guide covers implementation, accessibility, and theming.

Getting Started

• Add Material Components for Android and Compose Material 3 library dependencies
• Use ComposeView for Views-Compose interop
• Apply MaterialTheme or MaterialExpressiveTheme for styling
• Integrate with FloatingActionButton in CoordinatorLayout

Accessibility

• Set contentDescription on menu items for TalkBack
• Ensure 48dp minimum touch target size for menu items
• Provide clear labels for actions (e.g., "Close menu")

Behavior and Configuration

• Toggle menu visibility with a FAB click
• Support 2–6 menu items with icons and labels
• Configure horizontal alignment (start, center, end)

Expressive Update

• Single menu size for all FABs (Regular, Medium, Large)
• Replaces speed dial and stacked small FABs
• Uses contrasting colors for close button and items
• Supports dynamic color and Primary, Secondary, Tertiary styles

FAB Menu Anatomy

Component	Description	Behavior
Close Button	Icon button, contrasting color	Closes menu, aligns with FAB
Menu Item	2–6 items with icon and label, colorPrimary	Triggers related action, floating display

FAB Menu Example

• Displays 2–6 actions from a FAB
• Uses Compose FloatingActionButtonMenu via interop

Example

      
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
class FabMenuDemoFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val composeView = view.findViewById<ComposeView>(R.id.compose_view)
        composeView.setContent {
            MaterialTheme {
                var isMenuOpen by remember { mutableStateOf(false) }
                FloatingActionButton(
                    onClick = { isMenuOpen = !isMenuOpen },
                    modifier = Modifier.size(56.dp)
                ) {
                    Icon(
                        imageVector = Icons.Default.Add,
                        contentDescription = "Open FAB menu"
                    )
                }
                FloatingActionButtonMenu(
                    isOpen = isMenuOpen,
                    onClose = { isMenuOpen = false },
                    horizontalAlignment = Alignment.End
                ) {
                    FloatingActionButtonMenuItem(
                        icon = { Icon(Icons.Default.Edit, contentDescription = "Edit") },
                        text = { Text("Edit") },
                        onClick = { /* Handle edit */ }
                    )
                    FloatingActionButtonMenuItem(
                        icon = { Icon(Icons.Default.Share, contentDescription = "Share") },
                        text = { Text("Share") },
                        onClick = { /* Handle share */ }
                    )
                }
            }
        }
    }
}
      
    

Attributes and Usage

Element	Attribute	Related Parameter(s)	Default Value	Usage Description
Menu	isOpen	FloatingActionButtonMenu(isOpen)	false	Controls menu visibility
Menu	onClose	FloatingActionButtonMenu(onClose)	null	Handles close action
Menu	horizontalAlignment	FloatingActionButtonMenu(horizontalAlignment)	Alignment.End	Sets menu alignment (start, center, end)
Menu Item	icon	FloatingActionButtonMenuItem(icon)	null	Sets item icon
Menu Item	text	FloatingActionButtonMenuItem(text)	null	Sets item label
Menu Item	onClick	FloatingActionButtonMenuItem(onClick)	null	Handles item click

Theming FAB Menus

• Customize colors (Primary, Secondary, Tertiary)
• Use MaterialTheme or MaterialExpressiveTheme
• Supports dynamic color schemes

Example

      
@Composable
fun FabMenuExample() {
    MaterialTheme(
        colors = lightColors(
            primary = Color(0xFF6200EE),
            onPrimary = Color(0xFFFFFFFF)
        )
    ) {
        var isMenuOpen by remember { mutableStateOf(false) }
        FloatingActionButton(
            onClick = { isMenuOpen = !isMenuOpen },
            modifier = Modifier.size(56.dp)
        ) {
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "Open FAB menu"
            )
        }
        FloatingActionButtonMenu(
            isOpen = isMenuOpen,
            onClose = { isMenuOpen = false },
            horizontalAlignment = Alignment.End
        ) {
            FloatingActionButtonMenuItem(
                icon = { Icon(Icons.Default.Edit, contentDescription = "Edit") },
                text = { Text("Edit") },
                onClick = { /* Handle edit */ }
            )
            FloatingActionButtonMenuItem(
                icon = { Icon(Icons.Default.Share, contentDescription = "Share") },
                text = { Text("Share") },
                onClick = { /* Handle share */ }
            )
        }
    }
}
      
    

Material Design Documentation

• Adheres to Material Design guidelines for FAB Menus
• Covers design, behavior, theming specifications
• Includes accessibility and interop guidance
• Refer to Material Design documentation for full details

FAQ

What are Material 3 FAB Menus?

• Floating menus opened from a FAB, showing 2–6 related actions

---

How many FAB Menu types are there?

• One size, compatible with any FAB

---

When to use a FAB Menu?

• Use for multiple related actions from a FAB

---

How to make FAB Menus accessible?

• Set contentDescription on items; ensure 48dp touch targets

---

Can I customize FAB Menu appearance?

• Yes, theme colors via MaterialTheme

---

How to add the Material 3 library?

• Include Material Components and Compose Material 3 libraries

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for FAB Menus