Menu

navigation

Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Variants

Basic Menu

Default

Standard dropdown menu

Submenu

Nested menu with cascading items

Context Menu

Menu triggered by right-click or long-press

Properties

Name Type Required Default Description
open boolean - - Whether the menu is open
anchor string - - ID of the element to anchor the menu to
positioning enum - absolute Positioning strategy for the menu
quick boolean - - Skip opening and closing animations
hasOverflow boolean - - Allow overflow for submenus
anchorCorner string - end-start Corner of anchor to align menu to
menuCorner string - start-start Corner of menu to align with anchor
stayOpenOnOutsideClick boolean - - Keep menu open when clicking outside
stayOpenOnFocusout boolean - - Keep menu open when focus leaves
typeaheadDelay number - 200 Delay before clearing typeahead buffer

States

closed

Menu is not visible

opening

Menu is animating open

open

Menu is visible

closing

Menu is animating closed

Accessibility

Role: menu
Keyboard Support:
  • ArrowDown - Move to next item
  • ArrowUp - Move to previous item
  • ArrowRight - Open submenu
  • ArrowLeft - Close submenu
  • Enter/Space - Activate item
  • Escape - Close menu
  • Home - Move to first item
  • End - Move to last item
  • Character - Typeahead to matching item
Screen Reader Notes: Menu container should have aria-label. Items use role="menuitem". Use role="separator" for dividers.

LLM Context

Intent: Display a temporary list of actions or options
Anti-Patterns:
  • Menu without anchor element
  • Menu without aria-label
  • Too many menu items (more than 10-12)
  • Nested submenus more than 2 levels deep
  • Menu that doesn't close on item selection
Example Usage: 
<span style="position:relative"><md-icon-button id="anchor"><md-icon>more_vert</md-icon></md-icon-button><md-menu anchor="anchor"><md-menu-item><div slot="headline">Edit</div></md-menu-item><md-menu-item><div slot="headline">Delete</div></md-menu-item></md-menu></span>
<md-menu positioning="popover" anchor="btn"><md-menu-item><div slot="headline">Option 1</div></md-menu-item></md-menu>