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.

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

<Button><Chevron>Dropdown button</Chevron></Button>
<Dropdown 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.

<script>
  import { Button, Dropdown, DropdownItem, DropdownDivider, Chevron } from 'flowbite-svelte'
</script>
<Button><Chevron>Dropdown button</Chevron></Button>
<Dropdown 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.

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

<Button><Chevron>Dropdown button</Chevron></Button>
<Dropdown 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.

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

<Button><Chevron>Dropdown button</Chevron></Button>
<Dropdown class="w-44">
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem class="flex items-center justify-between"><Chevron placement="right">Dropdown</Chevron></DropdownItem>
  <Dropdown placement="right-start" class="w-44">
    <DropdownItem>Overview</DropdownItem>
    <DropdownItem>My downloads</DropdownItem>
    <DropdownItem>Billing</DropdownItem>
  </Dropdown>
  <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.

<script>
  import { Button, Dropdown, DropdownItem, DropdownDivider, Chevron } from 'flowbite-svelte'
  let dropdownOpen = false;
</script>

  <Button><Chevron>Dropdown button</Chevron></Button>
  <Dropdown class="w-44" bind:open={dropdownOpen}>
    <DropdownItem on:click={() => dropdownOpen = false}>Dashboard (close)</DropdownItem>
    <DropdownItem class="flex items-center justify-between"><Chevron placement="right">Dropdown</Chevron></DropdownItem>
    <Dropdown placement="right-start" class="w-44">
      <DropdownItem on:click={() => dropdownOpen = false}>Overview (close)</DropdownItem>
      <DropdownItem>My downloads</DropdownItem>
      <DropdownItem>Billing</DropdownItem>
    </Dropdown>
    <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 { Button, Dropdown, DropdownItem, Chevron, Checkbox } from 'flowbite-svelte'
</script>

<Button><Chevron>Dropdown checkbox</Chevron></Button>
<Dropdown 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.

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

<Button><Chevron>Dropdown checkbox</Chevron></Button>
<Dropdown 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 { Button, Dropdown, DropdownItem, Chevron, Checkbox, Helper } from 'flowbite-svelte'
</script>

<Button><Chevron>Dropdown checkbox</Chevron></Button>
<Dropdown 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">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">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">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 { Button, Dropdown, DropdownItem, Chevron, Radio } from 'flowbite-svelte'
  let group1=2;
</script>

<Button><Chevron>Dropdown radio {group1}</Chevron></Button>
<Dropdown class="w-44">
  <DropdownItem>
    <Radio name="group1" bind:group={group1} value={1}>Default radio</Radio>
  </DropdownItem>
  <DropdownItem>
    <Radio name="group1" bind:group={group1} value={2}>Checked state</Radio>
  </DropdownItem>
  <DropdownItem>
    <Radio name="group1" 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>
  import { Button, Dropdown, DropdownItem, Chevron, Radio } from 'flowbite-svelte'
  let group2=2;
</script>

<Button><Chevron>Dropdown radio</Chevron></Button>
<Dropdown 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 name="group2" 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 name="group2" 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 name="group2" 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.

<script>
  import { Button, Dropdown, DropdownItem, Chevron, Radio, Helper} from 'flowbite-svelte'
  let group3=2;
</script>

<Button><Chevron>Dropdown radio</Chevron></Button>
<Dropdown class="w-60" trigger="hover">
  <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 name="group3" bind:group={group3} value={1}>Enable notifications</Radio>
      <Helper class="pl-6">Some helpful instruction goes over here.</Helper>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Radio name="group3" bind:group={group3} value={2}>Enable 2FA auth</Radio>
      <Helper class="pl-6">Some helpful instruction goes over here.</Helper>
    </DropdownItem>
    <DropdownItem class="rounded" liClass="p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
      <Radio name="group3" bind:group={group3} value={3}>Subscribe newsletter</Radio>
      <Helper class="pl-6">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 { Button, Dropdown, DropdownItem, Chevron, Toggle } from 'flowbite-svelte'
  let group2=2;
</script>

<Button><Chevron>Dropdown toggle</Chevron></Button>
<Dropdown class="w-56">
<ul slot="content" class="p-3 space-y-1">
  <DropdownItem class="rounded">
    <Toggle>Default toggle</Toggle>
  </DropdownItem>
  <DropdownItem class="rounded">
    <Toggle checked>Checked state</Toggle>
  </DropdownItem>
  <DropdownItem class="rounded">
    <Toggle>Default toggle</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 { Button, Dropdown, DropdownItem, Chevron, DropdownDivider, Navbar, NavBrand, NavHamburger, NavUl, NavLi } from 'flowbite-svelte'
  let group3=2;
</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} class="ml-3">
    <NavLi href="/" active={true}>Home</NavLi>
    <NavLi id="nav_dropdown" class="flex items-center"><Chevron>Dropdown</Chevron></NavLi>
    <NavLi href="/services">Services</NavLi>
    <NavLi href="/pricing">Pricing</NavLi>
    <NavLi href="/contact">Contact</NavLi>
  </NavUl>
<Dropdown placement="bottom" triggeredBy="#nav_dropdown" offset="18">
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>
</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 { Button, Dropdown, DropdownItem, Chevron, 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">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" /></svg>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 { Button, Dropdown, DropdownItem, Chevron, Checkbox, SimpleSearch } 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">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M22 10.5h-6m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" /></svg>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.

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

<ToolbarButton class="dots-menu text-gray-900 bg-white dark:text-white dark:bg-gray-800">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /></svg>
</ToolbarButton>
<ToolbarButton class="dots-menu text-gray-900 bg-white dark:text-white dark:bg-gray-800">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" /></svg>
</ToolbarButton>
<Dropdown class="w-44" triggeredBy=".dots-menu">
  <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.

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

<div id="bell" 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>
<Dropdown class="w-full max-w-sm" triggeredBy="#bell">
  <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.

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

<Avatar class="acs" src="/images/profile-picture-3.webp" dot={{color:'bg-green-400'}} />
<Dropdown triggeredBy=".acs">
  <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.

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

<Button pill color="light" id="avatar_with_name" class="!p-1">
  <Avatar src="/images/profile-picture-3.webp" class="mr-2"/>
  Bonnie Green
</Button>
<Dropdown inline triggeredBy="#avatar_with_name">
  <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.

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

<Dropdown triggeredBy=".sizes">
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>
<Button class="sizes" size="sm"><Chevron>Small dropdown</Chevron></Button>
<Button class="sizes" size="lg"><Chevron>Large dropdown</Chevron></Button>

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.

<script>
  import { Button, Dropdown, DropdownItem, Chevron } from 'flowbite-svelte'
  let placement = 'left';
</script>

<Dropdown {placement} triggeredBy="#placements button"
  on:show={e=> placement = e.target.textContent.trim().split(' ')[1]}>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>
<div id="placements" class="flex gap-2">
  <Button><Chevron placement="left">Dropdown left</Chevron></Button>
  <Button><Chevron placement="top">Dropdown top</Chevron></Button>
  <Button><Chevron placement="bottom">Dropdown bottom</Chevron></Button>
  <Button><Chevron placement="right">Dropdown right</Chevron></Button>
</div>

Double placement #

<script>
  import { Button, Dropdown, DropdownItem, Chevron } from 'flowbite-svelte'
  let placement='left'
</script>

<Button data-placement="left-start"><Chevron placement="left">Dropdown left start</Chevron></Button>
<Button data-placement="right-end"><Chevron placement="right">Dropdown right end</Chevron></Button>
<Dropdown {placement} triggeredBy="[data-placement]" on:show={e => placement = e.target.dataset.placement}>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

Events #

If you provide the href property to the DropdownItem component you can listen to standard <a/> events like on:click event.

If you do not provide the href property, it means you are inserting another interactive element inside the DropdownItem like button or checkbox. Events listening can be then done directly on the inserted element.

<script>
  import { Button, Dropdown, DropdownItem, Checkbox, Chevron } from 'flowbite-svelte'
  const handleClick = (e)=>{
    e.preventDefault()
    alert ('Clicked on: ' + e.target)
  }

</script>

<Button><Chevron>Dropdown button</Chevron></Button>
<Dropdown class="w-44">
  <DropdownItem href="/link" on:click={handleClick}>Click me</DropdownItem>
  <DropdownItem><Checkbox on:click={handleClick}>Checkbox</Checkbox></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
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	Placement	'bottom'
open	boolean	false
color	string	'dropdown'

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'
href	string	undefined

Slots #

Dropdown

Name	Description
trigger	Dropdown trigger icon/button.
content	Dropdown content

DropdownDivider

Name	Description
default	Dropdown header content.

DropdownItem

Name	Description
default	Dropdown item content.

Forwarded Events: DropdownItem #

on:blur on:change on:click on:focus on:keydown on:keyup on:mouseenter on:mouseleave

References #

Flowbite Dropdown