Menu
A list of actions revealed on demand, which is where infrequent operations belong.
Definition
A menu presents a set of actions, usually opened from a trigger. In ARIA terms a menu contains commands; a list of navigation links is not a menu even when it looks like one.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Requirements
- Open on click. Hover-opened menus are fragile to steer into and impossible on touch.
- Arrow keys move between items, Escape closes, Enter activates, and typing jumps to a matching item.
- Group related items with separators, and place destructive actions last, separated.
- Show keyboard shortcuts alongside items where they exist.
- Avoid submenus. If you must, add pointer-intent handling and a close delay.
- Do not use ARIA menu roles for a list of links. Use a list of links.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Flexibility and Efficiency of UseHeuristic
- Steering LawLaw
Depends on
Get these right first, or this one will not hold.
- Content on Hover or FocusAccessibility
- Keyboard NavigationAccessibility
Often used with
These usually appear in the same screen or the same decision.
- Command PalettePattern
- Destructive ActionsPattern
- NavigationPattern
Commonly confused with
Close enough to be mixed up, different enough to matter.
- DropdownComponent
A menu lists actions. A dropdown selects a value and reports it back to a form.