Bottom app bar

Puts the most important actions of a screen within thumb reach.

Category: Navigation
API status: Expressive
Compose APIs: BottomAppBar, FlexibleBottomAppBar, BottomAppBarDefaults
Interactive page: https://m3e.ljzapps.app/#components/bottom-app-bar

When to use

A bottom app bar holds up to four actions and optionally a FAB. The flexible variant lets you arrange any content with an arrangement, which suits custom action sets.

For many floating actions that do not need a full width bar, use the floating toolbar instead.

Playground

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

Examples

With FAB

BottomAppBar(
    actions = {
        IconButton(onClick = {}) { Icon(Icons.Rounded.Check, contentDescription = "Mark done") }
        IconButton(onClick = {}) { Icon(Icons.Rounded.Edit, contentDescription = "Edit") }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = {}) { Icon(Icons.Rounded.Add, contentDescription = "Add") }
    },
)

Flexible

Free arrangement of actions.

FlexibleBottomAppBar {
    IconButton(onClick = {}) { Icon(Icons.Rounded.Check, contentDescription = "Mark done") }
    IconButton(onClick = {}) { Icon(Icons.Rounded.Edit, contentDescription = "Edit") }
    IconButton(onClick = {}) { Icon(Icons.Rounded.Mic, contentDescription = "Record") }
    IconButton(onClick = {}) { Icon(Icons.Rounded.Delete, contentDescription = "Delete") }
}

Parameters

Name	Type	Default	Description
`actions`	`@Composable RowScope.() -> Unit`		Icon buttons shown at the start.
`floatingActionButton`	`@Composable (() -> Unit)?`	`null`	Optional FAB at the end.
`horizontalArrangement`	`Arrangement.Horizontal`	`FlexibleHorizontalArrangement`	Flexible bar only.

Guidelines

Do:

Show at most four actions.
Use it for screen level actions.

Don't:

Do not combine with a navigation bar.
Do not use it for navigation between destinations.

Accessibility

Every icon needs a content description.
The bar can hide on scroll. Keep the actions reachable another way for keyboard users.