ComponentCraft conventionIntermediate
Dropdown
Content revealed below a trigger, a term that covers three different components and causes confusion.
Definition
Dropdown is a colloquial term rather than a precise one. It variously means a select, a menu of actions, or a navigation panel. Each has different semantics, keyboard behaviour and accessibility requirements.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
Which component you actually mean
| Purpose | Component | Semantics |
|---|---|---|
| Choose a value for a form | Select or combobox | listbox or combobox roles. |
| Run an action | Menu | menu and menuitem roles. |
| Navigate somewhere | Disclosure with a list of links | A button with aria-expanded and a plain list. |
| Show filters or a small form | Popover | dialog or a labelled group. |
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
Often used with
These usually appear in the same screen or the same decision.
- PopoverComponent
- SelectComponent
- Autocomplete and TypeaheadPattern
- NavigationPattern
Commonly confused with
Close enough to be mixed up, different enough to matter.
- MenuComponent
A menu lists actions. A dropdown selects a value and reports it back to a form.