Overlays
Menu
A contextual list of actions with nested hierarchies and keyboard states.
Examples
Arrow keys move, Home/End jump, Esc closes and returns focus to the trigger
States
Rendered states (visual reference; the live example above is the accessible one) | Default | Hover | Focus visible | Pressed | Disabled |
|---|
| Menu item | | | | | |
|---|
Anatomy
Menu anatomy| # | Part | Description | Presence |
|---|
| 1 | Trigger | Button with aria-haspopup | Required |
|---|
| 2 | Menu | 12px radius container | Required |
|---|
| 3 | Item | Icon slot 16px, label | Required |
|---|
| 4 | Separator | Divider | Optional |
|---|
Specifications
| Container radius | 12px |
|---|
| Item padding | top 9px · left 12px |
|---|
| Icon slot | 16 × 16px |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Enter Space ↓ | Opens and focuses the first item |
|---|
| ↑ ↓ | Moves between items |
|---|
| Home End | First / last item |
|---|
| Type a letter | Jumps to a matching item |
|---|
| Esc | Closes, focus returns to trigger |
|---|
| Tab | Closes the menu |
|---|
Pointer and touch| Trigger | Response |
|---|
| Click | Opens; click on an item activates and closes |
|---|
| Hover | Item tint |
|---|
| Outside click | Closes |
|---|
Accessibility
role · menu
2.1.1Keyboard2.4.3Focus Order4.1.2Name, Role, Value
Requirements| Requirement | How Rig meets it |
|---|
| Roles | menu and menuitem. Only for actions, never for site navigation. |
|---|
| Roving focus | tabindex="-1" on items, focus moved by script |
|---|
| Trigger | aria-haspopup="menu", aria-expanded, aria-controls |
|---|
| Destructive | Put it last, after a separator |
|---|
Read the matching WAI pattern ↗
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Use for 3 to 8 related actions | ✕Do not use for navigation links (use a list of links) |
| ✓ | ✕Do not nest more than one submenu |