toc

FAB menu

A FAB menu opens from a FAB to show several related actions, and the FAB becomes its close button.

mail Messages

archive Archive

share Share

<md-gb-fab-menu aria-label="Message actions">
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">mail</md-gb-icon>
    Messages
  </md-gb-fab-menu-item>
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">archive</md-gb-icon>
    Archive
  </md-gb-fab-menu-item>
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">share</md-gb-icon>
    Share
  </md-gb-fab-menu-item>
</md-gb-fab-menu>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-fab-menu.json (setup)

Usage guidelines

Link to “Usage guidelines”

Open it from a FAB. The menu appears where the FAB was, and not from an extended FAB or any other component.
Keep it related. A menu holds 2 to 6 closely related actions under one purpose, such as sharing.
Align to the trailing edge. The FAB and menu sit at the trailing edge of the window, mirrored in right-to-left languages.
Always label items. Every item needs a text label.

This component is new in M3 Expressive.

Anatomy

Link to “Anatomy”

A FAB menu holds items and a FAB that toggles it. Both icons can be replaced.

<md-gb-fab-menu open aria-label="Compose actions">
  <md-gb-icon slot="icon">add</md-gb-icon>
  <md-gb-icon slot="close-icon">close</md-gb-icon>
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">edit</md-gb-icon>
    Note
  </md-gb-fab-menu-item>
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">checklist</md-gb-icon>
    List
  </md-gb-fab-menu-item>
</md-gb-fab-menu>

Examples

Link to “Examples”

Colors

Link to “Colors”

Set color to primary (default), secondary or tertiary.

edit Edit

delete Delete

<md-gb-fab-menu color="tertiary" aria-label="Photo actions">
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">edit</md-gb-icon>
    Edit
  </md-gb-fab-menu-item>
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">delete</md-gb-icon>
    Delete
  </md-gb-fab-menu-item>
</md-gb-fab-menu>

Size

Link to “Size”

Set size to md or lg for a larger FAB.

edit Edit

delete Delete

<md-gb-fab-menu size="lg" aria-label="Photo actions">
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">edit</md-gb-icon>
    Edit
  </md-gb-fab-menu-item>
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">delete</md-gb-icon>
    Delete
  </md-gb-fab-menu-item>
</md-gb-fab-menu>

Start alignment

Link to “Start alignment”

Set align="start" to align the items to the start edge, as for a FAB at the leading side.

edit Edit

delete Delete

<md-gb-fab-menu align="start" aria-label="Photo actions">
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">edit</md-gb-icon>
    Edit
  </md-gb-fab-menu-item>
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">delete</md-gb-icon>
    Delete
  </md-gb-fab-menu-item>
</md-gb-fab-menu>

Open and events

Link to “Open and events”

Set open to open the menu from code. The toggle event fires before it opens or closes and activate fires before an item closes it; cancel either to keep the menu as it is.

HTML

<md-gb-fab-menu open aria-label="Photo actions">
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">edit</md-gb-icon>
    Edit
  </md-gb-fab-menu-item>
  <md-gb-fab-menu-item>
    <md-gb-icon slot="icon">delete</md-gb-icon>
    Delete
  </md-gb-fab-menu-item>
</md-gb-fab-menu>
<output id="status" role="status"></output>

const menu = document.querySelector('md-gb-fab-menu')!;
const status = document.querySelector('#status')!;
menu.addEventListener('activate', (event) => {
  status.textContent = 'Activated';
  // Cancel to keep the menu open.
  event.preventDefault();
});

Accessibility

Link to “Accessibility”

Name the menu with aria-label, such as "Message actions". It labels the toggle button.
The toggle button exposes whether the menu is expanded or collapsed.
Tab moves through the button and the items, and Enter or Space activates the focused one.
A menu over scrolling content shouldn't hide focused elements. Register it with setupScrollPadding() from appbar/scroll-padding.js.

Compatibility

Link to “Compatibility”

Material Design 3Spec checked95% tokens

81 of 196 buildable spec units are tested, 24 are excluded with a written reason and 0 are uncovered (the target is 0). 36 of 38 token declarations match the spec (95%), and 2 have no spec token.

fab-menu on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

calc-size() (opens in a new tab) Limited availability degrades safely where it is missing
Cursor styles (opens in a new tab) Limited availability degrades safely where it is missing
overscroll-behavior (opens in a new tab) Limited availability degrades safely where it is missing
scrollbar-width (opens in a new tab) Newly available degrades safely where it is missing

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 passButtonMenu and Menubar

Roles the component renders: button (opens in a new tab), menu (opens in a new tab), menuitem (opens in a new tab).

Follows the WAI-ARIA Authoring Practices: Button (opens in a new tab), Menu and Menubar (opens in a new tab).

2 rendered states run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse99 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Elements with visible text labels do not have matching accessible names.
Eliminate render-blocking resources
Minify JavaScript
Reduce unused CSS
Enable text compression
Network dependency tree
Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-fab-menu>

Link to “<md-gb-fab-menu>”

A Material Design component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`align` The alignment of the items. Defaults to the end, as the FAB.	`align`	`FabMenuAlign`	`FAB_MENU_ALIGNS.end`
`color` The color of the FAB, close button and items.	`color`	`FabMenuColor`	`FAB_MENU_COLORS.primary`
`open` Whether the menu is open.	`open`	`boolean`	`false`
`size` The size of the FAB. The close button is always the same size.	`size`	`FabSize`	`'default'`

Slots

Link to “Slots”

Slot	Description
default	The menu's items, typically `<md-gb-fab-menu-item>`s.
`close-icon`	The close button's icon. Defaults to a "close" icon.
`icon`	The FAB's icon. Defaults to an "add" icon.

Events

Link to “Events”

Event	Description
`activate` CustomEvent<FabMenuActivateDetail>	Fired when an item is activated, before the menu closes. Cancel it to keep the menu open.
`toggle` ToggleEvent	Fired when the menu opens or closes from user interaction, before the change. Cancel it to keep the menu as it is.

CSS parts

Link to “CSS parts”

Part	Description
`::part(button)`	The FAB that toggles the menu.
`::part(fab-menu)`	The menu's root element.
`::part(list)`	The menu's list of items.

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--close-button-between-space`
`--close-button-container-elevation`
`--close-button-container-height`
`--close-button-container-shape`
`--close-button-container-width`
`--close-button-icon-size`
`--item-between-space`
`--item-container-elevation`
`--item-container-height`
`--item-container-shape`
`--item-icon-label-space`
`--item-icon-size`
`--item-label-text`
`--item-label-text-axes`
`--item-label-text-tracking`
`--item-leading-space`
`--item-trailing-space`

Link to “<md-gb-fab-menu-item>”

A Material Design component.

Slots

Link to “Slots”

Slot	Description
default	The item's label. FAB menu items should always have a label.
`icon`	The item's leading icon.

CSS parts

Link to “CSS parts”

Part	Description
`::part(item)`	The item's container.

FAB menu

Usage guidelines

Anatomy

Examples

Colors

Size

Start alignment

Open and events

Accessibility

Compatibility

API reference

<md-gb-fab-menu>

Properties

Slots

Events

CSS parts

CSS custom properties

<md-gb-fab-menu-item>

Slots

CSS parts

Download & copy

Download

Copy

Customize theme