Dropdown

Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements

The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when clicking outside of the triggering element.

Setup

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

Examples

If you want to show a dropdown menu when clicking on an element add the Dropdown and DropdownItem components.

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

Dropdown divider

You can use the DropdownDivider component to add separate elements inside the dropdown menu.

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

Dropdown header

Use this example to show extra information outside of the list of menu items inside the dropdown.

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

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

Programatic open/close

When you want to control your dropdown open status via javascript code you can bind to open property.

<Dropdown label="Dropdown button" class="w-44" bind:open={dropdownOpen}>
  <DropdownItem on:click={() => dropdownOpen = false}>Dashboard (close)</DropdownItem>
  <DropdownItem>
    <Dropdown label="Dropdown" inline={true} placement="right-start" class="ml-10 md:ml-16 w-44">
    <DropdownItem on:click={() => dropdownOpen = false}>Overview (close)</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.

<script>
  import { ..., ...., Checkbox } from 'flowbite-svelte'
</script>
<Dropdown label="Dropdown checkbox" class="w-44">
  <DropdownItem>
    <Checkbox>Default checkbox</Checkbox>
  </DropdownItem>
  <DropdownItem>
    <Checkbox checked>Checked state</Checkbox>
  </DropdownItem>
  <DropdownItem>
    <Checkbox>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.

<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>Default checkbox</Checkbox>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Checkbox checked>Checked state</Checkbox>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Checkbox>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.

<script>
  import { ..., ..., Helper } from 'flowbite-svelte'
</script>
<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>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 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>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.

<script>
  import { ..., ..., Radio } from 'flowbite-svelte'
  let group1 = 2;
</script>

<Dropdown label="Dropdown radio" class="w-44">
    <DropdownItem>
      <Radio bind:group={group1} value={1}>Default radio</Radio>
    </DropdownItem>
    <DropdownItem>
      <Radio bind:group={group1} value={2}>Checked state</Radio>
    </DropdownItem>
    <DropdownItem>
      <Radio bind:group={group1} value={3}>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.

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

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

<script>
  import { ..., ..., Toggle } from 'flowbite-svelte'
</script>

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

<script>
  import { ..., ...., Navbar, NavBrand, NavHamburger, NavUl, NavLi } from 'flowbite-svelte'
</script>
<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.

<script>
  import { ..., ..., Avatar } from 'flowbite-svelte'
</script>
<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.

<script>
  import { ..., ..., SimpleSearch, Checkbox,  } from 'flowbite-svelte'
</script>
<Dropdown label="Project users" class="w-60">
  <svelte:fragment slot="content">
    <div class="p-3">
      <SimpleSearch btnClass="hidden"/>
    </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>Jese Leos</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox>Robert Gouth</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox checked>Bonnie Green</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox>Jese Leos</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox>Robert Gouth</Checkbox>
      </DropdownItem>
      <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
        <Checkbox>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.

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

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

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

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

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

<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

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

Events

The DropdownItem component has on:click event.

<Dropdown label="Dropdown button" class="w-44">
  <DropdownItem on:click={handleClick}>Click me</DropdownItem>
</Dropdown>

Props

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

Dropdown

DropdownDivider

DropdownHeader

DropdownItem

Slots

Dropdown

DropdownDivider

DropdownItem

Forwarded Events: DropdownItem

References