toc

Menus

Menus show a temporary set of actions or choices, opened from a button, a text field or a context.

File

<md-gb-button popovertarget="file-menu">File</md-gb-button>
<md-gb-menu id="file-menu">
  <md-gb-menu-item>New</md-gb-menu-item>
  <md-gb-menu-item>Open</md-gb-menu-item>
  <md-gb-menu-item disabled>Save</md-gb-menu-item>
</md-gb-menu>

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

Usage guidelines

Link to “Usage guidelines”

Use it for temporary actions. A menu shows a short set of actions on demand. To show actions on screen at all times, use a toolbar.
Open it from many places. A menu can open from a button, an icon button, a split button or a text field, or as a context menu.
Organize long menus. Use groups with labels and dividers to separate related choices.
Choose a color. The standard color suits most menus; vibrant makes the selected items stand out.

Anatomy

Link to “Anatomy”

A menu holds items, groups and dividers. An item holds a label and optional slots, including a submenu.

HTML

<md-gb-button id="more">More</md-gb-button>
<md-gb-menu id="more-menu">
  <md-gb-menu-group>
    <md-gb-menu-item>
      <md-gb-icon slot="leading">share</md-gb-icon>
      Share
      <span slot="supporting-text">Send a link</span>
      <span slot="trailing-text">Ctrl+S</span>
      <md-gb-icon slot="trailing">chevron_right</md-gb-icon>
      <md-gb-menu slot="submenu">
        <md-gb-menu-item>Email</md-gb-menu-item>
        <md-gb-menu-item>Messages</md-gb-menu-item>
      </md-gb-menu>
    </md-gb-menu-item>
  </md-gb-menu-group>
  <md-gb-divider></md-gb-divider>
  <md-gb-menu-item>Delete</md-gb-menu-item>
</md-gb-menu>

const menu = document.querySelector('#more-menu')!;
menu.showPopover({source: document.querySelector('#more')!});

Examples

Link to “Examples”

Link to “Opening a menu”

A menu is a popover. Point an md-gb-button (or md-gb-icon-button, or a native button) at it with popovertarget, or call showPopover() from script. The menu positions itself next to the button and closes on Escape, when focus leaves, or when an item is chosen.

Sort

<md-gb-button popovertarget="sort-menu">Sort</md-gb-button>
<md-gb-menu id="sort-menu">
  <md-gb-menu-item>Name</md-gb-menu-item>
  <md-gb-menu-item>Date modified</md-gb-menu-item>
  <md-gb-menu-item>Size</md-gb-menu-item>
</md-gb-menu>

Icons and supporting text

Link to “Icons and supporting text”

Fill the leading, supporting-text, trailing-text and trailing slots to add detail to an item.

Edit

<md-gb-button popovertarget="edit-menu">Edit</md-gb-button>
<md-gb-menu id="edit-menu">
  <md-gb-menu-item>
    <md-gb-icon slot="leading">content_cut</md-gb-icon>
    Cut
    <span slot="trailing-text">Ctrl+X</span>
  </md-gb-menu-item>
  <md-gb-menu-item>
    <md-gb-icon slot="leading">content_copy</md-gb-icon>
    Copy
    <span slot="trailing-text">Ctrl+C</span>
  </md-gb-menu-item>
  <md-gb-menu-item>
    <md-gb-icon slot="leading">content_paste</md-gb-icon>
    Paste
    <span slot="trailing-text">Ctrl+V</span>
  </md-gb-menu-item>
</md-gb-menu>

Groups

Link to “Groups”

Wrap related items in an md-gb-menu-group. Set label for a heading, and checkable to single or multiple to make the items selectable like radio buttons or checkboxes. Use checked on the selected items.

View

<md-gb-button popovertarget="view-menu">View</md-gb-button>
<md-gb-menu id="view-menu">
  <md-gb-menu-group label="Sort by" checkable="single">
    <md-gb-menu-item checked>Name</md-gb-menu-item>
    <md-gb-menu-item>Date modified</md-gb-menu-item>
  </md-gb-menu-group>
  <md-gb-divider></md-gb-divider>
  <md-gb-menu-group label="Show" checkable="multiple">
    <md-gb-menu-item checked>Hidden files</md-gb-menu-item>
    <md-gb-menu-item>File extensions</md-gb-menu-item>
  </md-gb-menu-group>
</md-gb-menu>

Grouped layout

Link to “Grouped layout”

Set layout="grouped" to show each group on its own surface with a gap between them, instead of one surface with dividers.

Actions

<md-gb-button popovertarget="actions-menu">Actions</md-gb-button>
<md-gb-menu id="actions-menu" layout="grouped">
  <md-gb-menu-group>
    <md-gb-menu-item>Undo</md-gb-menu-item>
    <md-gb-menu-item>Redo</md-gb-menu-item>
  </md-gb-menu-group>
  <md-gb-menu-group>
    <md-gb-menu-item>Cut</md-gb-menu-item>
    <md-gb-menu-item>Copy</md-gb-menu-item>
    <md-gb-menu-item>Paste</md-gb-menu-item>
  </md-gb-menu-group>
</md-gb-menu>

Vibrant color

Link to “Vibrant color”

Set color="vibrant" to use the tertiary color roles instead of the surface-based standard style.

Theme

<md-gb-button popovertarget="theme-menu">Theme</md-gb-button>
<md-gb-menu id="theme-menu" color="vibrant">
  <md-gb-menu-group checkable="single">
    <md-gb-menu-item checked>System</md-gb-menu-item>
    <md-gb-menu-item>Light</md-gb-menu-item>
    <md-gb-menu-item>Dark</md-gb-menu-item>
  </md-gb-menu-group>
</md-gb-menu>

Submenus

Link to “Submenus”

Put an md-gb-menu in an item's submenu slot. It opens beside the item on click, Enter, Space or the Right arrow key (Left in right-to-left layouts).

<md-gb-button popovertarget="share-menu">Share</md-gb-button>
<md-gb-menu id="share-menu">
  <md-gb-menu-item>Copy link</md-gb-menu-item>
  <md-gb-menu-item>
    Send to
    <md-gb-menu slot="submenu">
      <md-gb-menu-item>Email</md-gb-menu-item>
      <md-gb-menu-item>Message</md-gb-menu-item>
    </md-gb-menu>
  </md-gb-menu-item>
</md-gb-menu>

Link to “Context menu”

Set context-for to the id of an element to open the menu on a secondary click, the context menu key or a long press.

Right-click or long press this photo

Open in new window

Save as

Copy link

<div id="photo" tabindex="0">Right-click or long press this photo</div>
<md-gb-menu context-for="photo">
  <md-gb-menu-item>Open in new window</md-gb-menu-item>
  <md-gb-menu-item>Save as</md-gb-menu-item>
  <md-gb-menu-item>Copy link</md-gb-menu-item>
</md-gb-menu>

Density

Link to “Density”

Set density from 0 (default) down to -3 to remove 4px of height per item for each step. Submenus inherit it. Keep it off by default and let people opt in.

Open

<md-gb-button popovertarget="dense-menu">Open</md-gb-button>
<md-gb-menu id="dense-menu" density="-2">
  <md-gb-menu-item>Rename</md-gb-menu-item>
  <md-gb-menu-item>Duplicate</md-gb-menu-item>
  <md-gb-menu-item>Delete</md-gb-menu-item>
</md-gb-menu>

Accessibility

Link to “Accessibility”

The menu has role="menu", and items have role="menuitem", or menuitemradio and menuitemcheckbox in checkable groups.
On the button that opens the menu, Up and Down open it and focus the first item; Enter and Space open it natively.
In an open menu, Up and Down move between items (disabled items included), Home and End go to the first and last item, and typing a letter jumps to the next item that starts with it.
Escape and Tab close the menu and return focus to the button. Left (Right in right-to-left layouts) closes a submenu.
Give a menu that has no clear visible title an aria-label.

Compatibility

Link to “Compatibility”

Material Design 3Spec checked86% tokens

124 of 325 buildable spec units are tested, 35 are excluded with a written reason and 0 are uncovered (the target is 0). 97 of 113 token declarations match the spec (86%), and 16 have no spec token.

menus 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):

Anchor positioning (opens in a new tab) Limited availability used inside an @supports guard
Container style queries (opens in a new tab) Newly available degrades safely where it is missing
Cursor styles (opens in a new tab) Limited availability degrades safely where it is missing
scrollbar-color (opens in a new tab) Newly available degrades safely where it is missing
scrollbar-gutter (opens in a new tab) Newly available degrades safely where it is missing
scrollbar-width (opens in a new tab) Newly available degrades safely where it is missing
user-select (opens in a new tab) Limited availability used inside an @supports guard
commandForElement (invoker commands) (opens in a new tab) Newly available JavaScript, feature-detected or optional
popover (opens in a new tab) Newly available JavaScript, feature-detected or optional

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

WAI-ARIAaxe and ARIA 1.3 passMenu and Menubar

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

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

3 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

Lighthouse97 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Largest Contentful Paint
Largest Contentful Paint element
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-menu>

Link to “<md-gb-menu>”

A Material Design component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`color` The color style: `standard` (surface-based) or `vibrant` (tertiary).	`color`	`MenuColor`	`MENU_COLORS.standard`
`contextFor` The id of an element (in the same root) that opens this menu as a context menu on a secondary click, the context menu key or a long press (menus.md "Context menus ... usually open with a secondary click"; "Performs a specific action to trigger the menu, like right-click or press-and-hold").	`context-for`	`string`	`''`
`density` The density, from 0 (default) to -3 (menus.md "Density": "On web only, density levels control the spacing between elements. Increasing density decreases the top and bottom padding"). Each step removes 4px from the items' height; submenus inherit it. Values are clamped to that range. Dense items are smaller than the 48px recommended target, so don't apply density by default; let people opt in (grids-spacing.md "Avoid applying component scaling by default").	`density`	`Density`
`filterFor` The id of a text field (in the same root) the menu is attached to. As the person types in it, the menu opens (without taking focus) and shows only the items whose label contains the text, case-insensitively (menus.md "Filtering": "As someone types, the list of menu options filters to show relevant results"). The remaining items ease into their new position ("Menu items ease into their new position as the menu is filtered"), unless motion is reduced. Fires `filter` with the query.	`filter-for`	`string`	`''`
`layout` The layout: `standard` items on one surface, or `grouped` `md-gb-menu-group`s on separate surfaces with gaps between them.	`layout`	`MenuLayout`	`'standard'`

Slots

Link to “Slots”

Slot	Description
default	The menu's items, groups and dividers.

Methods

Link to “Methods”

Method	Description
`closeAll` () => void	Closes this menu and every menu it is a submenu of.
`filter` (query: string) => void	Shows only the items whose label contains `query`, easing the others into their new position.
`showAt` (x: number, y: number) => void	Opens the menu at a point in the viewport (a context menu), keeping it inside the window: it opens below and after the point, and flips when there is no room.

CSS parts

Link to “CSS parts”

Part	Description
`::part(menu)`	The menu's root element.

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--container-color`
`--container-elevation`
`--container-max-width`
`--container-min-width`
`--container-shape`
`--density-step`	Item height removed per density step (set on the items).
`--gap`	Space between groups in the grouped layout.
`--group-padding`
`--group-shape`
`--section-label-text`
`--section-label-text-color`

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

A Material Design component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`checkable`	`checkable`	`MenuItemCheckable`	`null`
`label` The section label shown above the group's items.	`label`	`string`	`''`

Slots

Link to “Slots”

Slot	Description
default	Used to display the menu group's items.

CSS parts

Link to “CSS parts”

Part	Description
`::part(group)`	The group's root element.
`::part(label)`	The section label.

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

A Material Design component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`checked`	`checked`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`

Slots

Link to “Slots”

Slot	Description
default	Used to display the item's primary label.
`leading`	Used to display icons and content before the item's main content.
`submenu`	An `md-gb-menu` to open as this item's submenu.
`supporting-text`	Used to display supporting text below the main label.
`trailing`	Used to display icons and content after the item's main content.
`trailing-text`	Used to display metadata or text after the item's main content.

Events

Link to “Events”

Event	Description
`change` Event	Fired when a checkbox or menu item is checked or unchecked.
`input` InputEvent	Fired when a checkbox or menu item is checked or unchecked.

Methods

Link to “Methods”

Method	Description
`closeSubmenu` () => void	Closes the item's submenu.
`openSubmenu` (focus?: boolean) => void	Opens the item's submenu next to it and focuses its first item.

CSS parts

Link to “CSS parts”

Part	Description
`::part(menu-item)`	The menu item's root element.

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--between-space`
`--bottom-space`
`--container-color`
`--height`
`--inner-corner-corner-size`
`--label-text`
`--label-text-axes`
`--label-text-color`
`--label-text-tracking`
`--leading-icon-color`
`--leading-icon-size`
`--leading-space`
`--shape`
`--supporting-text`
`--supporting-text-axes`
`--supporting-text-color`
`--supporting-text-tracking`
`--top-space`
`--trailing-icon-color`
`--trailing-icon-size`
`--trailing-space`
`--trailing-supporting-text`
`--trailing-supporting-text-axes`
`--trailing-supporting-text-color`
`--trailing-supporting-text-tracking`

Menus

Usage guidelines

Anatomy

Examples

Opening a menu

Icons and supporting text

Groups

Grouped layout

Vibrant color

Submenus

Context menu

Density

Accessibility

Compatibility

API reference

<md-gb-menu>

Properties

Slots

Methods

CSS parts

CSS custom properties

<md-gb-menu-group>

Properties

Slots

CSS parts

<md-gb-menu-item>

Properties

Slots

Events

Methods

CSS parts

CSS custom properties

Download & copy

Download

Copy

Customize theme