Docs Quickstart Figma Flowbite
1.3.0
Components Dropdown

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

Show on Github
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>
Show on Github
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>
Show on Github
html
typescript
<flowbite-dropdown>
  <flowbite-dropdown-header>
    <span class="block text-sm">Bonnie Green</span>
    <span class="block truncate text-sm font-medium">bonnie&#64;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>
Show on Github
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>
Flowbite

© 2019-2024 Flowbite™ is a registered trademark. All Rights Reserved.