COMPONENTS

Dropdown

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

Date Picker Intro

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 Anatomy
  1. Dropdown Button
  2. Call to Action
  3. Toggle Icon
  4. Dropdown Menu
  5. Menu Item

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

Dropdown Variations

Dropdowns can have one of five action styles applied — primary, secondary, info, contrast, and destructive.

Dropdown Emphasis

Dropdowns can have bold, subtle, or minimal emphasis.

Dropdown Emphasis

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

toggle icon override

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.

Dropdown Menu Placement

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.

Dropdown Menu Items

Dropdown button has five possible states — enabled, hover, active, focus and disabled. The same states are applied to the split button.

Dropdown States

The dropdown menu inherits all the states from Menu the component — enabled, hover, active, focus, selected and disabled.

Dropdown Menu States

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

Dropdown Sizes
Dropdown Examples
  • 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.