Flowbite Vue 3

Appearance

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.

vue
<template>
  <fwb-dropdown text="Bottom">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="top" text="Top">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="right" text="Right">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="left" text="Left">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>
<template>
  <fwb-dropdown text="Bottom">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="top" text="Top">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="right" text="Right">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
  <fwb-dropdown placement="left" text="Left">
    <p class="p-2">Dropdown content here</p>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>
vue
<template>
  <fwb-dropdown text="Menu">
    <fwb-list-group>
      <fwb-list-group-item>
        Profile
      </fwb-list-group-item>
      <fwb-list-group-item>
        Settings
      </fwb-list-group-item>
      <fwb-list-group-item>
        Messages
      </fwb-list-group-item>
      <fwb-list-group-item>
        Download
      </fwb-list-group-item>
    </fwb-list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
</script>
<template>
  <fwb-dropdown text="Menu">
    <fwb-list-group>
      <fwb-list-group-item>
        Profile
      </fwb-list-group-item>
      <fwb-list-group-item>
        Settings
      </fwb-list-group-item>
      <fwb-list-group-item>
        Messages
      </fwb-list-group-item>
      <fwb-list-group-item>
        Download
      </fwb-list-group-item>
    </fwb-list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
</script>
Custom Trigger Element
vue
<template>
  <fwb-dropdown>
    <template #trigger>
      <span>Custom Trigger Element</span>
    </template>
    <fwb-list-group>
      <fwb-list-group-item>
        Profile
      </fwb-list-group-item>
      <fwb-list-group-item>
        Settings
      </fwb-list-group-item>
      <fwb-list-group-item>
        Messages
      </fwb-list-group-item>
      <fwb-list-group-item>
        Download
      </fwb-list-group-item>
    </fwb-list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
</script>
<template>
  <fwb-dropdown>
    <template #trigger>
      <span>Custom Trigger Element</span>
    </template>
    <fwb-list-group>
      <fwb-list-group-item>
        Profile
      </fwb-list-group-item>
      <fwb-list-group-item>
        Settings
      </fwb-list-group-item>
      <fwb-list-group-item>
        Messages
      </fwb-list-group-item>
      <fwb-list-group-item>
        Download
      </fwb-list-group-item>
    </fwb-list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
</script>
Custom Trigger Element
vue
<template>
  <fwb-dropdown text="Bottom" close-inside>
    <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>
<template>
  <fwb-dropdown text="Bottom" close-inside>
    <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>

Released under the MIT License.

Copyright © 2023 Flowbite™