Dropdown
A menu that reveals a list of options when triggered, allowing single or multiple selection.
Plain English
Dropdowns hide options until the user needs them, saving screen space while keeping choices accessible. They work best for 5-15 options. Fewer than 5 options are better as radio buttons (all visible). More than 15 need a searchable select. The key design decisions: what triggers the dropdown (click, not hover), how it positions itself relative to the trigger (usually below, left-aligned), how it closes (clicking outside or pressing Escape), and what the selected state looks like.
Technical
Implementation: trigger button + absolutely positioned menu panel. Panel: position: absolute, z-index: 100, box-shadow (elevated), border-radius, white background, min-width: trigger width. Menu items: padding: 8px 12px, hover state, checkmark or highlight for selected. Accessibility: use role="listbox"/"menu" + aria-expanded on trigger + aria-haspopup. Keyboard: Arrow keys navigate items, Enter selects, Escape closes, Tab moves out. Click-outside-to-close via mousedown event listener or onBlur with relatedTarget check.
Live Demo
Dropdowns should show 5–7 options max. Use a searchable select for longer lists.
Usage
✓ Good usage
A "Sort by" dropdown that opens on click, closes on Escape or click-outside, highlights the selected option with a checkmark, and uses arrow keys for keyboard navigation.
✗ Bad usage
A dropdown that opens on hover — hover-triggered menus fail on touch devices and cause accidental opens as the cursor passes by.
Recommended values
- Trigger: looks like a button or select input with a chevron icon
- Panel: 8px border radius, elevated shadow, 4px offset from trigger
- Item height: 36-40px
- Item padding: 8px 12px
- Max height: 240-320px with overflow-y: auto
- Min width: equal to trigger width
Common mistakes
- Hover-triggered dropdowns — fail on touch, accidental on desktop.
- No keyboard navigation — Arrow keys must navigate items.
- Dropdown that clips at viewport edge — position it to stay within the viewport.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Dropdown: click-triggered, positioned below trigger + 4px gap. Panel: white background, 8px radius, elevated shadow (z-index: 100), max-height: 280px overflow scroll. Items: 40px height, 12px horizontal padding. Selected state: checkmark + accent colour. Keyboard: arrows navigate, Enter selects, Escape closes.