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.iconClass
- The class of 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.slot
- The slot of the item.disabled
- Whether the item is disabled.click
- The click handler of the item.
You can also pass any property from the NuxtLink component such as to
, exact
, etc.
<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.
<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>
Popper
Use the popper
prop to customize the popper instance.
Arrow
<script setup>const items = [ [{ label: 'Profile', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } }]]</script><template> <UDropdown :items="items" :popper="{ arrow: true }"> <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" /> </UDropdown></template>
Placement
<script setup>const items = [ [{ label: 'Profile', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } }]]</script><template> <UDropdown :items="items" :popper="{ placement: 'right-start' }"> <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" /> </UDropdown></template>
Offset
<script setup>const items = [ [{ label: 'Profile', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } }]]</script><template> <UDropdown :items="items" :popper="{ offsetDistance: 0, placement: 'right-start' }"> <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" /> </UDropdown></template>
Slots
item
Use the #item
slot to customize the items content or pass a slot
property to customize a specific item. You will have access to the item
property in the slot scope.
<script setup>const items = [ [{ label: 'ben@example.com', slot: 'account', disabled: true }], [{ label: 'Settings', icon: 'i-heroicons-cog-8-tooth' }], [{ label: 'Documentation', icon: 'i-heroicons-book-open' }, { label: 'Changelog', icon: 'i-heroicons-megaphone' }, { label: 'Status', icon: 'i-heroicons-signal' }], [{ label: 'Sign out', icon: 'i-heroicons-arrow-left-on-rectangle' }]]</script><template> <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }"> <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" /> <template #account="{ item }"> <div class="text-left"> <p> Signed in as </p> <p class="truncate font-medium text-gray-900 dark:text-white"> {{ item.label }} </p> </div> </template> <template #item="{ item }"> <span class="truncate">{{ item.label }}</span> <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" /> </template> </UDropdown></template>
Props
ui
any
undefined
mode
"click" | "hover"
"click"
popper
{}
{}
items
DropdownItem[][]
[]
openDelay
number
0
closeDelay
number
0
disabled
boolean
false
Config
UDropdown.vue
{ "wrapper": "relative inline-flex text-left rtl:text-right", "container": "z-20 group", "width": "w-48", "height": "", "background": "bg-white dark:bg-gray-800", "shadow": "shadow-lg", "rounded": "rounded-md", "ring": "ring-1 ring-gray-200 dark:ring-gray-700", "base": "relative focus:outline-none overflow-y-auto scroll-py-1", "divide": "divide-y divide-gray-200 dark:divide-gray-700", "padding": "p-1", "item": { "base": "group flex items-center gap-2 w-full", "rounded": "rounded-md", "padding": "px-2 py-1.5", "size": "text-sm", "active": "bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white", "inactive": "text-gray-700 dark:text-gray-200", "disabled": "cursor-not-allowed opacity-50", "icon": { "base": "flex-shrink-0 h-4 w-4", "active": "text-gray-500 dark:text-gray-400", "inactive": "text-gray-400 dark:text-gray-500" }, "avatar": { "base": "flex-shrink-0", "size": "3xs" }, "shortcuts": "hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto" }, "transition": { "enterActiveClass": "transition duration-100 ease-out", "enterFromClass": "transform scale-95 opacity-0", "enterToClass": "transform scale-100 opacity-100", "leaveActiveClass": "transition duration-75 ease-in", "leaveFromClass": "transform scale-100 opacity-100", "leaveToClass": "transform scale-95 opacity-0" }, "popper": { "placement": "bottom-end", "strategy": "fixed" }, "arrow": { "base": "before:w-2 before:h-2", "ring": "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700", "rounded": "before:rounded-sm", "background": "before:bg-white dark:before:bg-gray-700", "shadow": "before:shadow", "placement": "group-data-[popper-placement*=\"right\"]:-left-1 group-data-[popper-placement*=\"left\"]:-right-1 group-data-[popper-placement*=\"top\"]:-bottom-1 group-data-[popper-placement*=\"bottom\"]:-top-1" }}