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
    labelstring

    Sets the label for the group.

    separatedboolean

    If true, adds a line separator above 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