FabMenu

MD3 Expressive FAB menu: a FAB that opens into a vertical stack of up to six labelled actions. The FAB morphs into a 56dp close button and the items reveal from the trailing edge, bottom item first. It closes on outside click, Escape, or item selection.

Basic

Click the FAB to open the menu.

<FabMenu icon={<AddIcon />} ariaLabel="Create">
  <FabMenuItem icon={<EditIcon />} onClick={newNote}>New note</FabMenuItem>
  <FabMenuItem icon={<EventIcon />} onClick={newReminder}>Reminder</FabMenuItem>
  <FabMenuItem icon={<ImageIcon />} onClick={newImage}>Image</FabMenuItem>
</FabMenu>

Colors

color picks the primary / secondary / tertiary set: items use its *-container roles and the open close button its base roles.

Sizes and tonal

The menu opens from any FAB size — size="regular" (default), medium or large. The closed FAB is tonal (*-container) by default; tonal={false} gives it the high-emphasis base roles. The close button is always 56dp, pinned to the FAB's top-trailing corner.

<FabMenu icon={<AddIcon />} ariaLabel="Create" size="large" tonal={false}>
  …
</FabMenu>

Controlled

Use open + onOpenChange(open) to control the menu (or defaultOpen for an uncontrolled initial state).

Menu is closed

const [open, setOpen] = useState(false)

<FabMenu icon={<AddIcon />} ariaLabel="Create" open={open} onOpenChange={setOpen}>
  …
</FabMenu>

Accessibility

• ariaLabel is required: it names the toggle and the menu, and stays the same while open — the state is exposed through aria-expanded (closeAriaLabel is deprecated and ignored).
• Opening keeps focus on the toggle. Tab / ↓ move to the top item (↑: the bottom one); ↑ / ↓ cycle the items with wrap, Home / End jump; Shift+Tab returns to the toggle; Tab from the items closes the menu and moves on.
• Escape and item selection close the menu and return focus to the toggle.
• Items are menuitems. While closed the list is inert and aria-hidden, so hidden items are out of the Tab order and the accessibility tree.

Props

Prop	Type	Default	Description
ariaLabel *	string	—	Accessible label for the toggle — describes the menu it opens. It stays the same while open; the state is exposed through `aria-expanded`. Also names the menu.
children	ReactNode	—	`FabMenuItem`s (up to six).
closeAriaLabel	string	—	@deprecated Ignored — the toggle keeps `ariaLabel` in both states and exposes open / closed through `aria-expanded` (m3 / APG). Will be removed in v2.
color	enum	primary	Color set. Items use its `*-container` roles; the open close button its base roles (e.g. `primary` / `on-primary`).
defaultOpen	boolean	false	Uncontrolled initial open state.
icon *	ReactNode	—	FAB icon shown while the menu is closed.
onOpenChange	((open: boolean) => void)	—	Notified when the open state changes.
open	boolean	—	Controlled open state.
size	enum	regular	Size of the closed FAB — the menu can open from any FAB size (Fab vocabulary). The close button is always 56dp, pinned to the top-trailing corner of the FAB's footprint.
tonal	boolean	true	Closed FAB colors: `true` (the default) uses the tonal `*-container` roles, `false` the high-emphasis base roles (same as the open close button) — the Fab `tonal` prop.

FabMenuItem

A labelled action inside a FabMenu: icon (decorative), children (the label) and the native <button> attributes such as onClick and disabled.

Prop	Type	Default	Description
icon	ReactNode	—	Leading icon (decorative).