Dropdown

A dropdown menu reveals a list of actions or links when a trigger button is activated, with full keyboard navigation and focus management.

Demo

Activate the dropdown trigger button using a mouse click or by pressing Enter or Space. Once the menu is open, navigate between items with the Down Arrow and Up Arrow keys. Press Home to jump to the first item or End to jump to the last. Select an item with Enter, or dismiss the menu without selecting by pressing Escape.

What to Observe

The trigger button's aria-expanded attribute updates to reflect whether the menu is open or closed.
When the menu opens, focus moves to the first menu item so keyboard users can navigate immediately.
Arrow key navigation moves through menu items in a predictable order without scrolling the page.
Pressing Escape closes the menu and returns focus to the trigger button.
Clicking or tabbing outside the open menu closes it without requiring an explicit close action.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Trigger button — The button that opens and closes the menu; carries aria-expanded and aria-haspopup="menu" to signal its behavior.
Menu container — The list element with role="menu" that wraps all menu items.
Menu items — Individual interactive elements with role="menuitem" (or menuitemcheckbox / menuitemradio for stateful variants).
Dividers — Optional separators with role="separator" that group related menu items visually and semantically.
Menu item icons — Optional decorative icons accompanying item labels; must be hidden from assistive technology if the label already describes the action.

Accessibility Behavior

The trigger must carry aria-haspopup="menu" and aria-expanded so users know a menu exists before they open it.
Focus must move into the menu when it opens — typically to the first item — so keyboard users do not have to navigate there manually.
Arrow keys must cycle through menu items; Tab inside an open menu should close it and move focus to the next element in the page.
Each item must be operable with Enter and must have a clear, descriptive accessible name.
When the menu closes — by selection, Escape, or clicking outside — focus must return to the trigger button.
Disabled menu items must be communicated as non-interactive via aria-disabled, not simply removed from the tab order.

Common Mistakes

Building the menu as a plain <ul> of links without role="menu" and role="menuitem", so screen readers treat it as a list rather than a menu.
Relying solely on Tab to navigate between items instead of arrow keys, which is the expected keyboard pattern for menus.
Not moving focus into the menu on open, leaving keyboard users unable to reach the items.
Omitting aria-expanded on the trigger, so screen readers cannot tell users whether the menu is currently open.
Failing to close the menu when focus moves outside it, leaving a persistent open menu that confuses orientation.

Why This Matters

Dropdown menus are used for navigation, user account actions, sorting controls, and context menus across nearly every application. When the keyboard interaction model is missing or wrong — particularly the arrow-key navigation pattern — users who cannot use a mouse are effectively locked out of entire sections of functionality. The menu pattern has well-established conventions that users of assistive technology have learned to rely on, and deviating from them without reason creates unpredictable, frustrating experiences.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.