Dropdown

Basic Dropdown

Renders a dropdown with content when a user clicks (or taps) on its children. Use a focusable element (like <Button>) to make sure it's accessible for keyboard users.

Not to be confused with <Select> or <Tooltip>

<Dropdown content={<div>Dropdown content</div>}>
  <Button>Click to show dropdown</Button>
</Dropdown>

Placement

The dropdown will be aligned to the left ('bottom-start') by default, but you can place it anywhere you like by using the placement prop supplied by floating-ui

For example, you can use bottom-end to align the dropdown to the bottom right.

<Dropdown placement='bottom-end'>

Dropdown.Item

You can create a dropdown menu inside the content by using links or <button> wrapped around <Dropdown.Item> with an optional icon.

For links we recommend placing a <Box.Arrow> (using <Inline>) on the right-hand side.

Optionally use <hr /> to separate sections.

<Dropdown
  content={
    <>
      <button type="button">
        <Dropdown.Item icon={faCat}>With icon</Dropdown.Item>
      </button>
      <a href="#path">
        <Dropdown.Item icon={faUserCircle}>
          <Inline align="center">
            <Inline.Stretch>Link with arrow</Inline.Stretch>
            <Box.Arrow />
          </Inline>
        </Dropdown.Item>
      </a>
    </>
  }
>

Dropdown.Item state

<Dropdown.Item> supports a state prop to indicate the importance of the action (new in 6.10):

• "default" ( or undefined): For neutral to positive actions
• "warning": Cautionary action
• "success": Positive action
• "alert": Destructive action
• "inactive": For actions that are currently unavailable, typically used with tooltips to explain why.

<button type="button">
  <Dropdown.Item state="warning" icon={faStar}>
    Mark as favorite
  </Dropdown.Item>
</button>
<Tooltip placement="left" content="History not available">
  <button type="button">
    <Dropdown.Item state="inactive" icon={faHistory}>
      View history
    </Dropdown.Item>
  </button>
</Tooltip>

Dropdown.Group

The <Dropdown.Group> component provides a styled button for nested dropdown menu hierarchy. It's meant to be used inside content of <Dropdown>.

• name prop for labelling the button (supports JSX)
• Optional icon prop, styled equivalent to <Dropdown.Item icon>
• children content will be placed inside a toggleable sub-dropdown

<Dropdown
  content={
    <Dropdown.Group name="Group">
      <Dropdown.Item ... />
    </Dropdown.Group>
  }
>

You can also nest them inside eachother, although we recommend keeping it to as few levels as possible for usability.

Controlled state

By passing a boolean to the visible prop you can control programmatically whether the dropdown is open. Keep your state in sync with an onHide handler.