Drop Down

This component presents a dropdown that is controlled by a toggle button. It is compatible with screen readers and keyboard navigation.

Attached to the Dropdown component are a few components used to construct the widget:

  • Dropdown.Toggle: the dropdown’s toggle button that opens and closes it
  • Dropdown.Item: a menu item in the dropdown’s menu
  • Dropdown.Separator: a separator between that can be inserted between menu items in the dropdown’s menu
Example

Variations: type

Example

Variations: more

This variation utilizes the size property size="xs" for other sizes please refer to Button sizes.

Example

Variations: Split

Example

API

Name Type Default Description
items array A list of dropdown menu items and separators
onSelect function A function that is invoked when a menu item is selected. It is passed the selected value.
toggle Dropdown.Toggle A toggle widget to render as the dropdown’s toggle
buttons array A list of buttons to add to the dropdown to form split button group

Used by

Team
Titan

Dropdown button

Dropdown button is used when a set of related actions are available. The label of the button has to convey the overall action with a secondary dropdown showcasing each related action. This variation can be used with either a primary or secondary button.

Example


Split button

Split button with an attached dropdown menu of related actions. The labeled section shows the 80% use case action for easy access, while the dropdown menu shows all other actions. This variation can be used with either a primary or secondary button.

Example


More button

Example