Menu
The menu is a compact, opaque list of actions. It's triggered by a button — never on hover. Keep it short: more than nine items and it should probably be a page, not a menu.
Action menu
What each part does
- LabelGroup header. Use only when there are two or more groups.
- ItemSingle action. 14px, Medium weight, 32px tall.
- Icon16px, subtle color. Optional but consistent within a menu.
- ShortcutKeyboard hint. Mono, subtle, right-aligned.
- Separator1px rule, 8px margin. Between functional groups only.
- DestructiveRed foreground. Always bottom of the menu.
Three shapes
Action menu
Contextual actions on a row or object.
Select menu
Pick one from a list. Always shows a check.
Multi-select
Toggle several. Menu stays open on click.
Keep them quiet
Never open on hover.
Menus are commitments. Require a click — hover reveals are easy to trigger by accident and break keyboard nav.
Sort by primacy, not alphabet.
The most common action goes first. If Delete is the safest action in your context, put it first; otherwise last.
Labels are verbs.
"Edit identity," not "Edit." Short phrase, Sentence case, no trailing period.
Shortcuts for top-level menus only.
In nested or context menus, shortcuts add clutter and rarely get used. Save them for the app menu bar.