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.
Page Up, Page Down
|change the active menu item|
|Space, Return||select a menu item or open a submenu|
|⬅︎ ➡︎||navigate submenus|
|ESC||dismiss a context menu|
|Tab, Shift-Tab||jump to the next/previous keyboard focusable|
|alphanumeric keys||type 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:
|The element containing the menu items. Customize this part to control the layout and appearance of the menu|
|An individual menu item. Customize this part to control the layout and appareance of individual menu items|
|A menu-item with a |
|The currently active (highlighted) menu item|
|A menu item that is in a checked state|
|A menu item in a disabled state|