Dropdowns simplify an interface by grouping many options into a single selector.

If you’re not sure whether to use a dropdown, let the number of options be the guide. 3-10 selectable options work best in a dropdown—if there are fewer than 3, a set of tabs, button group, or radio selector will work better. We use dropdowns to:

  • Choose alternate ways to view or sort information
  • Respond to a question or prompt from a set of possible answers
  • Keep the interface uncluttered

Standard dropdown

A standard dropdown will work well in a form, as a selector to sort a list, or as a way to control the information in a chart.

{% toggleText('dropdown') %}
  • Show at least 3 selectable options.
  • Be descriptive and concise—use single words and short phrases.
  • Dropdowns aren’t buttons or links. Interacting with them shouldn’t take a user to a different page.

Alternate dropdown

This lighter dropdown works best as an interface control, when selecting an option doesn’t drastically change what the user is looking at.

{% toggleText('alternate') %}
  • Show at least 3 selectable options.
  • Limit the options to 1 or 2 words.
  • Don’t use a fixed width—let the dropdown determine it’s own width based on the selected option.