Floating toolbar

A pill of actions that floats over the content (COMPONENT_SPEC §9; Compose HorizontalFloatingToolbar / VerticalFloatingToolbar), 64dp across with 8dp padding and items in 48dp slots, edge to edge. Leading and trailing items show only while it is expanded. Beside a FAB the whole toolbar folds into the FAB when collapsed, and the FAB grows from 56dp to 80dp. Standard (surface container) and vibrant (primary container) color styles; the toolbar FAB takes primary container or tertiary container to match.

CSS only

Plain HTML with m3e-css classes in their static states. Without JavaScript the with-FAB toolbar folds on the fast spatial curve and leading/trailing items show or hide at once; set inert on hidden parts yourself. The springs, roving focus and scroll behaviors come from <m3e-floating-toolbar> or React.

Element

<m3e-floating-toolbar> moves its children into the contract: slot="leading" / slot="trailing" items show while expanded, slot="fab" makes the with-FAB toolbar. One tab stop; the arrow keys along the toolbar, Home and End move between items. The buttons below toggle expanded; press twice quickly and the springs reverse from their current speed.

React

<FloatingToolbar> with a FAB that toggles expanded, a vertical toolbar, and the two scroll behaviors over a scrolling region: exitAlways hides the toolbar on scroll down and brings it back on scroll up (a partly hidden toolbar snaps when scrolling stops); collapse collapses it after 40dp down and expands it after 40dp up.

Sources

androidx Compose Material3 1.5.0-beta01 (19991f2c): FloatingToolbar.kt(vendored; layouts, FloatingToolbarDefaults, exitAlwaysScrollBehavior, floatingToolbarVerticalNestedScroll), FloatingToolbarTokens.kt and the values Compose renders in components/floating-toolbar-defaults.css; FloatingToolbarSamples.kt for the screen offset and the FAB toggling expanded.