Dropdown

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

Edit the code below to see your changes live!

API

Dropdown

Prop Name
Type
Default
Description
disabledbooleanfalse

Disables the toggle.

maxHeightnumber250

Sets the max-height of the dropdown.

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-start

Sets the placement of the Dropdown relative to the anchor.

items *Array<DropdownItem | DropdownLinkItem> | Array<DropdownItemGroup>

Accepts an array of DropdownItems and DropdownLinkItems. It also accept a DropdownItemGroup when you want to group items. See example for usage.

toggle *ReactElement

Element used as anchor. Toggles the dropdown.

Props ending with * are required

DropdownItem

Prop Name
Type
Default
Description
actionTypenormal | destructivenormal

Indicates whether your item's action is of normal or destructive nature.

content *string

Sets the text content of the DropdownItem.

disabledboolean

Sets the item to disabled.

hashstring

Stored hash of the item.

iconIcon

Pass in an Icon component to display to the left of the text.

onItemClick *(item: DropdownItem): void

Returns the item object.

tooltipstring

Adds tooltip for disabled item. Default placement is set to right.

type'text''text'

Type of the item.

Props ending with * are required

DropdownLinkItem

Prop Name
Type
Default
Description
actionTypenormal | destructivenormal

Indicates whether your item's action is of normal or destructive nature.

content *string

Sets the text content of the DropdownLinkItem.

disabledboolean

Sets the item to disabled.

iconIcon

Pass in an Icon component to display to the left of the text.

tooltip{ message: string, placement?: 'left' | 'right' }

Adds tooltip for disabled item. Placement is optional, if not passed - 'left' is set.

type *'link'

Wraps the content in a Link component.

url *string

Valid URL of a linked resource.

target'_blank'

Indicates where to display the linked resource.

Props ending with * are required

DropdownItemGroup

Prop Name
Type
Default
Description
label *string

Sets the label for the group.

options *Array<DropdownItem | DropdownLinkItem>

Accepts an array of DropdownItems and DropdownLinkItems. See example for usage.

Props ending with * are required

Examples

Links

A Dropdown can render a list of Links if it receives an object of type LinkItem.

Edit the code below to see your changes live!

Icons

An Item accepts an Icon component to render.

Edit the code below to see your changes live!

Action Types

There are two action types: normal & destructive. They are used to indicate the nature of the action when hovering on the item.

Edit the code below to see your changes live!

Toggle

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

Edit the code below to see your changes live!

Placement

Dropdown can be anchored in different directions with the placement property. It will automatically find a placement 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!

Item Groups

Create Dropdowns with labeled groupings by passing DropdownItemGroup's to the Dropdown's options property.

Edit the code below to see your changes live!

Beta