Component Library
Browse and explore components
Dropdown
A Dropdown is a UI component that displays a list of options or actions triggered by user interaction.
Dropdown Header
Component Code
Copy Code
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
Component Code
Copy Code
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
Component Code
Copy Code
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
Component Code
Copy Code
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 |