flowbite-vue/docs/components/dropdown.md

<script setup> import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExamplePlacement.vue' import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue' import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue' </script>

Vue Dropdown - Flowbite

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

---

:::tip Original reference: https://flowbite.com/docs/components/dropdowns/ :::

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 focusing outside of the triggering element.

Dropdown - placement

```vue

Dropdown content here

Dropdown content here

Dropdown content here

Dropdown content here

<script setup> import { FwbDropdown } from 'flowbite-vue' </script>

## Dropdown with List Group

<fwb-dropdown-example-list-group />
```vue
<template>
  <fwb-dropdown text="Menu">
    <list-group>
      <list-group-item>
        Profile
      </list-group-item>
      <list-group-item>
        Settings
      </list-group-item>
      <list-group-item>
        Messages
      </list-group-item>
      <list-group-item>
        Download
      </list-group-item>
    </list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
</script>

Dropdown - trigger

```vue Custom Trigger Element Profile Settings Messages Download <script setup> import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue' </script>