Dropdowns

Dropdown menus present a list of options that can be used to filter content in a specific context. Use to let users select an action or values from a set of choices.

Anatomy of a dropdown menu

1. Dropdown trigger
   A button, icon or selector that displays the dropdown list.

2. Dropdown list
   Contains selectable items that you can group into sub-categories.

Dropdown variations

Dropdown triggers

Select Input

A selection input that allow users to choose one option from a list of values. Use mostly on forms.

Dropdown Button

A button that triggers a dropdown list, and displays a set of options for a singular action.

Split Button

A button with an attached dropdown button of related actions.

Dropdown lists

Opening a dropdown presents a list of options. These may be divided into logically related groups.

Single Select

Use a single-select to give users the ability to search and make a single choice from multiple options.

📍In the future, this feature will also be available in this component:

Multiple Select

Use multi select to allow users to choose between multiple options from a list.

General Guidelines

• Clicking outside the dropdown area closes the element.

• Dropdown should be the topmost element on screen when open.

• Only one dropdown is visible on screen at a time.

• When possible, allow users to close one dropdown and open a new one with one click.

• The height of a dropdown is not constrained.

• A header can be added to label sections of actions in any dropdown menu.

• Use a selector to trigger a dropdown when the user needs to choose a value.

• Use a button to trigger a dropdown when the user needs to choose an action.

Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent, otherwise it will display right.

Disabled actions
Displaying actions as disabled, rather than removing them, let the user know they exist under the right conditions. For example, delete is disabled when an item cannot be deleted due to a status change or entitlements setting.

List style
When displaying the list with one single item, it’s recommended to not style the list with separators. In case the list has multiple items (account name, number and balance concatenated), it is recommended to display a horizontal separator after each item.

Grouping items in a Dropdown list
Logically related options may be grouped together for easy scanning.

Selected option
When a dropdown list contains values that edit some piece of data, a selected state to the item is used to indicate the current state of the value being edited.

Scrolling
In most cases you should avoid putting an excessive number of items in the dropdown list. If necessary, the length of the menu may be capped and a scroll bar will then allow access to all items.

Writing Labels
Labels inform users what to expect in a dropdown menu. Use clear labels for the Dropdown trigger so that users understand the purpose. Keep the label short and concise by limiting it to a single line of text.

Dropdown options
Describe the Dropdown option succinctly in one line of text. We recommend presenting the options in alphabetical order.