ui/docs/content/2.elements/4.dropdown.md

github, description, headlessui

github	description	headlessui
true	Display a list of actions in a dropdown menu.	label to Menu https://headlessui.com/vue/menu

Usage

Pass an array of arrays to the items prop of the Dropdown component. Each array represents a group of items. Each item can have the following properties:

• label - The label of the item.
• icon - The icon of the item.
• avatar - The avatar of the item. You can pass all the props of the Avatar component.
• shortcuts - The shortcuts of the item.
• disabled - Whether the item is disabled.
• click - The click handler of the item.

You can also pass properties from the NuxtLink component such as to, exact, etc.

::component-example #default :dropdown-example-basic

#code

<script setup>
const items = [
  [{
    label: 'Profile',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
    }
  }], [{
    label: 'Edit',
    icon: 'i-heroicons-pencil-square-20-solid',
    shortcuts: ['E'],
    click: () => {
      console.log('Edit')
    }
  }, {
    label: 'Duplicate',
    icon: 'i-heroicons-document-duplicate-20-solid',
    shortcuts: ['D'],
    disabled: true
  }], [{
    label: 'Archive',
    icon: 'i-heroicons-archive-box-20-solid'
  }, {
    label: 'Move',
    icon: 'i-heroicons-arrow-right-circle-20-solid'
  }], [{
    label: 'Delete',
    icon: 'i-heroicons-trash-20-solid',
    shortcuts: ['⌘', 'D']
  }]
]
</script>

<template>
  <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
  </UDropdown>
</template>

::

Mode

Use the mode prop to switch between click and hover modes.

::component-example #default :dropdown-example-mode

#code

<script setup>
const items = [
  [{
    label: 'Profile',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
    }
  }]
]
</script>

<template>
  <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
  </UDropdown>
</template>

::

Props

:component-props

Preset

:component-preset