Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists. Dropdown Design Guidelines.

Edit the code below to see your changes live!

API

Dropdown

Prop NameTypeDefaultDescription
maxHeightnumber250Sets the max-height of the dropdown.
onItemClick(value) => voidCallback called with value of clicked item.
placementauto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-startbottom-startSets the position of the Dropdown relative to the anchor.
trigger *ReactElementElement used as anchor.

Props ending with * are required

Dropdown.Item

Prop NameTypeDefaultDescription
valuestring | string[] | numberValue of the item

Props ending with * are required

Examples

Trigger

Dropdown can be anchored to any ReactElement, including all types of buttons.

Edit the code below to see your changes live!

Position

Dropdown can be anchored in different directions with the position property. It will automatically find a position if there's not enough space in the chosen direction.

Edit the code below to see your changes live!

Max Height

Once the content is longer than the max-height, the Dropdown will be scrollable. It is possible to modify the dimension by passing a maxHeight property.

Edit the code below to see your changes live!

Dropdown.Item

Dropdown expects Dropdown.Item as children. An item can have optional values.

Edit the code below to see your changes live!

Beta