Dropdown
Collapse actions or menus into a dropdown to save interface space.
Basic Usage
Define the dropdown menu content via the dropdown slot. This component supports a Slot Fallback mechanism: when the slot is provided, it completely customizes the menu content; when the slot is not provided, it automatically generates the menu based on the items data.
Quick Configuration Mode
Quickly configure menu items via the items attribute without using slots.
Trigger Mode
Configure to activate on click or hover. Set the trigger attribute to click. Default is hover.
Split Button
Set the split-button attribute to make the triggering element appear as a button group, with a function button on the left and a dropdown trigger button on the right.
Disabled Items
Disable specific menu items by setting the disabled attribute.
Placement
Set the popup position via the placement attribute.
Danger Items
By setting danger: true, a menu item will be displayed in a red danger style, commonly used for destructive operations like deletion.
Loading State
Show a loading state via the loading attribute, suitable for scenarios where menu data is loaded asynchronously.
Checkable Mode
Enable checkable mode via the checkable attribute, and use it with hide-on-click="false" for multi-selection scenarios.
Use in Nuxt
The Dropdown component fully supports SSR rendering for Nuxt 3/4.
SSR Notes:
- ✅ Perfect support for Server-Side Rendering (SSR), no hydration errors
- ✅ Supports keyboard navigation
- ✅ Overlay automatically Teleports to body
- ✅ Glassmorphism (acrylic) effect adapts automatically
API
Dropdown Props
| Prop | Description | Type | Default |
|---|---|---|---|
| trigger | Trigger mode | 'hover' | 'click' | 'contextmenu' | 'hover' |
| placement | Popup placement | Placement | 'bottom' |
| visible | Whether visible (supports v-model) | boolean | null | null |
| disabled | Whether disabled | boolean | false |
| show-after | Delay show time (ms) | number | 0 |
| hide-after | Delay hide time (ms) | number | 150 |
| z-index | Overlay z-index | number | 2000 |
| hide-on-click | Whether to hide after clicking a menu item | boolean | true |
| items | Menu item data (Quick Config Mode) | DropdownItemData[] | [] |
| loading | Whether in loading state | boolean | false |
| empty-text | Empty state text | string | 'No data' |
| checkable | Whether items are checkable | boolean | false |
| max-height | Maximum height of the menu | string | number | '' |
| teleported | Whether to mount to body | boolean | true |
| popper-class | Custom class name for popper | string | '' |
| popper-style | Custom style for popper | CSSProperties | {} |
| split-button | Split button mode | boolean | false |
| type | Button type (Split Button mode) | 'primary' | 'success' | 'warning' | 'danger' | 'info' | '' | '' |
| size | Button size | 'large' | 'default' | 'small' | 'default' |
| plain | Plain button style (Split Button mode) | boolean | false |
| show-arrow | Whether to show dropdown arrow icon | boolean | true |
| popper-arrow | Whether to show popper arrow | boolean | true |
| offset | Offset | [number, number] | [0, 8] |
| loop | Tab key cycle navigation | boolean | true |
| tabindex | Tab index | number | string | 0 |
DropdownItem Props
| Prop | Description | Type | Default |
|---|---|---|---|
| command | Command value | string | number | object | '' |
| disabled | Whether disabled | boolean | false |
| divided | Whether to show divider | boolean | false |
| icon | Icon name | string | '' |
| danger | Whether it's a danger item | boolean | false |
| checked | Whether checked (requires checkable) | boolean | false |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| command | Triggered when menu item is clicked | (command: string | number | object) |
| update:visible | Visibility changed | (visible: boolean) |
| show | Menu shown | - |
| hide | Menu hidden | - |
| click | Clicked trigger (Split Button mode) | (event: MouseEvent) |
Slots
| Slot Name | Description |
|---|---|
| default | Trigger element |
| dropdown | Dropdown menu content (using DropdownMenu/DropdownItem) |
| empty | Empty state content (shown when no items) |
Expose
| Name | Description | Type |
|---|---|---|
| show | Manually show dropdown menu | () => void |
| hide | Manually hide dropdown menu | () => void |
| visible | Current visibility state | Ref<boolean> |
DropdownItemData Type
interface DropdownItemData {
key: string | number
label: string
icon?: string
disabled?: boolean
divided?: boolean
class?: string
children?: DropdownItemData[]
danger?: boolean // Red danger style
checked?: boolean // Checkable mode
}Theme Variables (CSS Variables)
All color variables are interfaced with the global theme system, automatically supporting dark mode:
| Variable | Default Value | Description |
|---|---|---|
--yh-dropdown-text-color | var(--yh-text-color-primary) | Menu text color |
--yh-dropdown-bg-color | var(--yh-bg-color-overlay) | Popper background color |
--yh-dropdown-border-color | var(--yh-border-color-light) | Border/divider color |
--yh-dropdown-hover-bg | var(--yh-color-primary-light-9) | Menu item hover background |
--yh-dropdown-active-bg | var(--yh-color-primary-light-8) | Menu item active background |
--yh-dropdown-disabled-color | var(--yh-text-color-placeholder) | Disabled item text color |
--yh-dropdown-danger-color | var(--yh-color-danger) | Danger item text color |
--yh-dropdown-danger-hover-bg | var(--yh-color-danger-light-9) | Danger item hover background |
--yh-dropdown-shadow | var(--yh-shadow-lg) | Popper shadow |
--yh-dropdown-radius | var(--yh-radius-md) | Popper corner radius |
Tip: The Dropdown component integrates excellent designs from Element Plus, Ant Design, and Naive UI, supporting quick data configuration, split buttons, keyboard navigation, danger item styles, loading states, checkable modes, and more.