FAB menu

A FAB that opens into a stack of related actions.

Category: Actions
API status: Expressive
Compose APIs: FloatingActionButtonMenu, FloatingActionButtonMenuItem, ToggleFloatingActionButton
Interactive page: https://m3e.ljzapps.app/#components/fab-menu

When to use

Use a FAB menu when a screen has several related primary actions. A toggle FAB morphs into a close button and reveals labeled actions above it.

The menu moves keyboard focus to the first item when it opens, and Tab or the down arrow moves into it.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Three actions

Open the menu with the toggle button.

var expanded by rememberSaveable { mutableStateOf(false) }
val items = listOf(
    Icons.Rounded.Email to "Email",
    Icons.Rounded.Person to "Contact",
    Icons.Rounded.Edit to "Note",
)

Box(modifier = Modifier.fillMaxWidth().height(360.dp)) {
    FloatingActionButtonMenu(
        expanded = expanded,
        modifier = Modifier.align(Alignment.BottomEnd),
        button = {
            ToggleFloatingActionButton(
                checked = expanded,
                onCheckedChange = { expanded = !expanded },
            ) {
                val icon by remember { derivedStateOf { if (checkedProgress > 0.5f) Icons.Rounded.Close else Icons.Rounded.Add } }
                Icon(
                    imageVector = icon,
                    contentDescription = if (expanded) "Close menu" else "Open menu",
                    modifier = Modifier.animateIcon({ checkedProgress }),
                )
            }
        },
    ) {
        items.forEach { (icon, label) ->
            FloatingActionButtonMenuItem(
                onClick = { expanded = false },
                icon = { Icon(icon, contentDescription = null) },
                text = { Text(label) },
            )
        }
    }
}

Parameters

Name	Type	Default	Description
`expanded`	`Boolean`		Whether the items are visible.
`button`	`@Composable () -> Unit`		Usually a ToggleFloatingActionButton.
`horizontalAlignment`	`Alignment.Horizontal`	`Alignment.End`	Aligns the items with the button.
`content`	`FloatingActionButtonMenuScope.() -> Unit`		Declare FloatingActionButtonMenuItem entries.

Guidelines

Do:

Use two to six items.
Close the menu after an item is chosen.

Don't:

Do not use it for a single action. Use a plain FAB.
Do not nest menus.

Accessibility

Describe the toggle button state, for example Open menu and Close menu.
Each item is a button with a text label. Keep labels short.
Collapse the menu when focus leaves it and when an item is activated.