# 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.

```kotlin
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.

## Related components

- [Floating action button](https://m3e.ljzapps.app/docs/components/fab.md)
- [Split button](https://m3e.ljzapps.app/docs/components/split-button.md)
- [Floating toolbar](https://m3e.ljzapps.app/docs/components/floating-toolbar.md)