Dropdowns

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') %}
<div class="custom-select">
    <select>
        <option selected>Select me</option>
        <option>right here</option>
        <option>down here</option>
    </select>
    <div class="custom-select-bg">
        <svg class="icon iconic" xmlns="http://www.w3.org/2000/svg" version="1.1" data-icon="caret-bottom" width="16" height="16" data-container-transform="translate(0 4)" viewBox="0 0 16 16">
            <path d="M0 0l8 8 8-8h-16z" transform="translate(0 4)" />
        </svg>
    </div>
</div>
  • 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') %}
<div class="custom-select alternate">
    <select>
        <option selected>Select me</option>
        <option>right here</option>
        <option>down here</option>
    </select>
    <svg class="icon iconic" xmlns="http://www.w3.org/2000/svg" version="1.1" data-icon="caret-bottom" width="16" height="16" data-container-transform="translate(0 4)" viewBox="0 0 16 16">
        <path d="M0 0l8 8 8-8h-16z" transform="translate(0 4)" />
    </svg>
</div>
  • 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.