Docked toolbar

A full-width bar of actions docked at the bottom of the screen (COMPONENT_SPEC §10; Compose FlexibleBottomAppBar): 64dp tall, surface container, no corner radius and no shadow, items in 48dp slots. The items spread with 16dp ends (the default), sit centered 32dp apart, or are spaced around / evenly. With the exit-always scroll behavior it hides on scroll down and comes back on scroll up; a partly hidden bar snaps on the fast spatial spring when scrolling stops. It replaces the legacy bottom app bar (deprecated, below).

CSS only

Plain HTML with m3e-css classes: .m3e-docked-toolbar with role="toolbar", and --center, --space-around, --space-evenly or --vibrant. Roving focus and the scroll behavior come from <m3e-docked-toolbar> or React.

Spread (default): space between, 16dp ends
Center: 32dp apart
Space around
Space evenly
Vibrant, center

Element

<m3e-docked-toolbar scroll-behavior="exit-always"> docked under a scrolling region: scroll down and it slides away by the scrolled distance, scroll up and it returns. One tab stop; the arrow keys, Home and End move between items. Focus never lands in a hidden bar: it comes back when focus moves into it and stays while it holds focus.

  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24
  • Row 25
  • Row 26
  • Row 27
  • Row 28
  • Row 29
  • Row 30

React

<DockedToolbar arrangement scrollBehavior="exitAlways" scrollTarget> over a scrolling region, with the arrangement switchable.

Bottom app bar (deprecated)

Deprecated (DECISIONS D4): the legacy BottomAppBar ships until 2.0 for migration and gets no new features. Use the docked toolbar.

Compose BottomAppBar with actions and a FAB: 80dp tall, actions from the start, the FAB 8dp below the top and 16dp from the end, colored secondary container with no shadow as in Compose's BottomAppBarWithFAB sample. CSS .m3e-bottom-app-bar or React <BottomAppBar actions floatingActionButton scrollBehavior>; no element.

Sources

androidx Compose Material3 1.5.0-beta01 (19991f2c): AppBar.kt (FlexibleBottomAppBar, BottomAppBar, BottomAppBarDefaults, BottomAppBarState, exitAlwaysScrollBehavior, settleAppBarBottom), DockedToolbarTokens.kt, BottomAppBarTokens.kt and the values Compose renders in components/docked-toolbar-defaults.css / components/bottom-app-bar-defaults.css; AppBarSamples.kt for the space-around / space-evenly arrangements, the vibrant color and the bottom app bar FAB.