mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 04:29:37 +01:00
66 lines
1.7 KiB
Markdown
66 lines
1.7 KiB
Markdown
---
|
|
description: Display a list of actions in a dropdown menu.
|
|
links:
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Dropdown.vue
|
|
- label: Menu
|
|
icon: i-simple-icons-headlessui
|
|
to: 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.
|
|
- `iconClass` - The class of the icon of the item.
|
|
- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/elements/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](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
|
|
|
|
:component-example{component="dropdown-example-basic"}
|
|
|
|
### Mode
|
|
|
|
Use the `mode` prop to switch between `click` and `hover` modes.
|
|
|
|
:component-example{component="dropdown-example-mode"}
|
|
|
|
## Popper
|
|
|
|
Use the `popper` prop to customize the popper instance.
|
|
|
|
### Arrow
|
|
|
|
:component-example{component="dropdown-example-arrow"}
|
|
|
|
### Placement
|
|
|
|
:component-example{component="dropdown-example-placement"}
|
|
|
|
### Offset
|
|
|
|
:component-example{component="dropdown-example-offset"}
|
|
|
|
## 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.
|
|
|
|
:component-example{component="dropdown-example-slot"}
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Preset
|
|
|
|
:component-preset
|