Dropdown

Dropdowns present users with a list or menu of options. Users can filter these options and select multiple options concurrently.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
In progressElement design and development in progress

What's new

Dropdown is a new component for the Dell Design System v2. It incorporates the updated font ramp and color palette, in addition to accessibility enhancements.

When to use

ComponentUse case
DropdownUse the dropdown component to filter, sort, or change page content. Unlike the select component, dropdown can be styled to match the look and feel of a product or application. Dropdowns use multiple concurrent selections, filtering, and grouping to accommodate long lists.
SelectUse the select component if the user must select only one option from a list of more than five options. Select and dropdown are visually similar, however, the appearance of the select component will be determined by browser and device settings. Consider using select if your product or application is prioritizing mobile experiences.
Action menuUse action menu if you have limited space and need to display overflow actions in a list. A selection should trigger the action immediately, and can include both single-select and multi-select options.

Anatomy

The dropdown component is composed of two main parts: a prompt and a menu option list. The component is customizable so that it can accommodate multiple design objectives. Customizations can affect the dropdown’s anatomy and appearance depending on its intended use. The following example shows both parts of a single-select dropdown with a simple list and all possible elements.

The dropdown prompt consists of four primary elements:

  1. Label: describes the options the user will see
  2. Dropdown field: an empty field that indicates a user needs to select an option from the list. This field can be modified to include a prompt so that the user can type in it
  3. Helper text (optional): message to help or guide the user
  4. Chevron: visual indication that the list can open or close

When the user expands the dropdown, the options are visible:

  1. Menu option list: shows a user their options. This part is customizable as a simple, grouped, or multi-select list
  2. Scrollbar: used only when the quantity of items in the menu option list exceeds the height of the viewport
  3. Check icon: visual representation of one selected option

Articles

Dropdowns: Design Guidelines

Read the Nielsen Norman Group's article on dropdown.