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

Table of Contents#

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
      dismissOnClick={false}
      label="Dropdown button"
    >
      <DropdownItem>
        Dashboard
      </DropdownItem>
      <DropdownItem>
        Settings
      </DropdownItem>
      <DropdownItem>
        Earnings
      </DropdownItem>
      <DropdownItem>
        Sign out
      </DropdownItem>
    </Dropdown>
  )
}

Dropdown divider#

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">
      <DropdownItem>
        Dashboard
      </DropdownItem>
      <DropdownItem>
        Settings
      </DropdownItem>
      <DropdownItem>
        Earnings
      </DropdownItem>
      <Dropdown.Divider />
      <DropdownItem>
        Separated link
      </DropdownItem>
    </Dropdown>
  )
}

Dropdown header#

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>
      <DropdownItem>
        Dashboard
      </DropdownItem>
      <DropdownItem>
        Settings
      </DropdownItem>
      <DropdownItem>
        Earnings
      </DropdownItem>
      <Dropdown.Divider />
      <DropdownItem>
        Sign out
      </DropdownItem>
    </Dropdown>
  )
}

Dropdown items with icon#

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>
      <DropdownItem icon={HiViewGrid}>
        Dashboard
      </DropdownItem>
      <DropdownItem icon={HiCog}>
        Settings
      </DropdownItem>
      <DropdownItem icon={HiCurrencyDollar}>
        Earnings
      </DropdownItem>
      <Dropdown.Divider />
      <DropdownItem icon={HiLogout}>
        Sign out
      </DropdownItem>
    </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"
    >
      <DropdownItem>
        Dashboard
      </DropdownItem>
      <DropdownItem>
        Settings
      </DropdownItem>
      <DropdownItem>
        Earnings
      </DropdownItem>
      <DropdownItem>
        Sign out
      </DropdownItem>
    </Dropdown>
  )
}

Dropdown sizes#

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"
      >
        <DropdownItem>
          Dashboard
        </DropdownItem>
        <DropdownItem>
          Settings
        </DropdownItem>
        <DropdownItem>
          Earnings
        </DropdownItem>
        <DropdownItem>
          Sign out
        </DropdownItem>
      </Dropdown>
      <Dropdown
        label="Large dropdown"
        size="lg"
      >
        <DropdownItem>
          Dashboard
        </DropdownItem>
        <DropdownItem>
          Settings
        </DropdownItem>
        <DropdownItem>
          Earnings
        </DropdownItem>
        <DropdownItem>
          Sign out
        </DropdownItem>
      </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"
        >
          <DropdownItem>
            Dashboard
          </DropdownItem>
          <DropdownItem>
            Settings
          </DropdownItem>
          <DropdownItem>
            Earnings
          </DropdownItem>
          <DropdownItem>
            Sign out
          </DropdownItem>
        </Dropdown>
        <Dropdown
          label="Dropdown right"
          placement="right"
        >
          <DropdownItem>
            Dashboard
          </DropdownItem>
          <DropdownItem>
            Settings
          </DropdownItem>
          <DropdownItem>
            Earnings
          </DropdownItem>
          <DropdownItem>
            Sign out
          </DropdownItem>
        </Dropdown>
        <Dropdown
          label="Dropdown bottom"
          placement="bottom"
        >
          <DropdownItem>
            Dashboard
          </DropdownItem>
          <DropdownItem>
            Settings
          </DropdownItem>
          <DropdownItem>
            Earnings
          </DropdownItem>
          <DropdownItem>
            Sign out
          </DropdownItem>
        </Dropdown>
        <Dropdown
          label="Dropdown left"
          placement="left"
        >
          <DropdownItem>
            Dashboard
          </DropdownItem>
          <DropdownItem>
            Settings
          </DropdownItem>
          <DropdownItem>
            Earnings
          </DropdownItem>
          <DropdownItem>
            Sign out
          </DropdownItem>
        </Dropdown>
      </div>
      <div className="flex items-center gap-4">
        <Dropdown
          label="Dropdown left start"
          placement="left-start"
        >
          <DropdownItem>
            Dashboard
          </DropdownItem>
          <DropdownItem>
            Settings
          </DropdownItem>
          <DropdownItem>
            Earnings
          </DropdownItem>
          <DropdownItem>
            Sign out
          </DropdownItem>
        </Dropdown>
        <Dropdown
          label="Dropdown right start"
          placement="right-start"
        >
          <DropdownItem>
            Dashboard
          </DropdownItem>
          <DropdownItem>
            Settings
          </DropdownItem>
          <DropdownItem>
            Earnings
          </DropdownItem>
          <DropdownItem>
            Sign out
          </DropdownItem>
        </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">
      <DropdownItem onClick={()=>alert("Dashboard!")}>
        Dashboard
      </DropdownItem>
      <DropdownItem onClick={()=>alert("Settings!")}>
        Settings
      </DropdownItem>
      <DropdownItem onClick={()=>alert("Earnings!")}>
        Earnings
      </DropdownItem>
      <DropdownItem onClick={()=>alert("Sign out!")}>
        Sign out
      </DropdownItem>
    </Dropdown>
  )
}

Custom trigger#

To customize the trigger element you can use renderTrigger property.

Edit on GitHub
  • React TypeScript
'use client';

import { Dropdown } from 'flowbite-react';

export default function CustomTriggerDropdown() {
  return (
    <Dropdown
      dismissOnClick={false}
      renderTrigger={()=>jsx_runtime_.jsx(_components.span, {children: "My custom trigger"})}
    >
      <DropdownItem>
        Dashboard
      </DropdownItem>
      <DropdownItem>
        Settings
      </DropdownItem>
      <DropdownItem>
        Earnings
      </DropdownItem>
      <DropdownItem>
        Sign out
      </DropdownItem>
    </Dropdown>
  )
}

Custom item#

To customize the Dropdown.Item base element you can use the as property.

Edit on GitHub
  • React TypeScript
'use client';

import { Dropdown } from 'flowbite-react';
import Link from 'next/link';

export default function CustomDropdownItem() {
  return (
    <Dropdown label="My custom item">
      <Dropdown.Item as={Link} href="/">
        Home
      </Dropdown.Item>
      <Dropdown.Item as="a" href="https://flowbite.com/" target="_blank">
        External link
      </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 focus:outline-none",
  "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 focus:outline-none",
    "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": {
      "container": "",
      "base": "flex items-center justify-start py-2 px-4 text-sm text-gray-700 cursor-pointer w-full hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none dark:hover:text-white dark:focus:bg-gray-600 dark:focus: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#