Menu

Material Design 3 menu surfaces for action lists and context commands. Not intended for multi-step workflows; use dialogs or sheets when users must review substantial content before acting.

Basic Usage

Open a simple anchored menu with text actions. Menus provide concise command lists tied to the current trigger context.

Open Menu Profile Settings Sign out 
<ds-button id="menu-trigger-basic">Open Menu</ds-button>
<ds-menu anchor="menu-trigger-basic">
  <ds-menu-item>Profile</ds-menu-item>
  <ds-menu-item>Settings</ds-menu-item>
  <ds-menu-item divider></ds-menu-item>
  <ds-menu-item>Sign out</ds-menu-item>
</ds-menu>

Initial Value

Use initial selected and disabled states to match current context.

Sort Options check Name Date modified Size (Unavailable) 
<ds-menu anchor="menu-trigger-initial">
  <ds-menu-item selected>Name</ds-menu-item>
  <ds-menu-item>Date modified</ds-menu-item>
  <ds-menu-item disabled>Size (Unavailable)</ds-menu-item>
</ds-menu>

Variants

Use slot content patterns for icon-led and shortcut-style menus.

Leading Icons

File Menu description New folder_open Open save Save

Trailing Content

Edit Menu content_copy Copy Ctrl+C content_paste Paste Ctrl+V push_pin Keep Open Pinned 
<ds-menu-item>
  <ds-icon slot="leading">content_copy</ds-icon>
  Copy
  <span slot="trailing">Ctrl+C</span>
</ds-menu-item>

States

Menus support open/closed, selected, disabled, and divider states.

Open States Demo Selected Item Default Item Disabled Item After Divider 
menu.open();
menu.close();

Interactive Example

Select an item to view emitted event details.

Actions refresh Refresh download Download settings Settings

API

Attributes

Attribute Type Default Description
anchor string null ID of the element used for anchored positioning.
open boolean false Reflects whether the menu is open.

Events

Event Detail Description
ds-menu:open {} Fired when the menu opens.
ds-menu:close {} Fired when the menu closes.
ds-menu:select { item } Fired when an enabled item is selected.

Methods

Method Description
open() Open the menu.
close() Close the menu.
toggle() Toggle between open and closed states.

Menu Item Attributes

Attribute Type Default Description
disabled boolean false Disables interaction for the item.
selected boolean false Marks an item as selected.
divider boolean false Renders a divider row.
keep-open boolean false Keeps the menu open after click.

CSS Custom Properties

Property Description
--ds-menu-item-min-height Minimum menu item height (defaults to control-lg).
--ds-menu-item-leading-size Leading icon slot size (defaults to icon-lg).
--ds-menu-container-padding-block Menu panel top/bottom padding.

Accessibility

Keyboard Interaction

Key Context Expected Result
Arrow Up / Arrow Down Menu open Moves focus between enabled menu items
Enter / Space Focus on menu item Selects the focused item
Escape Menu open Closes the menu and returns focus to trigger
Tab Menu open Closes the menu and continues focus navigation

Semantics

  • Menu surface uses role="menu"; items use role="menuitem".
  • Disabled items expose aria-disabled="true".
  • Backdrop click closes the menu for pointer users.

Usage Guidelines

  • When to use: Use menus for compact, contextual command lists anchored to a trigger element.
  • When not to use: Avoid menus for long explanations, multi-step tasks, or destructive flows requiring strong confirmation.
  • Composition: Use concise labels, group related actions with dividers, and add leading icons only when they improve recognition.
  • Common mistakes: Overusing keep-open can confuse expected menu behavior. Reserve it for explicit multi-select interactions.