Dropdown

Guidance and accessibility

When to use

• Use a dropdown for a handful of actions or links that do not fit next to the content, such as the actions on a project or the links of an account.
• Name the trigger after what is inside: “Project actions”, not “More”. The core adds a chevron after the label, so people see that the button opens a menu; it turns over while the menu is open.
• Keep it short. More than about eight items, or items people need to compare, belong on the page.
• For picking a value in a form, use a select, not a dropdown.

Accessibility

• The menu is a native popover. The browser closes it on Escape and on a click outside, and returns focus to the button. Browsers tell screen readers whether the menu is open.
• Items are in the tab order right after the button, so Tab moves through them. This is the disclosure pattern; do not add role="menu", which promises arrow-key navigation the dropdown does not have.
• Give an action that does something on the page popovertarget with popovertargetaction="hide", so the menu closes and focus returns to the button.
• On touch screens every item is at least 44 pixels tall.
• The chevron is decoration. Screen readers hear whether the menu is open (expanded or collapsed) from the button itself, and the label says what is inside. In forced colors the chevron takes the button text color.
• The menu uses CSS anchor positioning. Browsers without it show the menu in the middle of the screen, where it still works.