Dropdown

COMPONENTS

Dropdown allows a user to choose one action from a collection of actions.

View GSUI Toolkit Documentation (Internal Only)

The Dropdown menu is triggered by a Dropdown button. Dropdown buttons can use a single button or a split button with a toggle for triggering the menu.

Dropdown Button
Call to Action
Toggle Icon
Dropdown Menu
Menu Item

Variations

There are two types of dropdowns – single button and split button. Both types can optionally have a leading icon.

Appearance

Action Styles

Dropdowns can have one of four action styles applied — primary, secondary, tertiary and destructive.

Emphasis

Dropdowns can have either bold or minimal emphasis.

Toggle Icon Override

The toggle icon can be replaced with a custom icon when a single icon dropdown button is needed.

By default the dropdown menu is aligned to the bottom left of the dropdown button when opened. Alternate placements are available depending on the needs of the design and are shown below. Additionally, the menu can be set to automatically adjust position to avoid being truncated by the browser or container edge.

The menu and menu items can take on any styling available in Menu. Some examples are shown below and the full list can be referenced in Menu.

Behaviors

The individual dropdown has four possible states — enabled, hovered, selected with opened menu, and disabled. The dropdown menu includes all states from Menu.

The split dropdown has six possible states — enabled, hovered left button, hovered activation button, selected left button, selected activation button with opened menu, and disabled. The dropdown menu includes all states from Menu.

Sizes

Dropdown can be displayed in large, medium and small sizes.

Examples

Guidelines

Menu items should be organized in a logical way that is easily communicated to the user. Best practices include listing alphabetically or grouping related actions.
If the list of items is longer than 15 items, consider using Select to allow the user to filter the items via direct input.
When using the split dropdown button, the left button should be the first action from the collection and not repeated in the menu.

Button

Buttons allow users to take an action.

Menus temporarily display navigation choices with a dropdown.

Select

Select allows a user to select options from a menu that is displayed after clicking or tapping into an input.

Contents