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-react';

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.

Edit on GitHub
  • React TypeScript
'use client';

import { Dropdown } from 'flowbite-react';

export default function DefaultDropdown() {
  return (
    <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.

Edit on GitHub
  • React TypeScript
'use client';

import { Dropdown } from 'flowbite-react';

export default function DropdownDivider() {
  return (
    <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.

Edit on GitHub
  • React TypeScript
'use client';

import { Dropdown } from 'flowbite-react';

export default function DropdownHeader() {
  return (
    <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.

Edit on GitHub
  • React TypeScript
'use client';

import { Dropdown } from 'flowbite-react';
import { HiCog, HiCurrencyDollar, HiLogout, HiViewGrid } from 'react-icons/hi';

export default function DropdownItemsWithIcon() {
  return (
    <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.

Edit on GitHub
  • React TypeScript
'use client';

import { Dropdown } from 'flowbite-react';

export default function InlineDropdown() {
  return (
    <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.

Edit on GitHub
  • React TypeScript
'use client';

import { div } from 'flowbite-react';

export default function Sizing() {
  return (
    <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.

Edit on GitHub
  • React TypeScript
'use client';

import { div } from 'flowbite-react';

export default function Placement() {
  return (
    <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.

Edit on GitHub
  • React TypeScript
'use client';

import { Dropdown } from 'flowbite-react';

export default function DropdownItemOnClickHandler() {
  return (
    <Dropdown label="Dropdown">
      <Dropdown.Item onClick={()=>alert("Dashboard!")}>
        Dashboard
      </Dropdown.Item>
      <Dropdown.Item onClick={()=>alert("Settings!")}>
        Settings
      </Dropdown.Item>
      <Dropdown.Item onClick={()=>alert("Earnings!")}>
        Earnings
      </Dropdown.Item>
      <Dropdown.Item onClick={()=>alert("Sign out!")}>
        Sign out
      </Dropdown.Item>
    </Dropdown>
  )
}

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "arrowIcon": "ml-2 h-4 w-4",
  "content": "py-1",
  "floating": {
    "animation": "transition-opacity",
    "arrow": {
      "base": "absolute z-10 h-2 w-2 rotate-45",
      "style": {
        "dark": "bg-gray-900 dark:bg-gray-700",
        "light": "bg-white",
        "auto": "bg-white dark:bg-gray-700"
      },
      "placement": "-4px"
    },
    "base": "z-10 w-fit rounded divide-y divide-gray-100 shadow",
    "content": "py-1 text-sm text-gray-700 dark:text-gray-200",
    "divider": "my-1 h-px bg-gray-100 dark:bg-gray-600",
    "header": "block py-2 px-4 text-sm text-gray-700 dark:text-gray-200",
    "hidden": "invisible opacity-0",
    "item": {
      "base": "flex items-center justify-start py-2 px-4 text-sm text-gray-700 cursor-pointer hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white",
      "icon": "mr-2 h-4 w-4"
    },
    "style": {
      "dark": "bg-gray-900 text-white dark:bg-gray-700",
      "light": "border border-gray-200 bg-white text-gray-900",
      "auto": "border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white"
    },
    "target": "w-fit"
  },
  "inlineWrapper": "flex items-center"
}

References