Dropdown

Examples

* Adding a dropdown id is recommended.

<script>
  import { Dropdown } from 'flowbite-svelte';
  let items = [
    {
      href: "/",
      name: "Dashboard",
    },
    {
      href: "/",
      name: "Settings",
    },
    {
      href: "/",
      name: "Sign out",
    },
  ];
</script>

<Dropdown {items} label="Dropdown button" id="drop1"/>

Dropdown divider

<script>
  import { Dropdown }from 'flowbite-svelte';
  let items = [
    {
      href: "/",
      name: "Dashboard",
    },
    {
      href: "/",
      name: "Settings",
      divider: true
    },
    {
      href: "/",
      name: "Sign out",
    },
  ];
</script>

<Dropdown {items} color="red" label="Dropdown button" id="drop1"/>

Dropdown header

<Dropdown {items} color="purple-outline" label="Dropdown button"  id="drop3">
<div slot="header">
 <span class="block text-sm">Bonnie Green</span>
    <span class="block text-sm font-medium truncat">name@flowbite.com</span>
</div>
</Dropdown>

Props

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

Related components

References