Dropdown
A dropdown provides a raised surface for displaying a list of contextual actions in front of the current view. The major benefit of utilizing dropdowns, based on the principle of progressive disclosure, is the ability to reduce clutter and cognitive load by grouping contextual UI behind an interaction. Note: dropdowns are only used for responsive web and Android experiences. When designing and building for iOS, use a bottom sheet component instead.

Anatomy
The dropdown component is made up of a trigger, raised surface, and a list of choices for the user to select from. There are two dropdown variations: menu dropdown, and input dropdown. Both the menu and input dropdown variants can be used as single select or multi-select dropdowns.
Menu dropdown
The menu dropdown variant is triggered by tapping or clicking on either a static trigger or dynamic trigger (more on triggers at the bottom of this menu dropdown section). The trigger can be one of four options: quick action button, icon only, label and icon combo, or label and caret combo — each trigger option has unique features and behaviors.
Quick action button trigger
The quick action button trigger allows the dropdown to be triggered by interacting with the quick action button. Any icon can be used within the quick action button. What’s unique about this trigger option is a badge can be utilized to show how many selections have been made.

- Quick action component
- Badge (optional)
- Raised surface
- Selected item indicator (see also cloaked checkbox or cloaked radio button)
- Selected item background (see states matrix)
- Divider (optional)
- List item label
- List item icon (optional)
- Selected item label — Subtitle 1 (see also cloaked checkbox or cloaked radio button)
Badges represent how many list items have been selected by the user. Usability when selecting multiple list items starts to take a hit when more than just a handful of selections are made. If a user may want to select more than 5 selection, consider using a different solution. A bottom sheet or side sheet could be a great place to list out a large group of chips that a user could add/remove one by one instead of tediously selecting from a dropdown (that could easily be cancelled inadvertently.
Icon only trigger
The icon only trigger allows the dropdown to be triggered by the click of an icon. The icon does not display any affordances (other than color) to indicate an interaction is possible (if a higher emphasis trigger is needed, use the quick action button trigger).

- Icon only trigger
- Raised surface
- Divider (optional)
- List item label
- List item icon (optional)
Label and icon combo trigger
The label and icon combo trigger combines both an icon and text label as a call to action. Any icon can be used with this trigger option.

- Label and icon trigger label
- Label and icon trigger icon
- Raised surface
- Divider (optional)
- List item label
- List item icon (optional)
Label and caret combo trigger
This combo trigger is unique because the caret will spin around to provide affordance for the user both when the dropdown is open or closed.

- Trigger label — Body 1
- Trigger icon
- Raised surface
- Divider (optional)
- List item label
- List item icon (optional)
Static triggers
The static trigger maintains a consistent label and/or icon before and after a selection is made. Both the icon only trigger and quick action trigger are considered to be static since the icon will not change as a result of the user's selection. Both the label and icon combo trigger and the label and caret trigger can be static if the label does not change as a result of the user's selection.

- Label and caret trigger (before selection)
- Label and caret trigger (after selection)

- Quick action button trigger (before selection)
- Quick action button trigger (after selection)
Note: Although the quick action button cannot change as a result of a user's selection, a badge can be shown as a way to let the user know how many list items have been selected. A badge cannot be used with any other trigger types.
Dynamic triggers
The dynamic trigger updates the trigger label based on the user uselection, and requires a default selection. Only the label and icon combo trigger and the label and caret trigger can utilize the dynamic updating of the text label (since these are the only triggers with a text label that can be updated).

- Label and caret trigger (before selection)
- Label and caret trigger (after selection)
Input dropdown
The input variant provides a way for users to make a selection that will then be used as the input within a form, and is always triggered by tapping or clicking anywhere on the input field. Note: To see the differences on clicking the input field in general vs clicking the trailing icon specifically, check out the behavior section.

- Input field trigger (focused state)
- Raised surface
- Divider (optional)
- List item label — Body 1
- List item icon (optional)
States
Labels and icons trigger
The following graphic show the states for both the icon only trigger, label and icon combo trigger, and the label and caret combo trigger.

Quick action trigger


Account list items


Standard list items

Placement
The default placement of dropdowns should be immediately below the trigger (referred to as the flow down placement) and aligned along the left edge; but due to information density or scroll position, the dropdown can also appear above the trigger (referred to as the flow up placement), aligned along the right edge, or centered vertically or horizontally with the trigger.

- Flow down placement aligned along the left edge
- Flow down placement aligned along the right edge
- Flow up placement aligned along the right edge (but could also be left aligned)
- Flow up placement center aligned (could also follow the flow down placement)
Flow down placement
The flow down placement is the default way to position the dropdown component, and is used when the dropdown height is smaller than the distance from the trigger to the bottom of the viewport minus one list item.

- The distance from the trigger to the bottom of the viewport
- The height of a list item within the dropdown
- The height of a list item distance from the bottom of the viewport
Flow up placement
The flow up placement should only be used when there’s not enough space to utilize the flow down placement.

- The height of the dropdown component
- The distance of the trigger to the bottom fo the viewport is not tall enough to display the entire dropdown, so the flow up placement is used
Scrollable
In most cases, the height of the dropdown is based on the amount of content contained within the dropdown. The exception to this rule is when the height of a dropdown would otherwise be taller than the visible space within the viewport. In this case, a scrollable dropdown should be utilized.
Scrollable dropdowns can follow both the flow down or the flow up placement, and should always maintain at least one list item height distance away from the viewport edge and honor “safe areas” on mobile devices with notches in the display.
Truncation
List items that contain account information can become truncated if there’s not enough horizontal space to display the full account nickname. See the account component for more details about truncation and priorities. Standard list items should never truncate, but wrap to another line.


Developer Docs
Vue Developer DocsComponent documentation coming soon!