v0.29.2
Dropdowns are toggleable, contextual overlays for displaying lists. Dropdown Design Guidelines.
Edit the code below to see your changes live!
Prop Name | Type | Default | Description |
---|---|---|---|
disabled | boolean | false | Disables the toggle. |
maxHeight | number | 250 | Sets the max-height of the dropdown. |
placement | auto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-start | bottom-start | Sets the placement of the Dropdown relative to the anchor. |
positionFixed | boolean | false | If set, uses |
items * | Array<DropdownItem | DropdownLinkItem> | Array<DropdownItemGroup> |
| Accepts an array of |
toggle * | ReactElement |
| Element used as anchor. Toggles the dropdown. |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
actionType | normal | destructive | normal | Indicates whether your item's action is of normal or destructive nature. |
content * | string |
| Sets the text content of the DropdownItem. |
description | string |
| Sets the content description of the |
disabled | boolean |
| Sets the item to disabled. |
hash | string |
| Stored hash of the item. |
icon | Icon |
| Pass in an Icon component to display to the left of the text. |
onItemClick * | (item: DropdownItem): void |
| Returns the item object. |
tooltip | string |
| Adds tooltip for disabled item. Default placement is set to |
type | 'text' | 'text' | Type of the item. |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
actionType | normal | destructive | normal | Indicates whether your item's action is of normal or destructive nature. |
content * | string |
| Sets the text content of the DropdownLinkItem. |
description | string |
| Sets the content description of the |
disabled | boolean |
| Sets the item to disabled. |
icon | Icon |
| 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 |
url * | string |
| Valid URL of a linked resource. |
target | '_blank' |
| Indicates where to display the linked resource. |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
label | string |
| Sets the label for the group. |
separated | boolean |
| If true, adds a line separator above the group. |
items * | Array<DropdownItem | DropdownLinkItem> |
| Accepts an array of |
Props ending with * are required
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!
An Item accepts an Icon component to render.
Edit the code below to see your changes live!
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!
Dropdown can be anchored to any ReactElement
, including all types of Buttons.
Edit the code below to see your changes live!
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!
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!
Create Dropdowns with labeled groupings by passing DropdownItemGroup
's to the Dropdown's options
property.
Edit the code below to see your changes live!
It is possible to add a description for items.
Edit the code below to see your changes live!