Overview

Dropdowns (also known as a dropdown menu, drop menu, pull-down list, picklist) is a graphical control element, similar to a list box, that allows the user to choose one value from a list. When activated, it displays (drops down) a list of values, from which the user may select one. They can be used in menus and tabs.

Usage

Use when

  • Filtering or sorting content on a page.
  • Single selection from a list is necessary.

Don’t use when

  • Providing more than 10 options.
  • Providing only two options. Instead, use a Radio Group or a Switch .

Specifications

  • Dropdowns can be activated by clicking a button, an icon, or a header. See Inputs for dropdowns in form input fields.
  • Dropdown functionality is indicated by a small trailing arrow or an ellipsis (not applicable to icon dropdowns).
  • Dropdown selects are ideal for lists with more than 15 items, but be careful not to overdo it.
  • Within a dropdown, you can separate groups of related menu items with a divider.

Behaviors

  • Make sure the items in the list are in logical order (alphabetical, chronological, order of importance, etc.)
  • If no item is preselected, use something like “Select a vendor” or “Select an account” in ghost or hint text format. If you can’t gray out the text, you can use some kind of indicator, like parentheses.
  • If you need to, you can display ”None” as one of the options. It should have the same text formatting as the other options in the list.
  • Dropdowns are activated by clicking, not hovering.

Editorial

  • Present drop-down selections in sentence case (“Select an account”). If the drop-down list contains formal names, such as customer names or accounts, then those selections will appear in title case.
  • Don’t use “deselect.” Instead, use “clear.” The term “deselect” causes a problem for localization.
  • The list of options should be sorted in a consistent order (alphabetical, chronological, the most selected option, or by order of importance).
  • Don’t end text in a select with a period.
  • Keep option names as brief as possible. Aim for under 5 words.

Accessibility

  • The element that opens the menu has role button.
  • The element with role button has aria-haspopup set to either menu or true.
  • When the menu is displayed, the element with role button has aria-expanded set to true. When the menu is hidden, it is recommended that aria-expanded is not present. If aria-expanded is specified when the menu is hidden, it is set to false .
  • The element that contains the menu items displayed by activating the button has role menu.
  • Optionally, the element with role button has a value specified for aria-controls that refers to the element with role menu.
  • With focus on the button, “Enter” or “Space” opens the menu and places focus on the first menu item. Up and down arrows move focus through menu items.