Dropdown menu
Interactive elements that allow users to select a single option from a list.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Note: Dropdown menu is a composite component. Some of the following requirements are handled by the component out of the box. The contents of the menu are coded in a list comprised of buttons or links so screen readers announce the number of items in the menu.
- Ensure the button that opens the menu uses
, which is true when the menu is open, and with the value of the menu container. - Ensure the menu (which is a container with a list) uses
, which is false when the menu is closed, and an which is referenced by the triggering button.
Keyboard controls
Dropdown menus are not coded as listboxes, unlike some similar components. Elements within the dropdown menu use their native roles and shouldn’t have added role attributes.
For menu items with actionable items (given the role of buttons in this case), Up/Down arrow keys are not applicable. When the menu is expanded, the user can navigate within the menu using Tab/Shift+Tab keys.
| Key | Behavior |
|---|---|
| Enter or Space | Prompts button. |
| Tab | Moves to the next focusable element within the menu (unlike listbox). If focus is on the last item, tab closes the menu and moves to the next focusable element on the page. |
| Shift+Tab | Moves to the previous focusable element within the menu; if focus is on the first item, shift + tab moves to the triggering element. |
| Esc | Closes the menu. |