Dropdown Menu
ProAn overlay menu activated by a button click, displaying grouped action items. Supports separators, destructive (danger-styled) items, disabled items, and keyboard shortcuts. Positions itself intelligently to stay within the viewport.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard dropdown with action items, separators, and optional keyboard hints. | Use for secondary actions triggered by a button — "More actions", "Export as...". |
| With Icons | ||
| With Sections |
Usage Guidelines
Do
Group related items with separators for visual clarity.
Don't
Nest dropdown menus within dropdown menus.
Do
Place destructive actions last, styled with danger colour.
Don't
Use for navigation — use a nav pattern instead.
Do
Show keyboard shortcuts inline when available.
Don't
Put more than 8–10 items without grouping or search.
Code
Design Tokens
Accessibility
- Uses role="menu" with role="menuitem" children.
- Trigger button has aria-haspopup="true" and aria-expanded.
- Focus is trapped within the menu when open.
- Escape closes the menu and returns focus to the trigger.