# Floating toolbar

> A toolbar that floats above content with actions for the current context.

- Category: Navigation
- API status: Expressive
- Compose APIs: `HorizontalFloatingToolbar`, `VerticalFloatingToolbar`, `FloatingToolbarDefaults`
- Interactive page: https://m3e.ljzapps.app/#components/floating-toolbar

## When to use

Floating toolbars hold actions that relate to what is on screen, such as text formatting. They can sit horizontally or vertically, with or without a FAB, and collapse when the user scrolls.

Standard colors blend into the surface. Vibrant colors draw attention to the toolbar.

## Playground

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

## Examples

### With FAB

```kotlin
Box(Modifier.fillMaxWidth().height(160.dp), contentAlignment = Alignment.Center) {
    HorizontalFloatingToolbar(
        expanded = true,
        floatingActionButton = {
            FloatingToolbarDefaults.StandardFloatingActionButton(onClick = {}) {
                Icon(Icons.Rounded.Edit, contentDescription = "Edit")
            }
        },
    ) {
        IconButton(onClick = {}) { Icon(Icons.Rounded.FormatBold, contentDescription = "Bold") }
        IconButton(onClick = {}) { Icon(Icons.Rounded.FormatItalic, contentDescription = "Italic") }
        IconButton(onClick = {}) { Icon(Icons.Rounded.Straighten, contentDescription = "Ruler") }
    }
}
```

## Parameters

| Name | Type | Default | Description |
|---|---|---|---|
| `expanded` | `Boolean` |  | Whether all actions are visible. When false only the FAB remains. |
| `colors` | `FloatingToolbarColors` | `standardFloatingToolbarColors()` | Standard or vibrant. |
| `scrollBehavior` | `FloatingToolbarScrollBehavior?` | `null` | Collapse on scroll. |
| `floatingActionButton` | `@Composable () -> Unit` |  | Optional FAB, paired with the toolbar. |

## Guidelines

Do:
- Show actions that apply to the current selection.
- Keep it to five actions.

Don't:
- Do not use it for navigation.
- Do not cover important content.

## Accessibility

- Each action needs a content description.
- Keep the toolbar reachable by keyboard when it is collapsed by scrolling.

## Related components

- [Bottom app bar](https://m3e.ljzapps.app/docs/components/bottom-app-bar.md)
- [Floating action button](https://m3e.ljzapps.app/docs/components/fab.md)
- [Icon button](https://m3e.ljzapps.app/docs/components/icon-button.md)