Dropdown

Usage

<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>

Props

Prop	Default	Description
`items`	`[]`	`{ to?: RouteLocationRaw; exact?: boolean; label: string; slot?: string; icon?: string; iconClass?: string; avatar?: Partial<Avatar>; shortcuts?: string[]; disabled?: boolean; click?: Function; }[][]`
`popper`	`{}`	`{}`
`mode`	`"click"`	`string`
`openDelay`	`50`	`number`
`closeDelay`	`0`	`number`
`disabled`	`false`	`boolean`
`ui`	`appConfig.ui.dropdown`	`any`

Preset

{
  "wrapper": "relative inline-flex text-left",
  "container": "z-20",
  "width": "w-48",
  "background": "bg-white dark:bg-gray-800",
  "shadow": "shadow-lg",
  "rounded": "rounded-md",
  "ring": "ring-1 ring-gray-200 dark:ring-gray-700",
  "base": "focus:outline-none",
  "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 ml-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-out",
    "leaveFromClass": "transform scale-100 opacity-100",
    "leaveToClass": "transform scale-95 opacity-0"
  },
  "popper": {
    "placement": "bottom-end",
    "strategy": "fixed"
  }
}