React Dropdown - Flowbite

Use the dropdown component to trigger a list of menu items when clicking on an element such as a button or link based on multiple styles, sizes, and placements with React

The dropdown component is a UI component built with React that allows you to show a list of items when clicking on a trigger element (ie. a button) that you can use to build dropdown menus, lists, and more.

The default styles are built with the utility classes from Tailwind CSS and you can use the custom props from React to customize the behaviour and positioning of the dropdowns.

To start using the component make sure that you have imported it from Flowbite React:

'use client';

import { Dropdown } from 'flowbite';

Default dropdown

Use this example to create a simple dropdown with a list of menu items by adding child <Dropdown.Item> components inside of the main <Dropdown> component.

<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>

Use the <Dropdown.Divider> component to add a divider between the dropdown items.

<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>

Use the <Dropdown.Header> component to add a header to the dropdown. You can use this to add a user profile image and name, for example.

<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>

Add custom icons next to the menu items by using the icon prop on the <Dropdown.Item> component.

<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>

Inline dropdown

Use the inline prop to make the dropdown appear inline with the trigger element.

<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>

You can use the size prop to change the size of the dropdown. The default size is md.

<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 options

Use the placement prop to change the placement of the dropdown by choosing one of the following options: top, right, bottom or left. If there is not enough space then the dropdown will be automatically repositioned.

<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>

Click event handler

Add a custom onClick event handler to the <Dropdown.Item> component to handle the click event.

<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>

References