On this page
Overview
Show code, IconsAndShortcuts.tsx
Variants
Context menu
ContextMenu opens a menu for an area on right click, long press, the Menu key or Shift+F10.
Show code, ContextMenuForRows.tsx
Groups and separators
Groups put items under a heading, and separators split sets without one.
Still picture, not live
Show code, GroupsAndSeparators.tsx
Radio and checkbox items
Items can be choices, checked in place.
- A radio item checks one choice and closes the menu; the chosen one takes the selection's fill as well as its check mark.
- A checkbox item toggles and keeps it open.
Show code, Choices.tsx
Submenus
A submenu's row opens a nested menu beside it, on hover or with →.
Show code, Submenus.tsx
Destinations
An item can go to a page, as a link the application's router follows.
Still picture, not live
Show code, Destinations.tsx
Anatomy
Menu
Group label
Item
Icon
Shortcut
Description
Separator
Show code, MenuAnatomy.tsx
Rules
A menu puts what people use most first, and keeps every item in its place.
Use it when
- A short list of actions behind one control, such as More actions
- A few destinations behind one control, such as the account's pages
- Options that change a view, such as a sort order
- Actions for an area on right clickContextMenu
Show code, FrequentFirst.tsx
Show code, DeleteFirst.tsx
Show code, DisabledWithReason.tsx
Submenus and controls
A menu holds items only, one level deep.
- Keep submenus to one level, with frequent commands out of them.
- Put no fields or other controls inside a menu.
Content
Start an action with a verb, such as Rename, and name a destination after its page. Show a shortcut only where the application handles its keys.
Accessibility
| Key | Action |
|---|---|
| Enter, Space or ↓ on the trigger | Opens the menu with its first item highlighted. |
| ↓, ↑, Home, End | Moves the highlight; a letter jumps to the next item that starts with it. |
| Enter, Space | Chooses the highlighted item. |
| →, ← | Opens a submenu, or closes it. |
| Esc | Closes the menu and returns focus to the trigger. |
| Shift+F10 or Menu | Opens a ContextMenu at the focused element. |