Nets Design logo and other specific symbols

Dropdowns

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.

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:

  1. Use dropdowns sparingly, only when the user needs to choose between 5 and 15 options and you have limited space to display more options.
  2. 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.
  3. 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.
  4. Avoid having dropdowns that dynamically impact each other - i.e. the selection from one dropdown impacting the options in another.
  5. 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.
  6. If the dropdown is binary option (ex. a yes or no selection), opt for a checkbox or toggle instead.
Nets dropdown image

Dropdown variations

Dropdown with icons

Use icons or avatars to identify people, teams, and projects.

Nets dropdown image
Text date picker
Nets dropdown image
Text date picker

Dropdown with categories

You can group dropdown options in different sections, separated by capitalized titles that describe the options in that particular category.

Nets dropdown image
Single date picker
Nets dropdown image
Single date picker - date selected

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.

Nets dropdown image
Nets dropdown image

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.

Nets dropdown image
Nets dropdown image

Dropdown states

Default

Nets dropdown image

Hover

Nets dropdown image

Active

Nets dropdown image

Disabled

Nets dropdown image

Open + hover on option three

Nets dropdown image

Focus - icons

Nets dropdown image

Open - icons + hover on “Cash”

Nets dropdown image

Open - categories

Nets dropdown image

Default

Nets dropdown image

Hover

Nets dropdown image

Active

Nets dropdown image

Disabled

Nets dropdown image

Open

Nets dropdown image

Open - icons + hover on “Cash”

Nets dropdown image

Open - text button

Nets dropdown image