Dropdown

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

Edit the code below to see your changes live!

<Dropdown
  maxHeight={250}
  onItemClick={value => value}
  placement="bottom-start"
  trigger={<Button>Open Menu</Button>}
>
  <Dropdown.Item value={1}>Option</Dropdown.Item>
  <Dropdown.Item value={2}>Option</Dropdown.Item>
  <Dropdown.Item value={3}>Option</Dropdown.Item>
  <Dropdown.Item value={4}>Option</Dropdown.Item>
  <Dropdown.Item value={5}>Option</Dropdown.Item>
  <Dropdown.Item value={6}>Option</Dropdown.Item>
  <Dropdown.Item value={7}>Option</Dropdown.Item>
  <Dropdown.Item value={8} disabled>
    Option
  </Dropdown.Item>
</Dropdown>

<Dropdown
  maxHeight={250}
  onItemClick={value => value}
  placement="bottom-start"
  trigger={<Button>Open Menu</Button>}
>
  <Dropdown.Item value={1}>Option</Dropdown.Item>
  <Dropdown.Item value={2}>Option</Dropdown.Item>
  <Dropdown.Item value={3}>Option</Dropdown.Item>
  <Dropdown.Item value={4}>Option</Dropdown.Item>
  <Dropdown.Item value={5}>Option</Dropdown.Item>
  <Dropdown.Item value={6}>Option</Dropdown.Item>
  <Dropdown.Item value={7}>Option</Dropdown.Item>
  <Dropdown.Item value={8} disabled>
    Option
  </Dropdown.Item>
</Dropdown>

API

Dropdown

Prop Name	Type	Default	Description
`maxHeight`	`number`	`250`	Sets the max-height of the dropdown.
`onItemClick`	`(value) => void`		Callback called with value of clicked item.
`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 position of the Dropdown relative to the anchor.
`trigger` *	`ReactElement`		Element used as anchor.
Props ending with * are required

Dropdown.Item

Prop Name	Type	Default	Description
`value`	`string` \| `string[]` \| `number`		Value 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!

<Grid gridColumns="repeat(4, min-content)">
  <Dropdown trigger={<Button>Button</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown trigger={<Button actionType="destructive">Button</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown trigger={<Button variant="secondary">Button</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown trigger={<Button variant="subtle">Button</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
</Grid>

<Grid gridColumns="repeat(4, min-content)">
  <Dropdown trigger={<Button>Button</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown trigger={<Button actionType="destructive">Button</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown trigger={<Button variant="secondary">Button</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown trigger={<Button variant="subtle">Button</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
</Grid>

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!

<Grid gridColumns="repeat(4, min-content)">
  <Dropdown placement="right" trigger={<Button>Right</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown placement="top" trigger={<Button>Top</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown placement="bottom-start" trigger={<Button>Bottom-Start</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown placement="bottom-end" trigger={<Button>Bottom-End</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
</Grid>

<Grid gridColumns="repeat(4, min-content)">
  <Dropdown placement="right" trigger={<Button>Right</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown placement="top" trigger={<Button>Top</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown placement="bottom-start" trigger={<Button>Bottom-Start</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown placement="bottom-end" trigger={<Button>Bottom-End</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
</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 trigger={<Button>Default</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
    <Dropdown.Item value={3}>Option</Dropdown.Item>
    <Dropdown.Item value={4}>Option</Dropdown.Item>
    <Dropdown.Item value={5}>Option</Dropdown.Item>
    <Dropdown.Item value={6}>Option</Dropdown.Item>
    <Dropdown.Item value={7}>Option</Dropdown.Item>
    <Dropdown.Item value={8}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown maxHeight={150} trigger={<Button>Smaller</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
    <Dropdown.Item value={3}>Option</Dropdown.Item>
    <Dropdown.Item value={4}>Option</Dropdown.Item>
    <Dropdown.Item value={5}>Option</Dropdown.Item>
    <Dropdown.Item value={6}>Option</Dropdown.Item>
    <Dropdown.Item value={7}>Option</Dropdown.Item>
    <Dropdown.Item value={8}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown maxHeight={350} trigger={<Button>Longer</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
    <Dropdown.Item value={3}>Option</Dropdown.Item>
    <Dropdown.Item value={4}>Option</Dropdown.Item>
    <Dropdown.Item value={5}>Option</Dropdown.Item>
    <Dropdown.Item value={6}>Option</Dropdown.Item>
    <Dropdown.Item value={7}>Option</Dropdown.Item>
    <Dropdown.Item value={8}>Option</Dropdown.Item>
  </Dropdown>
</Grid>

<Grid gridColumns="repeat(3, min-content)">
  <Dropdown trigger={<Button>Default</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
    <Dropdown.Item value={3}>Option</Dropdown.Item>
    <Dropdown.Item value={4}>Option</Dropdown.Item>
    <Dropdown.Item value={5}>Option</Dropdown.Item>
    <Dropdown.Item value={6}>Option</Dropdown.Item>
    <Dropdown.Item value={7}>Option</Dropdown.Item>
    <Dropdown.Item value={8}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown maxHeight={150} trigger={<Button>Smaller</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
    <Dropdown.Item value={3}>Option</Dropdown.Item>
    <Dropdown.Item value={4}>Option</Dropdown.Item>
    <Dropdown.Item value={5}>Option</Dropdown.Item>
    <Dropdown.Item value={6}>Option</Dropdown.Item>
    <Dropdown.Item value={7}>Option</Dropdown.Item>
    <Dropdown.Item value={8}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown maxHeight={350} trigger={<Button>Longer</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
    <Dropdown.Item value={3}>Option</Dropdown.Item>
    <Dropdown.Item value={4}>Option</Dropdown.Item>
    <Dropdown.Item value={5}>Option</Dropdown.Item>
    <Dropdown.Item value={6}>Option</Dropdown.Item>
    <Dropdown.Item value={7}>Option</Dropdown.Item>
    <Dropdown.Item value={8}>Option</Dropdown.Item>
  </Dropdown>
</Grid>

Dropdown.Item

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

Edit the code below to see your changes live!

<Grid gridColumns="repeat(2, min-content)">
  <Dropdown trigger={<Button>With Values</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown trigger={<Button>With Links</Button>}>
    <Dropdown.Item>
      <Link>Link</Link>
    </Dropdown.Item>
    <Dropdown.Item>
      <Link>Link</Link>
    </Dropdown.Item>
  </Dropdown>
</Grid>

<Grid gridColumns="repeat(2, min-content)">
  <Dropdown trigger={<Button>With Values</Button>}>
    <Dropdown.Item value={1}>Option</Dropdown.Item>
    <Dropdown.Item value={2}>Option</Dropdown.Item>
  </Dropdown>
  <Dropdown trigger={<Button>With Links</Button>}>
    <Dropdown.Item>
      <Link>Link</Link>
    </Dropdown.Item>
    <Dropdown.Item>
      <Link>Link</Link>
    </Dropdown.Item>
  </Dropdown>
</Grid>

Beta

Introduction

Foundations

Layout

Actions & Inputs

Status & Feedback

Utilities

Dropdown

API

Dropdown

Dropdown.Item

Examples

Trigger

Position

Max Height

Dropdown.Item