Dropdown - Nuxt UI

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.
labelClass - The class of the item label.
icon - The icon of the item.
iconClass - The class of the item icon.
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.
class - The class of the item.
click - The click handler of the item.

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Mode

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Manual

Use a v-model:open to manually control the state. In this example, press O to toggle the dropdown.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Popper

Use the popper prop to customize the popper instance.

Arrow

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Placement

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Offset

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

{ wrapper?: string; container?: string; trigger?: string; width?: string; height?: string; background?: string; shadow?: string; rounded?: string; ring?: string; base?: string; divide?: string; padding?: string; item?: DeepPartial<{ base: string; rounded: string; padding: string; size: string; active: string; inactive: string; disabled: string; icon: { base: string; active: string; inactive: string; }; avatar: { base: string; size: AvatarSize; }; label: string; shortcuts: string; }, any>; transition?: DeepPartial<{ enterActiveClass: string; enterFromClass: string; enterToClass: string; leaveActiveClass: string; leaveFromClass: string; leaveToClass: string; }, any>; popper?: DeepPartial<{ placement: string; strategy: string; }, any>; default?: DeepPartial<{ openDelay: number; closeDelay: number; }, any>; arrow?: DeepPartial<{ ring: string; background: string; base: string; rounded: string; shadow: string; placement: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }

{}

mode

"click" | "hover"

"click"

items

DropdownItem[][]

[]

popper

PopperOptions

{}

openDelay

number

config.default.openDelay

closeDelay

number

config.default.closeDelay

disabled

boolean

false

open

boolean

undefined

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Divider

Display a separator between content.

Form

Collect and validate form data.