Dropdown
A dropdown (sometimes called a select menu or pull-down list) is a UI element that displays a list of options when the user clicks or taps on a trigger button or field. Once the dropdown is open, users can choose an item from the list, which then closes automatically. Dropdowns are useful for presenting a manageable list of choices without occupying permanent space in the UI.
Usage
Compact Lists: When you have multiple options but want to save screen space, a dropdown can hide them until needed.
Single or Multiple Selection: Some dropdowns allow only one choice at a time, while others can support multi-select (using checkboxes or toggles inside).
Filtering & Sorting: Often used to change data views or table settings without cluttering the main interface.
Use cases
A settings menu in a header bar (“Profile,” “Settings,” “Logout”)
A form select field (“Country,” “Gender,” “Language”)
Filter or sorting options in a toolbar (“Sort by Price,” “Sort by Date”)
Not to be confused with
Contextual Menu: A contextual menu appears upon right-click (or long-press) and offers actions relevant to a specific context. A dropdown is typically triggered by a dedicated button or form element and displays a list of options or commands.
Combo Box / Autocomplete: A combo box or autocomplete allows text input for filtering or entering a value not in the list. A basic dropdown simply displays predetermined options.
Select Field: Technically a type of dropdown, but some design systems opt for custom-styled dropdowns over the default browser select. The functionality is similar, though the implementation differs.
Best practices
Clear Trigger & Label
The button or text that opens the dropdown should have a descriptive label (e.g., “Select Category,” “Options”).
Include an arrow or caret icon indicating there are more options when clicked.
Appropriate Interaction
Click or tap to open; clicking outside or on an option closes the dropdown.
Consider adding keyboard support: focus moves inside the dropdown, arrow keys navigate items, pressing Esc or focusing elsewhere closes it.
Item Organization
If there are many items, group them logically (e.g., section headers) or add a short descriptive label.
Use separators or subheadings if needed, but avoid excessive complexity.
Responsive Design
On smaller screens, dropdowns might need more room. Ensure they don’t get cut off or overlap crucial content.
Consider full-screen or bottom-sheet style dropdowns on mobile if the list is extensive.
Ensure Accessibility
Use appropriate ARIA attributes (role="listbox", aria-expanded, aria-haspopup, etc.).
Provide clear focus states for both the trigger and the list items.
If the dropdown is for form data, label it clearly for screen readers (e.g., connected to a <label> or aria-label).
Highlight Selected or Focused Items
If an option is already selected, show it visually (e.g., a checkmark or highlighted background).
Focus states for keyboard navigation should be obvious.
Limit the List Length
If the dropdown is too long, introduce scrolling within it (max-height).
For extremely large sets, a search within the dropdown or alternative UI might be better (like an autocomplete or multi-column layout).
Transitions & Visuals
Smooth opening/closing animations can help users understand the dropdown’s state change.
Keep transitions quick and subtle to avoid delaying interaction.
Keep the list length reasonable — if an overwhelming number of items is needed, consider a different pattern like a searchable menu or an autocomplete field.
Summary
A dropdown is an excellent solution for presenting a concise set of options in a small space. By using a clear, labeled trigger, maintaining strong accessibility features, and ensuring a responsive, intuitive list of items, dropdowns help users find and select their desired option with minimal friction. Proper attention to interaction design — such as keyboard navigation, focus management, and clear visual states — will ensure an efficient and enjoyable user experience.
