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
Default dropdown
html
typescript
<flowbite-dropdown>
<flowbite-dropdown-item>Item 1</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 2</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 3</flowbite-dropdown-item>
</flowbite-dropdown>
Dropdown with divider
html
typescript
<flowbite-dropdown>
<flowbite-dropdown-item>Item 1</flowbite-dropdown-item>
<flowbite-dropdown-divider />
<flowbite-dropdown-item>Item 2</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 3</flowbite-dropdown-item>
</flowbite-dropdown>
Dropdown with header
html
typescript
<flowbite-dropdown>
<flowbite-dropdown-header>
<span class="block text-sm">Bonnie Green</span>
<span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>
</flowbite-dropdown-header>
<flowbite-dropdown-divider />
<flowbite-dropdown-item>Item 1</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 2</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 3</flowbite-dropdown-item>
</flowbite-dropdown>
Dropdown placement
html
typescript
<flowbite-dropdown
position="top-center"
label="Top start">
<flowbite-dropdown-item>Item 1</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 2</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 3</flowbite-dropdown-item>
</flowbite-dropdown>
<flowbite-dropdown
position="left-center"
label="Left start">
<flowbite-dropdown-item>Item 1</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 2</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 3</flowbite-dropdown-item>
</flowbite-dropdown>
<flowbite-dropdown
position="right-center"
label="Right end">
<flowbite-dropdown-item>Item 1</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 2</flowbite-dropdown-item>
<flowbite-dropdown-item>Item 3</flowbite-dropdown-item>
</flowbite-dropdown>