DropdownMenu
Github
StorybookA set of actions in a popover.
Structure
The DropdownMenu overlay container is built with a native <div> element with a menu ARIA role to denote it as a list of choices. The DropdownMenu itself renders outside of the document flow in a portal to prevent interference with other elements.
The trigger element and action items are created with buttons and hyperlinks to preserve native interactivity and receive the menuitem ARIA role to link their association with the container. Checkboxes use the menuitemcheckbox role.
Our DropdownMenu uses Floating UI for positioning and interactions, but the library also handles accessibility out of the box. Floating UI's useRole assigns ARIA attributes to the trigger, useListNavigation enables arrow key navigation through menu items, useTypeahead allows jumping to items by typing, and useDismiss handles closing the menu with the Escape key and outside clicks.
ARIA
| Element | Attribute | Description |
|---|---|---|
| Checkbox item | aria-checked | Set to true when the checkbox item is checked. |
| Checkbox item | role="menuitemcheckbox" | Identifies the item as a checkbox within the menu. |
| Menu item | aria-current | Set to true on the item that currently has keyboard focus via list navigation. |
| Menu item | aria-disabled | Set to true when the item is disabled, preventing interaction. |
| Menu item | role="menuitem" | Identifies each action or link as a menu item. |
| Menu container | role="menu" | Identifies the floating overlay as a menu for assistive technology. |
| Trigger | aria-controls | References the id of the menu content when the menu is open. |
| Trigger | aria-expanded | Set to true when the menu is open. |
| Trigger | aria-haspopup | Indicates the trigger controls a popup element. |
Keyboard
Trigger
| Key | Function |
|---|---|
| Enter/Space | Opens the dropdown menu. |
| Escape | Closes the dropdown menu and returns focus to the trigger. |
Menu
| Key | Function |
|---|---|
| Enter/Space | Activates the focused menu item. |
| Escape | Closes the menu and returns focus to the trigger. |
| Tab | Closes the menu and moves focus to the next focusable element. |
| Shift+Tab | Closes the menu and moves focus to the previous focusable element. |
| Type-ahead | Typing a character moves focus to the first menu item whose label starts with that character. |
| ↓ | Moves focus to the next menu item. Navigation loops from the last option back to the first. |
| ↑ | Moves focus to the previous menu item. Navigation loops from the first option back to the last. |
Submenu
| Key | Function |
|---|---|
| → | Opens the submenu when a menu with nested items is focused. |
| ← / Escape | Closes the submenu and returns focus to the parent menu. |