🌏 Translated with the assistance of DeepSeek and ChatGPT

DropDown

A compact menu displayed via a dropdown.

Basic Usage

Set menu content using the options prop. When an option is a string or an object, its index field will be used as the option's unique identifier — make sure they are not duplicated.

Use the select event to get the triggered option.

options determines whether to render the options as <a> tags or Vue Router RouterLink components based on the href or route field of the child elements.

WARNING

The href and route will be directly rendered into the <a> tag. If values such as javascript:alert(1) or malicious URLs are passed, this may lead to XSS or open redirect vulnerabilities.

Hide source code

Placement

The DropDown popup supports multiple placements.

The placement prop determines where the popup appears. The value format is [direction]-[alignment], such as 'top', 'right', 'bottom', 'left', 'top-start', 'top-end', 'right-start', 'right-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end'. There are four directions and three alignment variations. Default placement is top.

Hide source code

Grouped Menus

Options can be grouped.

Hide source code

Split Button

Combine ButtonGroup and Button components so an icon button can trigger the popup.

Hide source code

Controlled Mode

Passing visible switches the component to controlled mode. If omitted or set to undefined, the component is uncontrolled and defaultVisible can be used to set the initial state. The component emits update:visible to support v-model.

Hide source code

Disabled State

Set disabled to disable the component. Trigger actions will be ignored and the popup will not open.

Hide source code

Slot Usage

Dropdown provides option and group-label slots for customizing the rendering of menu items and group headers.

Hide source code

API

DropDownProps

Attribute	Type	Optional	Default	Description	Version
options	DropDownOption | DropDownGroupOption	True		Dropdown menu contents.	0.1.0
visible	boolean | null	True		Whether it is shown (controlled mode, supports v-model).	0.1.0
defaultVisible	boolean | null	True		Default visibility in uncontrolled mode.	0.1.0
placement	'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'	True	'top'	Popup placement.	0.1.0
trigger	'hover' | 'click'	True	'hover'	Trigger action.	0.1.0
disabled	boolean	True	boolean	Whether the component is disabled.	0.1.0
offset	number	True	8	Popup offset in pixels.	0.1.0
variant	'dark' | 'light'	True	'light'	Component style variant.	0.1.0
arrow	boolean	True	true	Whether to show an arrow.	0.1.0
root	HTMLElement | string	True	'body'	Mount element.	0.1.0
zIndex	number	True		z-index for the popup.	0.1.0
animationDuration	number	True	250	Duration of the popup show/hide animation.	0.1.5
destroyOnHide	boolean	True	false	Whether to destroy content when hidden.	0.1.0
popoverProps	Omit<PopoverProps, 'visible' | 'content' | 'defaultVisible'> & EmitEvent<PopoverEvents>	True		Props forwarded to the internal Popover.	0.1.0
dividerProps	RestAttrs	True		DOM attributes forwarded to the divider element.	0.1.0

DropDownEvents

Event	Parameter	Description	Version
update:visible	value: boolean	Callback for updating visible.	0.1.0
close	event: MouseEvent	Fired when the popup closes.	0.1.0
open	event: MouseEvent	Fired when the popup opens.	0.1.0
select	index: string | number | symbol, option: DropDownOption | string, event: MouseEvent	Fired when a menu option is selected.	0.1.0

DropDownSlots

Slot	Parameter	Description	Version
default		Trigger element slot.	0.1.0
option	item: string | DropDownOption	Custom rendering for an option.	0.1.5
group-label	item: DropDownGroupOption	Custom rendering for the group header.	0.1.5

DropDownExpose

Attribute	Type	Optional	Default	Description	Version
open	() => void	False		Opens the popup.	0.1.0
close	() => void	False		Closes the popup.	0.1.0

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}

DropDownOption, DropDownGroupOption

export interface DropDownOption extends NavigationOption {
	divider?: boolean
	disabled?: boolean
	href?: string
	route?: string | object
	target?: string
}

export interface DropDownGroupOption extends NavigationOption {
	children: (DropDownOption | string)[]
	type: 'group'
}

export interface NavigationOption {
	index: string | number | symbol
	label?: string
}