Menu
Dropdown menu opened via button. Supports typeahead and keyboard navigation.
Locked items
Use MenuItemLocked to indicate an action that requires additional permissions. The item is rendered as disabled with a lock icon suffix.
Best Practices
When to use
- Use Menu for a discoverable trigger that opens a list of actions on a single resource (a dots menu on a row, a dropdown on a primary entity).
- For right-click or long-press on a row, use ContextMenu. For global commands behind
⌘K, use CommandMenu. For two related primary actions, use a split button rather than burying the secondary action. - Cap a Menu around 10 items. Past that, group with
MenuSectionor move secondary actions to a settings page.
Behavior
- Open on click, not hover; hover-open menus collide with screen readers and trackpad scrolls.
- Position auto-flips based on window bounds; don’t hardcode a side that clips on narrow viewports.
- Close on item activation, Escape, and outside-click. Don’t auto-close on a hover-out.
- Use
MenuItemLockedfor permission-gated actions so the lock icon and disabled state explain why the row is inert.
Content
- Item children are Title Case
Verb + Noun(Rename Project,Duplicate Deployment). Bare verbs likeRenameorEditare wrong outside obvious single-object context. - End an item with
…only when activating it opens a follow-up dialog (Rename…,Transfer to Team…). - Group destructive items at the bottom, separated by a divider, and keep the destructive copy as
Verb + Noun(Delete Project, never bareDelete). - Section headers (
MenuSection title) are Title Case, 1–2 words (Workspace,Recent Projects).
Accessibility
- Up/Down arrows move focus through items, Home/End jump to first/last, Enter or Space activates.
- Typeahead jumps to the next item whose label starts with the typed character; keep the visible label first so typeahead matches what the user sees.
- Return focus to the trigger on close so keyboard users keep their place in the row.
Was this helpful?