Dropdown Menu (Combo Box)

The control with many names! A dropdown menu gives you a list of items to select from. It is versatile and familiar.

Whether you call it a Dropdown menu, Combo Box (or Combobox), Pull Down menu (or Pull-down menu), Picker, Select input, or something else, you use them every day.

When to Use Dropdown Menus

Dropdown menus are a great way to present a large number of options without taking up much space on the screen. They can also reduce errors, when compared to text input fields, because the input is constrained to the options available. Welie.com writes “The user may be familiar with the data but may not know the exact required syntax.”

Drawbacks are that users can’t see all the options at once and it can take time and dexterity to scroll. If you have a very long list, you may want to consider an autocomplete text input field instead.

According to the U.S. Web Design Standards, the optimal number of items in a dropdown menu is between seven and 15. It suggests using radio buttons or checkboxes for shorter lists.

An exception is when the list is familiar so that users can expect to know the contents before opening it, such as days or months of the year, states/provinces, or countries. “For example, if you have an option menu labelled ‘Month:’ with the item ‘January’ selected, the user might reasonably infer that the menu contains the 12 months of the year without having to look.” (GNOME Human Interface Guidelines)


How to Use Dropdown Menus

  • Order the items logically (e.g., sequential for dates/numbers, alphabetical for countries).
  • Display a meaningful default selection. (macOS Human Interface Guidelines) (Pre-selecting an item can be dangerous, however, since you can’t verify whether the user chose it deliberately. When in doubt, default to no selection.)
  • Avoid making options in one dropdown menu change based on the input to another. Users often don’t understand how selecting an item in one impacts another. (U.S. Web Design Standards)
  • Allow users to click anywhere on the control to open it, rather than only the arrow.
  • Use grouping or categorization when it makes sense (see option group variation below). Group headings or separators should not be selectable, however (in HTML, this can be achieved using the <optgroup> tag).

See this Nielsen Norman Group article about dropdowns for more helpful guidelines.

Basic Usage


Types of Dropdown Menus

States

Variations




Edit this page