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

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

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

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

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"
      >
        <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>
  )
}

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
      renderTrigger={()=>jsx_runtime_.jsx(_components.span, {children: "My custom trigger"})}
    >
      <Dropdown.Item>
        Dashboard
      </Dropdown.Item>
      <Dropdown.Item>
        Settings
      </Dropdown.Item>
      <Dropdown.Item>
        Earnings
      </Dropdown.Item>
      <Dropdown.Item>
        Sign out
      </Dropdown.Item>
    </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 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#