Contextual actions in a compact, keyboardable list.
| Prop / event | Type | Notes |
|---|---|---|
| Item.onSelect | () => void | Runs the action, then closes |
| icon / shortcut | ReactNode / string | Leading glyph and trailing key hint |
| danger | boolean | Red destructive row |
| Divider · section | — | Group related items with a rule or label |
| ↑ / ↓ · Enter · Esc | — | Move, run, or close; type-ahead jumps |
A Menu lists actions on a thing. For choosing a value use a Dropdown; for a primary action with alternatives use a Split Button; for a global palette use the Command Menu.
Separate the destructive action with a divider, and colour it red.
Don't put a destructive action first, where it's easy to hit.
Show the keyboard shortcut so people learn the fast path.
Don't dump twenty items in one flat list. Group, or use sub-menus.
The ⋮ overflow menu on a table or list row.
A context menu on right-click, with shortcuts.
An account menu from an avatar, with a section label.
| Token | Value | Role |
|---|---|---|
| --menu-bg | #141519 | Panel surface |
| --menu-border | #262A30 | Panel + divider hairline |
| --menu-hover | #1E1F25 | Row hover fill |
| --menu-icon | #767B87 | Leading glyph |
| --menu-danger | #F2777B | Destructive row |
| --menu-kbd | mono · #565A62 | Trailing shortcut hint |
<button aria-haspopup="menu" aria-expanded="true">⋮</button> <div class="o-menu" role="menu"> <button role="menuitem" class="o-menu__opt"><EditIcon /> Edit <kbd>E</kbd></button> <button role="menuitem" class="o-menu__opt"><CopyIcon /> Duplicate <kbd>⌘D</kbd></button> <div class="o-menu__divider"></div> <button role="menuitem" class="o-menu__opt o-menu__opt--danger"><TrashIcon /> Delete</button> </div>