Usage Guidelines

Use title case for the label of commands. For example. Switch to Fullscreen Mode. When the command requires additional input to be completed, end the label with an ellipsis character (…). Do not use three dots (…) or any other punctuation.

Use a divider in between groups of related commands. Grouping related commands can make scanning the menu quicker.

You may use icons to make commands easier to recognize. Do not use purely decorative icons. If an item in a group has an icon, all the items in the same group should have an icon.

Use submenus to groups commands that are a variant of the same action. For example “Color > Red, Green, Blue” or “Move to > Inbox, Archive, Draft”. Do not use submenus to group unrelated commands. Keep submenus to one level, or avoid them altogether if possible.

Keyboard Interaction

⬆︎ ⬇︎
Page Up, Page Down
Home, End
change the active menu item
Space, Returnselect a menu item or open a submenu
⬅︎ ➡︎navigate submenus
ESCdismiss a context menu
Tab, Shift-Tabjump to the next/previous keyboard focusable
alphanumeric keystype select (typing a few characters will make the matching menu item active)

The keyboard focus is restored when the menu is dismissed.


Menu elements are screen reader compatible: the various components of a menu are labeled with the appropriate ARIA attributes.


Menus support dark and light mode.


A menu can be styled and customized using ::part() selectors and embedded stylesheets.

The supported parts are:

menu-containerThe element containing the menu items. Customize this part to control the layout and appearance of the menu
menu-itemAn individual menu item. Customize this part to control the layout and appareance of individual menu items
menu-dividerA menu-item with a divider attribute
activeThe currently active (highlighted) menu item
checkedA menu item that is in a checked state
disabledA menu item in a disabled state

See Also