v0.29.2

Introduction

Foundations

Layout

Actions & Inputs

Status & Feedback

Utilities

Helpful Links

Dropdown

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

Edit the code below to see your changes live!

<Dropdown
  maxHeight={250}
  items={[
    { content: 'Edit', onItemClick: (item) => item, hash: 'edit', icon: <EditIcon /> },
    {
      content: 'Duplicate',
      onItemClick: (item) => item,
      hash: 'duplicate',
      icon: <FileCopyIcon />,
    },
    {
      content: 'Copy',
      onItemClick: (item) => item,
      hash: 'copy',
      icon: <AssignmentIcon />,
      disabled: true,
      tooltip: 'You cannot copy this item...',
    },
    {
      content: 'Delete',
      onItemClick: (item) => item,
      hash: 'delete',
      icon: <DeleteIcon />,
      actionType: 'destructive',
    },
    {
      content: 'Link',
      icon: <OpenInNewIcon />,
      type: 'link',
      url: '#',
    },
  ]}
  placement="bottom-start"
  toggle={<Button>Open Menu</Button>}
/>

<Dropdown
  maxHeight={250}
  items={[
    { content: 'Edit', onItemClick: (item) => item, hash: 'edit', icon: <EditIcon /> },
    {
      content: 'Duplicate',
      onItemClick: (item) => item,
      hash: 'duplicate',
      icon: <FileCopyIcon />,
    },
    {
      content: 'Copy',
      onItemClick: (item) => item,
      hash: 'copy',
      icon: <AssignmentIcon />,
      disabled: true,
      tooltip: 'You cannot copy this item...',
    },
    {
      content: 'Delete',
      onItemClick: (item) => item,
      hash: 'delete',
      icon: <DeleteIcon />,
      actionType: 'destructive',
    },
    {
      content: 'Link',
      icon: <OpenInNewIcon />,
      type: 'link',
      url: '#',
    },
  ]}
  placement="bottom-start"
  toggle={<Button>Open Menu</Button>}
/>

API

Dropdown

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 `position: fixed` instead of `position: absolute` to position the list.
`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
`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 `DropdownItem`
`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 `right`.
`type`	`'text'`	`'text'`	Type of the item.

Props ending with * are required

DropdownLinkItem

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 `DropdownLinkItem`
`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 `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	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 `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!

<Dropdown
  items={[
    { content: 'Item', type: 'link', url: '#' },
    { content: 'Item', type: 'link', url: '#' },
    { content: 'Item', type: 'link', url: '#', target: '_blank' },
  ]}
  toggle={<Button>Button</Button>}
/>

<Dropdown
  items={[
    { content: 'Item', type: 'link', url: '#' },
    { content: 'Item', type: 'link', url: '#' },
    { content: 'Item', type: 'link', url: '#', target: '_blank' },
  ]}
  toggle={<Button>Button</Button>}
/>

Icons

An Item accepts an Icon component to render.

Edit the code below to see your changes live!


      <Dropdown
        items={[
          { content: 'Item', icon: <EditIcon />, onItemClick: (item) => item },
          { content: 'Link', icon: <OpenInNewIcon />, type: 'link', url: '#' },
        ]}
        toggle={<Button>Button</Button>}
      />


      <Dropdown
        items={[
          { content: 'Item', icon: <EditIcon />, onItemClick: (item) => item },
          { content: 'Link', icon: <OpenInNewIcon />, type: 'link', url: '#' },
        ]}
        toggle={<Button>Button</Button>}
      />

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!

<Dropdown
  items={[
    { content: 'Save', onItemClick: (item) => item, actionType: 'normal' },
    { content: 'Delete', onItemClick: (item) => item, actionType: 'destructive' },
  ]}
  toggle={<Button>Button</Button>}
/>

<Dropdown
  items={[
    { content: 'Save', onItemClick: (item) => item, actionType: 'normal' },
    { content: 'Delete', onItemClick: (item) => item, actionType: 'destructive' },
  ]}
  toggle={<Button>Button</Button>}
/>

Toggle

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

Edit the code below to see your changes live!

<Grid gridColumns="repeat(4, min-content)">
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button>Button</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button actionType="destructive">Button</Button>}
  />

  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button variant="secondary">Button</Button>}
  />

  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button variant="subtle">Button</Button>}
  />
</Grid>

<Grid gridColumns="repeat(4, min-content)">
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button>Button</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button actionType="destructive">Button</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button variant="secondary">Button</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button variant="subtle">Button</Button>}
  />
</Grid>

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!

<Grid gridColumns="repeat(4, min-content)">
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    placement="right"
    toggle={<Button>Right</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    placement="top"
    toggle={<Button>Top</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    placement="bottom-start"
    toggle={<Button>Bottom-Start</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    placement="bottom-end"
    toggle={<Button>Bottom-End</Button>}
  />
</Grid>

<Grid gridColumns="repeat(4, min-content)">
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    placement="right"
    toggle={<Button>Right</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    placement="top"
    toggle={<Button>Top</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    placement="bottom-start"
    toggle={<Button>Bottom-Start</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    placement="bottom-end"
    toggle={<Button>Bottom-End</Button>}
  />
</Grid>

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!

<Grid gridColumns="repeat(3, min-content)">
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button>Default</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    maxHeight={150}
    toggle={<Button>Smaller</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    maxHeight={350}
    toggle={<Button>Longer</Button>}
  />
</Grid>

<Grid gridColumns="repeat(3, min-content)">
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    toggle={<Button>Default</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    maxHeight={150}
    toggle={<Button>Smaller</Button>}
  />
  <Dropdown
    items={[
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
      { content: 'Item', onItemClick: (item) => item },
    ]}
    maxHeight={350}
    toggle={<Button>Longer</Button>}
  />
</Grid>

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!

<Dropdown
  items={[
    {
      label: 'Label 1',
      items: [
        { content: 'Option 1', onItemClick: (item) => item },
        { content: 'Option 2', onItemClick: (item) => item },
        { content: 'Option 3', onItemClick: (item) => item },
      ],
    },
    {
      label: 'Label 2',
      items: [
        { content: 'Option 4', onItemClick: (item) => item },
        { content: 'Option 5', onItemClick: (item) => item },
        { content: 'Option 6', onItemClick: (item) => item },
      ],
    },
  ]}
  toggle={<Button>Button</Button>}
/>

<Dropdown
  items={[
    {
      label: 'Label 1',
      items: [
        { content: 'Option 1', onItemClick: (item) => item },
        { content: 'Option 2', onItemClick: (item) => item },
        { content: 'Option 3', onItemClick: (item) => item },
      ],
    },
    {
      label: 'Label 2',
      items: [
        { content: 'Option 4', onItemClick: (item) => item },
        { content: 'Option 5', onItemClick: (item) => item },
        { content: 'Option 6', onItemClick: (item) => item },
      ],
    },
  ]}
  toggle={<Button>Button</Button>}
/>

Item Description

It is possible to add a description for items.

Edit the code below to see your changes live!

<Dropdown
  items={[
    { hash: '1', content: 'Item #1', description: 'Description for option #1', onItemClick: (item) => item },
    {
      content: 'Item #2',
      description: 'Description for item #2',
      disabled: true,
      type: 'link',
      url: '#',
    },
    { hash: '3', content: 'Item #3', onItemClick: (item) => item },
    { hash: '4', content: 'Item #4', onItemClick: (item) => item },
    { hash: '5', content: 'Item #5', onItemClick: (item) => item },
  ]}
  toggle={<Button>Button</Button>}
/>

<Dropdown
  items={[
    { hash: '1', content: 'Item #1', description: 'Description for option #1', onItemClick: (item) => item },
    {
      content: 'Item #2',
      description: 'Description for item #2',
      disabled: true,
      type: 'link',
      url: '#',
    },
    { hash: '3', content: 'Item #3', onItemClick: (item) => item },
    { hash: '4', content: 'Item #4', onItemClick: (item) => item },
    { hash: '5', content: 'Item #5', onItemClick: (item) => item },
  ]}
  toggle={<Button>Button</Button>}
/>

Beta