Ui Dropdown

Dropdown

Home
Dropdown

Dropdown Header

import {
  Dropdown,
  DropdownDivider,
  DropdownHeader,
  DropdownItem,
} from 'flowbite-react'

const DropDownHeaderCode = () => {
  return (
    <>
      <div className='flex flex-wrap items-center gap-4'>
        <Dropdown
          label='Dropdown Button'
          dismissOnClick={false}
          className='flex-wrap'
          color='primary'>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>

        <Dropdown label='Dropdown Button' color='secondary'>
          <DropdownHeader>
            <span className='block text-sm'>Bonnie Green</span>
            <span className='block truncate text-sm font-medium'>
              bonnie@flowbite.com
            </span>
          </DropdownHeader>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownDivider />
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>
      </div>
    </>
  )
}

export default DropDownHeaderCode

Dropdown items with icon

Inline dropdown

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

const DropDownIconCode = () => {
  return (
    <div>
      <div className='flex flex-wrap items-center gap-4'>
        <Dropdown label='Dropdown' color='info'>
          <DropdownHeader>
            <span className='block text-sm'>Bonnie Green</span>
            <span className='block truncate text-sm font-medium'>
              bonnie@flowbite.com
            </span>
          </DropdownHeader>
          <DropdownItem icon={HiViewGrid}>Dashboard</DropdownItem>
          <DropdownItem icon={HiCog}>Settings</DropdownItem>
          <DropdownItem icon={HiCurrencyDollar}>Earnings</DropdownItem>
          <DropdownDivider />
          <DropdownItem icon={HiLogout}>Sign out</DropdownItem>
        </Dropdown>
        <div>
          <h4 className='text-lg font-semibold'>Inline dropdown</h4>
          <Dropdown label='Dropdown' inline>
            <DropdownItem>Dashboard</DropdownItem>
            <DropdownItem>Settings</DropdownItem>
            <DropdownItem>Earnings</DropdownItem>
            <DropdownItem>Sign out</DropdownItem>
          </Dropdown>
        </div>
      </div>
    </div>
  )
}

export default DropDownIconCode

Dropdown sizes

import { Dropdown, DropdownItem } from 'flowbite-react'

const DropdownSizesCode = () => {
  return (
    <div>
      <div className='flex flex-wrap items-center gap-4'>
        <Dropdown label='Small dropdown' size='sm' color='success'>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>
        <Dropdown label='Large dropdown' size='lg' color='error'>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>
      </div>
    </div>
  )
}

export default DropdownSizesCode

Placement Options

import { Dropdown, DropdownItem } from 'flowbite-react'

const DropdownPlacementCode = () => {
  return (
    <div>
      <div className='flex flex-wrap gap-4'>
        <Dropdown label='Dropdown top' placement='top' color='primary'>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>
        <Dropdown label='Dropdown right' placement='right' color='secondary'>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>
        <Dropdown label='Dropdown bottom' placement='bottom' color='info'>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>
        <Dropdown label='Dropdown left' placement='left' color='success'>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>
        <Dropdown
          label='Dropdown left start'
          placement='left-start'
          color='error'>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>
        <Dropdown
          label='Dropdown right start'
          placement='right-start'
          color='dark'>
          <DropdownItem>Dashboard</DropdownItem>
          <DropdownItem>Settings</DropdownItem>
          <DropdownItem>Earnings</DropdownItem>
          <DropdownItem>Sign out</DropdownItem>
        </Dropdown>
      </div>
    </div>
  )
}

export default DropdownPlacementCode

API ( Dropdown )

Prop	Description	Type	Default
label	Sets the text label for the dropdown trigger.	string	-
size	Controls the size of the dropdown.	"sm" \| "md" \| "lg"	"md"
placement	Sets the placement of the dropdown relative to the trigger.	"top" \| "right" \| "bottom" \| "left"	"bottom"
inline	Makes the dropdown appear inline with the trigger element.	boolean	false

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

HOME

APPS

UI ELEMENTS

FORM ELEMENTS

PAGES

WIDGETS

TABLES

CHARTS

ICONS

AUTH

Dropdown

Dropdown Header

Sample Code

Dropdown items with icon

Inline dropdown

Sample Code

Dropdown sizes

Sample Code

Placement Options

Sample Code

API ( Dropdown )