Form Elements
Dropdown Menu
Dropdown menu is a user interface element that reveals a hidden list of options, links or actions when you click or hover over a trigger button.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features14 checks
- Minimum 44x44px touch target size for trigger button (WCAG 2.5.5)
- role="menu" on dropdown container for proper menu semantics
- role="menuitem" on individual menu items for assistive technology
- role="separator" on divider elements
- aria-haspopup="true" indicates trigger opens a menu
- aria-expanded state communicates menu visibility
- Click-outside handling closes menu automatically
- Escape key closes menu and returns focus to trigger
- Arrow key navigation (Up/Down) through menu items (WCAG 2.1.1)
- Home/End keys for first/last item navigation
- Enter and Space keys activate focused menu item
- Focus visible styles for keyboard navigation (WCAG 2.4.7)
- Icons properly hidden from screen readers with aria-hidden
- Disabled items announced to assistive technology
When to use this component
✓Do's
- •Simple action lists triggered by a button
- •Sort or filter option selectors
- •Overflow actions in compact spaces
✗Don'ts
- •For selecting an option in a form - use a select
- •For complex navigation with submenus - use a menu
- •For page or section navigation - use links
- •For triggering a single primary action -, use a button
Do's and Don'ts
✓ Do's
Use descriptive trigger labels like "Sort by", they have 40% higher usage than icon-only.
✗ Don'ts
Don't use dropdowns for form selection, use Select component instead.