FAB menu

A FAB that opens 2–6 related actions (COMPONENT_SPEC §6; Compose FloatingActionButtonMenu, ToggleFloatingActionButton and FloatingActionButtonMenuItem). The FAB turns into the menu's 56dp close button: it shrinks into its top end corner, its corners round to a circle, its colors move to the color set's role and its icon swaps to close at half progress. The items stagger in from the bottom, each growing its width from the trailing edge. Give the toggle an aria-label that describes the menu.

CSS only

Plain HTML with m3e-css classes, shown in their static states. Toggling m3e-fab-menu--open without JavaScript morphs the toggle on the fast spatial curve and fades the items in together; the springs, the stagger, focus handling and light dismiss come from <m3e-fab-menu> or React.

Element

<m3e-fab-menu> renders the same classes from its <m3e-fab-menu-item> children and fires open-change and action. Opening leaves focus on the close button, as Compose and m3.material.io do; ArrowDown or Tab moves to the top item, ArrowUp or Shift+Tab to the bottom one. Arrow keys, Home and End move between items, Tab cycles between the items and the close button, and Escape or a press outside closes the menu.

EmailMessageCopy link

Nothing chosen yet.

React

<FabMenu> opening from a medium FAB. Press the FAB twice quickly: the toggle and the items reverse from their current speed.

Sources

androidx Compose Material3 1.5.0-beta01 (19991f2c): FloatingActionButtonMenu.kt (vendored), FabMenuBaselineTokens.kt and the literals and springs it uses in components/fab-menu-defaults.css; FloatingActionButtonMenuSamples.kt for the Add → Close icon swap. m3.material.io FAB menu (2–6 items, color sets, focus order, placement).