When to use
- Overflow actions: When a Button or control has more actions than fit in the visible UI (for example an ellipsis or “More” trigger).
- Contextual commands: When the user needs a short list of related actions tied to the current selection or view.
- Compact settings: When toggling options, filters or choosing one of a few modes without opening a full panel.
- Space constraints: When additional choices exist but there is not room to show them inline.
When to use something else
- Right-click or long-press: Use a Context menu pattern when the trigger is pointer placement on an element, not a visible button.
- Persistent filters or view switching: Use Tabs, Segmented control, or a filter row when the choice should stay visible.
- Lightweight supplementary content: Use Popover for small forms or help text, not a command list.
Dos and don’ts
- Do keep menu items left aligned within each section.
- Do use consistent item anatomy within a section (for example, if one item has a leading icon, all items in that section should).
- Do group related items with Separators or section labels.
- Do place destructive actions at the bottom of the menu, separated from primary actions.
- Don’t mix item types that use leading slots (icon, checkbox, radio) with plain text-only items in the same section.
- Don’t use a Dropdown menu as the only way to complete a critical task; provide a visible primary action when possible.
- Don’t nest more than one submenu level unless the hierarchy is shallow and predictable.
Menu item types
Use the item type that matches the interaction. Mix types only across clearly separated sections.Default items
- When to use: Single-action commands (for example “Edit”, “Duplicate”, “Export”).
- How to use: One label per row; optional leading icon; selecting the item runs the action and closes the menu.
Checkbox items
- When to use: Multiple independent options the user can turn on or off (for example column visibility, feature flags).
- How to use: Keep the menu open after each toggle so users can adjust several options; show a checked state on enabled items.
Radio items
- When to use: Exactly one option from a small mutually exclusive set (for example sort order, density).
- How to use: Group radio items together; selecting one updates the value and may close the menu depending on the workflow.
Destructive items
- When to use: Delete, remove, or other irreversible actions that are still appropriate as a quick command.
- How to use: Use destructive styling, place at the bottom after a separator, and pair with Alert dialog when confirmation is required.
Submenus
- When to use: A logical cluster of related actions that would clutter a flat list (for example “Export as…” with PDF, CSV, and Excel).
- How to use: Open the submenu on hover or keyboard focus; keep submenu labels scannable and limit depth to one level when possible.
Items with descriptions
- When to use: When the label alone is ambiguous and a short secondary line adds necessary context.
- How to use: Keep descriptions to one line; don’t use descriptions on every item; reserve them for items that need disambiguation.
Items with shortcuts or badges
- When to use: When a keyboard shortcut exists or status metadata helps (for example “Beta”, a count, or “New”).
- How to use: Align shortcuts to the trailing edge with KBD styling; use Badge sparingly so trailing content stays scannable.
Section labels
- When to use: When grouping items into named categories within one menu (for example “View” and “Account”).
- How to use: Use short, sentence-case labels; don’t use section labels as interactive rows.
Behavior
- Selecting a default or destructive item runs the action and closes the menu unless the pattern requires confirmation in a dialog.
- Checkbox items keep the menu open until the user dismisses it or moves focus away.
- Radio items update selection immediately; close the menu when a single choice completes the task.
- Submenus open on pointer hover over the parent item and support keyboard navigation into the child panel.
- Position the menu with a 4px gap from the trigger; flip alignment (start/end, top/bottom) to stay inside the viewport.
- Vertical ellipsis triggers should open above or below the button; horizontal ellipsis triggers should open to the left or right, matching the icon direction.
Often used with
Button (including icon-only and split triggers), Toolbar and Action toolbar overflow, Data grid row actions, Separator between groups, KBD for shortcuts, and Badge for status on items.Accessibility
Labeling and triggers
- Name icon-only triggers: If the trigger is icon-only, provide an explicit
aria-labelor visible text so screen reader users know what the menu opens. - Describe the menu purpose: When the trigger label is generic (for example “More”), supplement with
aria-labeltext that names the target (for example “Row actions for Asset 12”).
Keyboard and focus
- Support full keyboard traversal: Arrow keys move between items; Enter or Space activates; Escape closes the menu and returns focus to the trigger.
- Submenu focus: Moving into a submenu should move focus to the first item in the child menu without trapping users in the parent list.
Item semantics
- Checkbox and radio items: Expose checked or selected state with
aria-checked(and grouping for radio items) so assistive tech announces the current value. - Destructive items: Don’t rely on color alone; the label must clearly state the outcome (for example “Delete project”).
- Disabled items: Use
aria-disabled="true"and avoid focus on items that cannot be activated; explain why in a Tooltip only when the reason is not obvious from context.
Live updates
- Dynamic menus: When menu contents change after an action (for example a toggle updates column visibility), ensure state changes are reflected in
aria-checkedor item labels so screen reader users hear the updated value.