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 type-list page for type information.
| Name | Type | Default |
|---|---|---|
| id | string | 'dropdown' |
| label | string | 'Dropdown button' |
| rounded | boolean | false |
| textSize | string | 'text-sm' |
| color | DropdownColorType | 'blue' |
| items | DropdownType[] | - |
| dropdownClass | string | 'absolute left-0 top-1 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700' |
| headerClass | string | 'py-3 px-4 text-gray-900 dark:text-white' |
| linkClass | string | 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white' |