A dropdown, or picklist, allows your user to select from a list of pre-defined options. A dropdown can have either a single selection or a multi-selection pattern.
Dropdowns
Guidelines
Typically, dropdown menus should be used sparingly, when the users have between 5 and 15 options to choose from. For anything with less options you can consider radio buttons or checkboxes, as it is preferable to have all the options visible on the page. When there are a lot of options, you can consider using a selectable search bar.
There are many different parameters to take into account when selecting for the best dropdown select option. Find below our guidelines on the topic:
- Use dropdowns sparingly, only when the user needs to choose between 5 and 15 options and you have limited space to display more options.
- If you need to allow multi-select, then it’s preferred to use checkboxes instead, as multiple selection in dropdowns might not be the most intuitive option for many of your users.
- Use clear labels for the dropdown, so the user knows the purpose of what he is selecting. Keep the options short and concise, within a single line of text.
- Avoid having dropdowns that dynamically impact each other - i.e. the selection from one dropdown impacting the options in another.
- Sort the list of items in a dropdown in a logical order. For example, the most selected option should be at the top so the user doesn’t have to sort through the whole list to find it.
- If the dropdown is binary option (ex. a yes or no selection), opt for a checkbox or toggle instead.
Dropdown variations
Dropdown with icons
Use icons or avatars to identify people, teams, and projects.
Dropdown with categories
You can group dropdown options in different sections, separated by capitalized titles that describe the options in that particular category.
Icon menu
You can invoke the opening of a dropdown via a button in certain situations, replacing the text label. The dropdown will behave similarly to the previous examples. When employing this solution, care must be taken to assure that the icon is suggestive enough so that purpose of the dropdown is clear to the user.
Icon menu
Text button menu As an alternative to a classic dropdown, you can remove the table box and replace the label with a text button.