React Dropdown - Flowbite

Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements

The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when clicking outside of the triggering element.

Default dropdown

<Dropdown
  label="Dropdown button"
>
  <Dropdown.Item>
    Dashboard
  </Dropdown.Item>
  <Dropdown.Item>
    Settings
  </Dropdown.Item>
  <Dropdown.Item>
    Earnings
  </Dropdown.Item>
  <Dropdown.Item>
    Sign out
  </Dropdown.Item>
</Dropdown>

Dropdown divider

<Dropdown label="Dropdown button">
  <Dropdown.Item>
    Dashboard
  </Dropdown.Item>
  <Dropdown.Item>
    Settings
  </Dropdown.Item>
  <Dropdown.Item>
    Earnings
  </Dropdown.Item>
  <Dropdown.Divider />
  <Dropdown.Item>
    Separated link
  </Dropdown.Item>
</Dropdown>

Dropdown header

<Dropdown label="Dropdown button">
  <Dropdown.Header>
    <span className="block text-sm">
      Bonnie Green
    </span>
    <span className="block truncate text-sm font-medium">
      bonnie@flowbite.com
    </span>
  </Dropdown.Header>
  <Dropdown.Item>
    Dashboard
  </Dropdown.Item>
  <Dropdown.Item>
    Settings
  </Dropdown.Item>
  <Dropdown.Item>
    Earnings
  </Dropdown.Item>
  <Dropdown.Divider />
  <Dropdown.Item>
    Sign out
  </Dropdown.Item>
</Dropdown>

Inline dropdown

<Dropdown
  inline
  label="Dropdown"
>
  <Dropdown.Item>
    Dashboard
  </Dropdown.Item>
  <Dropdown.Item>
    Settings
  </Dropdown.Item>
  <Dropdown.Item>
    Earnings
  </Dropdown.Item>
  <Dropdown.Item>
    Sign out
  </Dropdown.Item>
</Dropdown>

Dropdown items with icon

<Dropdown label="Dropdown">
  <Dropdown.Header>
    <span className="block text-sm">
      Bonnie Green
    </span>
    <span className="block truncate text-sm font-medium">
      bonnie@flowbite.com
    </span>
  </Dropdown.Header>
  <Dropdown.Item icon={HiViewGrid}>
    Dashboard
  </Dropdown.Item>
  <Dropdown.Item icon={HiCog}>
    Settings
  </Dropdown.Item>
  <Dropdown.Item icon={HiCurrencyDollar}>
    Earnings
  </Dropdown.Item>
  <Dropdown.Divider />
  <Dropdown.Item icon={HiLogout}>
    Sign out
  </Dropdown.Item>
</Dropdown>

Dropdown item on click handler

<Dropdown label="Dropdown">
  <Dropdown.Item onClick={onClick}>
    Dashboard
  </Dropdown.Item>
  <Dropdown.Item onClick={onClick}>
    Settings
  </Dropdown.Item>
  <Dropdown.Item onClick={onClick}>
    Earnings
  </Dropdown.Item>
  <Dropdown.Item onClick={onClick}>
    Sign out
  </Dropdown.Item>
</Dropdown>

Sizing

<div className="flex items-center gap-4">
  <Dropdown
    label="Small dropdown"
    size="sm"
  >
    <Dropdown.Item>
      Dashboard
    </Dropdown.Item>
    <Dropdown.Item>
      Settings
    </Dropdown.Item>
    <Dropdown.Item>
      Earnings
    </Dropdown.Item>
    <Dropdown.Item>
      Sign out
    </Dropdown.Item>
  </Dropdown>
  <Dropdown
    label="Large dropdown"
    size="lg"
  >
    <Dropdown.Item>
      Dashboard
    </Dropdown.Item>
    <Dropdown.Item>
      Settings
    </Dropdown.Item>
    <Dropdown.Item>
      Earnings
    </Dropdown.Item>
    <Dropdown.Item>
      Sign out
    </Dropdown.Item>
  </Dropdown>
</div>

Placement

<div className="flex flex-col gap-4">
  <div className="flex items-center gap-4">
    <Dropdown
      label="Dropdown top"
      placement="top"
    >
      <Dropdown.Item>
        Dashboard
      </Dropdown.Item>
      <Dropdown.Item>
        Settings
      </Dropdown.Item>
      <Dropdown.Item>
        Earnings
      </Dropdown.Item>
      <Dropdown.Item>
        Sign out
      </Dropdown.Item>
    </Dropdown>
    <Dropdown
      label="Dropdown right"
      placement="right"
    >
      <Dropdown.Item>
        Dashboard
      </Dropdown.Item>
      <Dropdown.Item>
        Settings
      </Dropdown.Item>
      <Dropdown.Item>
        Earnings
      </Dropdown.Item>
      <Dropdown.Item>
        Sign out
      </Dropdown.Item>
    </Dropdown>
    <Dropdown
      label="Dropdown bottom"
      placement="bottom"
    >
      <Dropdown.Item>
        Dashboard
      </Dropdown.Item>
      <Dropdown.Item>
        Settings
      </Dropdown.Item>
      <Dropdown.Item>
        Earnings
      </Dropdown.Item>
      <Dropdown.Item>
        Sign out
      </Dropdown.Item>
    </Dropdown>
    <Dropdown
      label="Dropdown left"
      placement="left"
    >
      <Dropdown.Item>
        Dashboard
      </Dropdown.Item>
      <Dropdown.Item>
        Settings
      </Dropdown.Item>
      <Dropdown.Item>
        Earnings
      </Dropdown.Item>
      <Dropdown.Item>
        Sign out
      </Dropdown.Item>
    </Dropdown>
  </div>
  <div className="flex items-center gap-4">
    <Dropdown
      label="Dropdown left start"
      placement="left-start"
    >
      <Dropdown.Item>
        Dashboard
      </Dropdown.Item>
      <Dropdown.Item>
        Settings
      </Dropdown.Item>
      <Dropdown.Item>
        Earnings
      </Dropdown.Item>
      <Dropdown.Item>
        Sign out
      </Dropdown.Item>
    </Dropdown>
    <Dropdown
      label="Dropdown right start"
      placement="right-start"
    >
      <Dropdown.Item>
        Dashboard
      </Dropdown.Item>
      <Dropdown.Item>
        Settings
      </Dropdown.Item>
      <Dropdown.Item>
        Earnings
      </Dropdown.Item>
      <Dropdown.Item>
        Sign out
      </Dropdown.Item>
    </Dropdown>
  </div>
</div>