Dropdown

Examples

Dashboard
Settings
Earnings
Sign out

<script>
  import { Dropdown, DropdownItem} from 'flowbite-svelte'
</script>

<Dropdown label="Dropdown button" class="w-44">
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

Dropdown divider

Dashboard
Settings
Earnings

Separated link

<Dropdown label="Dropdown button" class="w-44">
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Separated link</DropdownItem>
</Dropdown>

Dropdown header

Bonnie Green name@flowbite.com

Dashboard
Settings
Earnings

Sign out

<Dropdown label="Dropdown button" class="w-44">
  <DropdownHeader>
    <span class="block text-sm"> Bonnie Green </span>
    <span class="block truncate text-sm font-medium"> name@flowbite.com </span>
  </DropdownHeader>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

Multi-level dropdown

Use this example to enable multi-level dropdown menus by adding stacked elements inside of each other.

Dashboard
- Overview
- My downloads
- Billing
Earnings

Sign out

<Dropdown label="Dropdown button" class="w-44">
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>
    <Dropdown label="Dropdown" inline={true} placement="right-start" class="ml-16 w-44">
    <DropdownItem>Overview</DropdownItem>
    <DropdownItem>My downloads</DropdownItem>
    <DropdownItem>Billing</DropdownItem>
    </Dropdown>
  </DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

Dropdown with checkbox

Add multiple checkbox elements inside your dropdown menu to enable more advanced input interaction.

Default checkbox
Checked state
Default checkbox

<Dropdown label="Dropdown checkbox" class="w-44">
  <DropdownItem>
    <Checkbox tinted>Default checkbox</Checkbox>
  </DropdownItem>
  <DropdownItem>
    <Checkbox tinted checked>Checked state</Checkbox>
  </DropdownItem>
  <DropdownItem>
    <Checkbox tinted>Default checkbox</Checkbox>
  </DropdownItem>
</Dropdown>

Checkbox: Background hover

Use this example to update the background color of a menu item when using a list of checkbox elements.

Default checkbox
Checked state
Default checkbox

<Dropdown label="Dropdown checkbox" class="w-48">
  <ul slot="content" class="p-3 space-y-1">
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Checkbox tinted>Default checkbox</Checkbox>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Checkbox tinted checked>Checked state</Checkbox>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Checkbox tinted>Default checkbox</Checkbox>
    </DropdownItem>
  </ul>
</Dropdown>

Checkbox: Helper text

Add an extra helper text to each checkbox element inside the dropdown menu list with this example.

Enable notifications
Some helpful instruction goes over here.
Enable 2FA auth
Some helpful instruction goes over here.
Subscribe newsletter
Some helpful instruction goes over here.

<Dropdown label="Dropdown checkbox" class="w-60" >
  <ul slot="content" class="p-3 space-y-1">
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Checkbox tinted>Enable notifications</Checkbox>
      <Helper class="pl-6 -mt-1">Some helpful instruction goes over here.</Helper>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Checkbox tinted checked>Enable 2FA auth</Checkbox>
      <Helper class="pl-6 -mt-1">Some helpful instruction goes over here.</Helper>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Checkbox tinted>Subscribe newsletter</Checkbox>
      <Helper class="pl-6 -mt-1">Some helpful instruction goes over here.</Helper>
    </DropdownItem>
  </ul>
</Dropdown>

Dropdown with radio

Add multiple radio elements inside your dropdown menu to enable more advanced input interaction.

Default radio
Checked state
Default radio

<script>
  let group1 = 2;
</script>

<Dropdown label="Dropdown radio" class="w-44">
    <DropdownItem>
      <Radio bind:group={group1} value={1} tinted>Default radio</Radio>
    </DropdownItem>
    <DropdownItem>
      <Radio bind:group={group1} value={2} tinted>Checked state</Radio>
    </DropdownItem>
    <DropdownItem>
      <Radio bind:group={group1} value={3} tinted>Default radio</Radio>
    </DropdownItem>
</Dropdown>

Radio: Background hover

Use this example to update the background color of a menu item when using a list of radio elements.

Default radio
Checked state
Default radio

<script>
  let group2 = 2;
</script>

<Dropdown label="Dropdown radio" class="w-48">
  <ul slot="content" class="p-3 space-y-1">
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Radio bind:group={group2} value={1} tinted>Default radio</Radio>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Radio bind:group={group2} value={2} tinted>Checked state</Radio>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Radio bind:group={group2} value={3} tinted>Default radio</Radio>
    </DropdownItem>
  </ul>
</Dropdown>

Radio: Helper text

Add an extra helper text to each radio element inside the dropdown menu list with this example.

Enable notifications
Some helpful instruction goes over here.
Enable 2FA auth
Some helpful instruction goes over here.
Subscribe newsletter
Some helpful instruction goes over here.

<Dropdown label="Dropdown radio" class="w-60" >
  <ul slot="content" class="p-3 space-y-1">
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Radio bind:group={group3} value={1} tinted>Enable notifications</Radio>
      <Helper class="pl-6 -mt-1">Some helpful instruction goes over here.</Helper>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Radio bind:group={group3} value={2} tinted>Enable 2FA auth</Radio>
      <Helper class="pl-6 -mt-1">Some helpful instruction goes over here.</Helper>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Radio bind:group={group3} value={3} tinted>Subscribe newsletter</Radio>
      <Helper class="pl-6 -mt-1">Some helpful instruction goes over here.</Helper>
    </DropdownItem>
  </ul>
</Dropdown>

Dropdown with toggle switch

Show a list of toggle switch elements inside the dropdown menu to enable a yes or no type of choice.

Default radio
Checked state
Default radio

<Dropdown label="Dropdown radio" class="w-56">
<ul slot="content" class="p-3 space-y-1">
  <DropdownItem class="rounded">
    <Toggle checked>Default radio</Toggle>
  </DropdownItem>
  <DropdownItem class="rounded">
    <Toggle checked>Checked state</Toggle>
  </DropdownItem>
  <DropdownItem class="rounded">
    <Toggle checked>Default radio</Toggle>
  </DropdownItem>
</ul>
</Dropdown>

Dropdown navbar

You can also use the dropdown element inside a navigation bar and add a second level of navigation hierarchy, but make sure to use Navbar components.

<Navbar let:hidden let:toggle>
  <NavBrand href="/">
    <img
      src="https://flowbite.com/docs/images/logo.svg"
      class="mr-3 h-6 sm:h-9"
      alt="Flowbite Logo"
    />
    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
      Flowbite
    </span>
  </NavBrand>
  <NavHamburger on:click={toggle} />
  <NavUl {hidden}>
    <NavLi href="/" active={true}>Home</NavLi>
    <Dropdown label="Dropdown" placement="bottom-start" inline={true}>
      <DropdownItem>Dashboard</DropdownItem>
      <DropdownItem>Settings</DropdownItem>
      <DropdownItem>Earnings</DropdownItem>
      <DropdownDivider />
      <DropdownItem>Sign out</DropdownItem>
    </Dropdown>
    <NavLi href="/services">Services</NavLi>
    <NavLi href="/pricing">Pricing</NavLi>
    <NavLi href="/contact">Contact</NavLi>
  </NavUl>
</Navbar>

Dropdown with scrolling

This example can be used when you want to show a long list of items that won’t affect the height of the dropdown menu by enabling a scrolling behaviour.

Jese Leos
Robert Gouth
Bonnie Green
Robert Wall
Joseph Mcfall
Leslie Livingston

Add new user

<Dropdown label="Project users" class="w-48">
  <svelte:fragment slot="content">
      <ul class="overflow-y-auto py-1 h-48 text-gray-700 dark:text-gray-200">
        <DropdownItem class="flex items-center text-base font-semibold gap-2">
          <Avatar src="/images/profile-picture-1.webp" size="xs"/>Jese Leos
        </DropdownItem>
        <DropdownItem class="flex items-center text-base font-semibold gap-2">
          <Avatar src="/images/profile-picture-2.webp" size="xs"/>Robert Gouth
        </DropdownItem>
        <DropdownItem class="flex items-center text-base font-semibold gap-2">
          <Avatar src="/images/profile-picture-3.webp" size="xs"/>Bonnie Green
        </DropdownItem>
        <DropdownItem class="flex items-center text-base font-semibold gap-2">
          <Avatar src="/images/profile-picture-1.webp" size="xs"/>Robert Wall
        </DropdownItem>
        <DropdownItem class="flex items-center text-base font-semibold gap-2">
          <Avatar src="/images/profile-picture-2.webp" size="xs"/>Joseph Mcfall
        </DropdownItem>
        <DropdownItem class="flex items-center text-base font-semibold gap-2">
          <Avatar src="/images/profile-picture-3.webp" size="xs"/>Leslie Livingston
        </DropdownItem>
      </ul>
    <a href="/" class="flex items-center p-3 text-sm font-medium text-blue-600 bg-gray-50 border-t border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-blue-500 hover:underline">
        <UserAdd class="h-5 w-5 mr-1"/>Add new user
    </a>
  </svelte:fragment>
</Dropdown>

Dropdown with search

Use this example if you want to add a search bar inside the dropdown menu to be able to filter through a long list of menu items with scrolling behaviour.

<Dropdown label="Project users" class="w-60">
  <svelte:fragment slot="content">
    <div class="p-3">
      <SimpleSearch btnClass="hidden" tinted/>
    </div>
    <ul class="overflow-y-auto px-3 pb-3 space-y-1 h-48">
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox tinted>Jese Leos</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox tinted>Robert Gouth</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox tinted checked>Bonnie Green</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox tinted>Jese Leos</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox tinted>Robert Gouth</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox tinted>Bonnie Green</Checkbox>
      </DropdownItem>
    </ul>
    <a href="/" class="flex items-center p-3 text-sm font-medium text-red-600 bg-gray-50 border-t border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500 hover:underline">
        <UserRemove class="w-5 h-5 mr-1" />Delete user
    </a>
  </svelte:fragment>
</Dropdown>

Menu icon

Use the menu icon trigger element on components such as cards as an alternative element to the button.

Dashboard
Settings
Earnings

Sign out

Dashboard
Settings
Earnings

Sign out

<Dropdown class="w-44">
  <CloseButton slot="trigger" class="text-gray-900 bg-white dark:text-white dark:bg-gray-800">
    <DotsHorizontal class="w-5 h-5"/>
  </CloseButton>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>
<Dropdown class="w-44">
  <CloseButton slot="trigger" class="text-gray-900 bg-white dark:text-white dark:bg-gray-800">
    <DotsVertical class="w-5 h-5"/>
  </CloseButton>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

Notification bell

Use this example to show a list of notifications inside your application by providing more detailed information such as the user avatar, content and time of notification triggered by a notification bell icon.

Notifications

New message from Jese Leos: "Hey, what's up? All set for the presentation?"

a few moments ago
Joseph Mcfall and 5 others started following you.

10 minutes ago
Bonnie Green and 141 others love your story. See it and view more stories.

44 minutes ago

<Dropdown class="w-full max-w-sm">
  <div slot="trigger" class="inline-flex items-center text-sm font-medium text-center text-gray-500 hover:text-gray-900 focus:outline-none dark:hover:text-white dark:text-gray-400">
    <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
    <div class="flex relative">
      <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white dark:border-gray-900"></div>
    </div>
  </div>
  <ul slot="content" class="rounded divide-y divide-gray-100 shadow dark:bg-gray-800 dark:divide-gray-700">
    <DropdownHeader class="font-bold text-center"  divider={false}>Notifications</DropdownHeader>
    <DropdownItem class="flex space-x-4 ">
        <Avatar src="/images/profile-picture-1.webp" dot={{color:'bg-gray-300'}} rounded />
        <div class="pl-3 w-full">
            <div class="text-gray-500 text-sm mb-1.5 dark:text-gray-400">New message from <span class="font-semibold text-gray-900 dark:text-white">Jese Leos</span>: "Hey, what's up? All set for the presentation?"</div>
            <div class="text-xs text-blue-600 dark:text-blue-500">a few moments ago</div>
        </div>
    </DropdownItem>
    <DropdownItem class="flex space-x-4">
        <Avatar src="/images/profile-picture-2.webp" dot={{color:'bg-red-400'}} rounded />
        <div class="pl-3 w-full">
            <div class="text-gray-500 text-sm mb-1.5 dark:text-gray-400"><span class="font-semibold text-gray-900 dark:text-white">Joseph Mcfall</span> and <span class="font-medium text-gray-900 dark:text-white">5 others</span> started following you.</div>
            <div class="text-xs text-blue-600 dark:text-blue-500">10 minutes ago</div>
        </div>
    </DropdownItem>
    <DropdownItem class="flex space-x-4">
        <Avatar src="/images/profile-picture-3.webp" dot={{color:'bg-green-400'}} rounded />
        <div class="pl-3 w-full">
            <div class="text-gray-500 text-sm mb-1.5 dark:text-gray-400"><span class="font-semibold text-gray-900 dark:text-white">Bonnie Green</span> and <span class="font-medium text-gray-900 dark:text-white">141 others</span> love your story. See it and view more stories.</div>
            <div class="text-xs text-blue-600 dark:text-blue-500">44 minutes ago</div>
        </div>
    </DropdownItem>
  </ul>
</Dropdown>

User avatar

This example can be used to show a list of menu items and options when a user is logged into your application.

Bonnie Green name@flowbite.com

Dashboard
Settings
Earnings

Sign out

<Dropdown>
  <Avatar slot="trigger" src="/images/profile-picture-3.webp" dot={{color:'bg-green-400'}} />
  <DropdownHeader>
    <span class="block text-sm"> Bonnie Green </span>
    <span class="block truncate text-sm font-medium"> name@flowbite.com </span>
  </DropdownHeader>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

Avatar with name

Use this example to also show the name or email of the user next to the avatar for the dropdown menu.

Bonnie Green name@flowbite.com

Dashboard
Settings
Earnings

Sign out

<Dropdown inline>
  <svelte:fragment slot="label" >
    <Avatar src="/images/profile-picture-3.webp" class="mr-2"/>
    Bonnie Green
  </svelte:fragment>
  <DropdownHeader>
    <span class="block text-sm"> Bonnie Green </span>
    <span class="block truncate text-sm font-medium"> name@flowbite.com </span>
  </DropdownHeader>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

Sizes

The dropdown menus work with buttons of all sizes including smaller or larger ones.

Dashboard
Settings
Earnings
Sign out

Dashboard
Settings
Earnings
Sign out

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

Placement

You can also use the placement="top|right|bottom|left" options to choose the placement of the dropdown menu. By default the positioning is set to the bottom side of the button.

Dashboard
Settings
Earnings
Sign out

Dashboard
Settings
Earnings
Sign out

Dashboard
Settings
Earnings
Sign out

Dashboard
Settings
Earnings
Sign out

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

Double placement

Dashboard
Settings
Earnings
Sign out

Dashboard
Settings
Earnings
Sign out

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

Props

The component has the following props, type, and default values. See types page for type information.

Dropdown

Name	Type	Default
label	string	''
inline	boolean	false
tooltipArrow	boolean	false
arrowIcon	boolean	true
labelClass	string	'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent'
placement	'auto' \| Placement	'bottom'

DropdownDivider

Name	Type	Default
divClass	string	'my-1 h-px bg-gray-100 dark:bg-gray-600'

DropdownHeader

Name	Type	Default
divClass	string	'py-2 px-4 text-gray-700 dark:text-white'
divider	boolean	true

DropdownItem

Name	Type	Default
liClass	string	'block font-medium cursor-pointer py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600'
color	string	'default'

References

Flowbite Dropdown