What is a dropdown in UX design?
A dropdown is a UI component that displays a list of options or navigation items when the user clicks, taps, or hovers over a trigger element. The list is hidden by default and revealed on demand, saving screen space in interfaces with many options. Dropdowns appear in navigation menus, form select fields, action menus, and filter controls. The term is used broadly and can refer to native HTML select elements, custom-built option lists, navigation menus, and action menus that trigger from a button.
When should you use a dropdown in UX design?
Dropdowns are appropriate when there are more options than can be displayed comfortably in the available space, when the options follow a predictable pattern that users can navigate efficiently, and when space is constrained. They are less appropriate when users benefit from seeing all options simultaneously to make a comparison, when there are fewer than three options that could be displayed as radio buttons, or when the options are numerous enough that a searchable list or autocomplete would be more efficient.
What is the difference between a dropdown and a select menu?
A select menu refers specifically to the native HTML select element, which renders using the operating system's default control and behavior. A dropdown is a broader term that includes custom-built implementations that mimic select behavior using non-native elements. Native select elements have better built-in accessibility and mobile support but offer less visual control. Custom dropdowns offer more design flexibility but require careful accessibility implementation to match the built-in behavior of native controls.
What are common dropdown usability mistakes?
Dropdowns triggered on hover rather than click create accidental activations and are inaccessible to keyboard and touch users. Dropdowns with more than ten to fifteen options become difficult to scan and would benefit from search or autocomplete. Using dropdowns for binary choices that could be represented as radio buttons or a toggle adds unnecessary interaction cost. Dropdowns that close immediately when the cursor leaves the trigger area create frustration when users move their cursor to the list. Nested dropdowns, which reveal additional menus on hover within the dropdown, are particularly problematic for motor control and touch users.