Dropdown
A contextual menu. Not a Select.
Spec
- Opens on click. Hover opens only if the trigger is also focused — no hover-only menus.
- Flip in the viewport. Prefer below, then above.
- Compact (
<768): bottom sheet, not a clipped menu. - Focus moves in on open. Restored to the trigger on close.
- Close: Escape, outside click, tab-out.
role="menu"+menuitemfor actions.listbox+optiononly when choosing a value — and then you probably wanted Select.- No forms inside.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Contextual menu. Click to open. Esc / outside / tab-out close. Compact is a sheet.
Do / Don't
| Do | Don't |
|---|---|
| Click to open. | Hover-only disclosure. |
| Menu of actions. | A form, a date grid, or a nested dialog. |
| Restore focus. | Leave focus on a detached node. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
opacity + translateY(6px) | 280ms --dur-enter | --ease-out | open | opacity 120ms or instant |
| opacity | 160ms --dur-exit | --ease-out | close | instant |
translateY (sheet) | 280 / 160 | --ease-out | open / close | opacity only |
Accessibility
- Trigger:
aria-haspopup="menu"+aria-expanded. - Keyboard: arrows among items, Home/End, Enter/Space activate, Esc closes.
- Compact sheet still traps nothing that isn't a menu. Tab-out closes.
- Item face 32 (
--control-h-md). Compact-width sheet items are 44. - These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.