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

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.