Dropdowns

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.

Select me right here down here

{% toggleText('dropdown') %}

    
        Select me
        right here
        down here
    
    

        
    

• 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.

Select me right here down here

{% toggleText('alternate') %}

    
        Select me
        right here
        down here
    
    

• 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.