false |
| animation | Custom animation (transition name) | string | - | dropdown: {
animation: "fade"
} |
| ariaLabel | Accessibility aria-label to be passed to the trigger element - usefull if selectable | string | - | |
| clipScroll | Set `true` to remove the body scrollbar.dropdown: {
clipScroll: false
} |
| closeOnOutside | Close Dropdown when clicked outside | boolean | - | dropdown: {
closeOnOutside: true
} |
| closeOnScroll | Close Dropdown when page get scrolled | boolean | - | dropdown: {
closeOnScroll: false
} |
| delay | Dropdown delay before it appears (number in ms) | number | - | |
| desktopModal | Dropdown content (items) are shown into a modal on desktop | boolean | - | dropdown: {
desktopModal: false
} |
| disabled | Interaction is disabled | boolean | - | false |
| expanded | Dropdown will be expanded (full-width) | boolean | - | false |
| false |
| itemTag | Dropdown item tag name | DynamicComponent | - | dropdown: {
itemTag: "div"
} |
| keepFirst | The first option will always be pre-selected (easier to just hit enter or tab) | boolean | - | dropdown: {
keepFirst: false
} |
| keepOpen | Keep dropdown list open when item get selected | boolean | - | dropdown: {
keepOpen: false
} |
| label | Trigger label, unnecessary when trigger slot is used | string | - | |
| labelledby | Ensures that each input has an accessible name. | string | - | |
| maxHeight | Max height of dropdown content | Numberish | - | dropdown: {
maxHeight: 200
} |
| menuId | HTML element Id of the dropdown menu element | string | - | useId() |
| menuTag | Dropdown menu tag name | DynamicComponent | - | dropdown: {
menuTag: "div"
} |
| mobileBreakpoint | Mobile breakpoint as `max-width` value | string | - | dropdown: {
mobileBreakpoint: undefined
} |
| mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - | dropdown: {
mobileModal: true
} |
| v-model | The selected option value, use v-model to make it two-way binding | ValueType<unknown, IsMultiple> | - | |
| multiple | Allows multiple selections - converts the `modelValue` into an array | IsMultiple | - | |
| openOnClick | Show when clicked on the trigger | boolean | - | tooltip: {
openOnClick: true
} |
| openOnContextmenu | Show when right clicked on the trigger | boolean | - | tooltip: {
openOnContextmenu: false
} |
| openOnFocus | Show when trigger get focused | boolean | - | tooltip: {
openOnFocus: false
} |
| openOnHover | Show when hover over the trigger | boolean | - | tooltip: {
openOnHover: false
} |
| options | Dropdown options, unnecessary when default slot is used | DropdownOptions<unknown> | - | |
| override | Override existing theme classes completely | boolean | - | |
| position | Position of the dropdown relative to the trigger | "auto" \| "bottom-left" \| "bottom-right" \| "bottom" \| "left" \| "right" \| "top-left" \| "top-right" \| "top" | `auto`, `top`, `bottom`, `left`, `right`, `top-right`, `top-left`, `bottom-left`, `bottom-right` | dropdown: {
position: "bottom-left"
} |
| scrollable | Menu content will be scrollable | boolean | - | false |
| selectOnClose | Select current focused item when closed | boolean | - | dropdown: {
selectOnClose: false
} |
| selectOnFocus | Select current focused item when focused | boolean | - | dropdown: {
selectOnFocus: false
} |
| selectable | Enables item selection | boolean | - | false |
| teleport | Append the component to another part of the DOM.dropdown: {
teleport: false
} |
| triggerTag | Dropdown trigger tag name | DynamicComponent | - | dropdown: {
triggerTag: "div"
} |
### Events
| Event name | Properties | Description |
| ------------------ | ---------------------------------------------------------- | ------------------------------------------------ |
| update:model-value | **value** `unknown \| unknown[]` - updated modelValue prop | modelValue prop two-way binding |
| update:active | **value** `boolean` - updated active prop | active prop two-way binding |
| select | **value** `unknown` - selected value | on select event - fired before update:modelValue |
| change | **value** `unknown \| unknown[]` - selected value |
| open | **event** `Event` - native event | on active state changes to true |
| close | **event** `Event` - native event | on active state changes to false |
| scroll-start | | the list inside the dropdown reached the start |
| scroll-end | | the list inside the dropdown reached it's end |
### Slots
| Name | Description | Bindings |
| ------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| trigger | Override the trigger element, default is label prop | **active** `boolean` - dropdown active statetrue |
| disabled | Item is disabled | boolean | - | false |
| hidden | Define whether the item is visible or not | boolean | - | false |
| label | Item label, unnecessary when default slot is used | string | - | |
| override | Override existing theme classes completely | boolean | - | |
| tag | Dropdown item tag name | DynamicComponent | - | |
| value | Item value (it will be used as the v-model of the wrapper component) - default is an uuid | string\|number\|object | - | useId() |
### Events
| Event name | Properties | Description |
| ---------- | -------------------------------------------------------------------------- | ------------- |
| click | **value** `unknown` - value prop data