Dropdowns

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