Skip to content

Dropdown

Dropdown is used to create blocks of content in which there may be, for example, links, menu, or information.

Props i Slots

The component uses the same elements as floating, and only sets the value from type to click.

Examples

Dropdown
html
<dropdown>
  <template #trigger>
    <btn color="primary" text="Button" />
  </template>
  <template #content>
    <div class="p-2">Dropdown content</div>
  </template>
</dropdown>
Dropdown set by prop show
html
<script setup>
  import { ref } from 'vue'
  const show = ref(false)
  function change() {
    show.value = !show.value
  }
</script>
<dropdown :close="show" @hide-floating="show=false">
  <template #trigger>
    <btn color="primary" text="Button" />
  </template>
  <template #content>
    <div class="p-2">Dropdown content with <a href="#" @click="close()">closing link</a></div>
  </template>
</dropdown>