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": null,
  "excerpt": false,
  "tag": "div"
}

Mode

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "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": null,
  "excerpt": false,
  "tag": "div"
}

Popper

Use the popper prop to customize the popper instance.

Arrow

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

Placement

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

Offset

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "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": null,
  "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; ... 4 more ...; arrow?: DeepPartial<...>; } & { ...; } & { ...; }

{}

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": null,
  "excerpt": false,
  "tag": "div"
}

Divider

Display a separator between content.

Form

Collect and validate form data.