Menu 菜单

为用户提供导航菜单，支持垂直和水平两种模式。

基础用法

垂直菜单，通过 default-active 设置默认激活的菜单项。

基础用法

水平菜单

设置 mode="horizontal" 创建水平导航菜单。

水平菜单

折叠菜单

通过 collapse 属性可以切换菜单的折叠状态。

折叠菜单

弹出层定制

通过 popper-effect 设置弹出层主题，popper-offset 调整偏移量。

弹出层定制

数据驱动

通过 options 属性可以根据数组数据直接生成菜单。

数据驱动

外部控制

通过 ref 调用组件暴露的方法来手动控制菜单状态。

外部控制

菜单分组

使用 yh-menu-item-group 对菜单项进行分组。

菜单分组

禁用菜单

通过 disabled 属性禁用菜单项或子菜单。

禁用菜单

自定义颜色

通过 background-color、text-color、active-text-color 自定义菜单颜色。

自定义颜色

Inverted 样式

通过 inverted 属性可以快速开启深色反转主题。

Inverted 样式

菜单内容很长

当菜单项或子菜单的文字内容过长时，会自动显示省略号并适应布局。

菜单内容很长

手风琴

通过 unique-opened 属性可以使菜单每次只展开一个子菜单。

手风琴

展开选中的组

使用 default-openeds 可以预置需要初始展开的子菜单标识数组。

展开选中的组

自定义节点

通过 render-label 等渲染函数或插槽，可以批量深度定制菜单节点的显示内容。

自定义节点

在 Nuxt 中使用

Menu 组件支持 router 属性，可以配合 Nuxt 的路由系统使用。

提示：设置 router 属性后，菜单将根据当前路由路径与 index 进行自动匹配激活。

Nuxt 中使用

SSR 注意事项：

✅ 完美支持服务端渲染 (SSR)，无水合错误
✅ 支持 vue-router 集成
✅ 支持折叠动画
✅ 完整的键盘导航支持

API

属性	说明	类型	默认值
mode	菜单模式	`'vertical' \| 'horizontal'`	`'vertical'`
default-active	当前激活菜单的 index	`string`	`''`
default-openeds	当前打开的 sub-menu 的 index 数组	`string[]`	`[]`
expand-all	是否展开全部菜单	`boolean`	`false`
unique-opened	是否只保持一个子菜单展开	`boolean`	`false`
menu-trigger	子菜单打开触发方式 (Popup 模式有效)	`'hover' \| 'click'`	`'hover'`
collapse	是否开启折叠模式（仅 vertical 模式）	`boolean`	`false`
collapse-transition	折叠动画是否开启	`boolean`	`true`
router	是否启用 vue-router 模式	`boolean`	`false`
root-indent	菜单第一级的缩进，缺省时使用 `indent`	`number`	—
render-extra	批量处理菜单额外部分渲染 (VNode)	`Function`	—
render-icon	批量处理菜单图标渲染 (VNode)	`Function`	—
render-label	批量处理菜单标签渲染 (VNode)	`Function`	—
responsive	是否自动收起溢出的菜单 (水平模式)	`boolean`	`false`
value	菜单当前的选中值 (支持 `v-model`)	`string \| null`	—
options	菜单配置项，支持从数据驱动生成菜单	`MenuItemData[]`	`[]`
background-color	背景色	`string`	`''`
text-color	文字颜色	`string`	`''`
active-text-color	激活项文字颜色	`string`	`''`
ellipsis	是否开启省略模式（水平模式下）	`boolean`	`true`
popper-z-index	子菜单弹出层层级	`number`	`2000`
teleported	是否将弹出菜单挂载至 body	`boolean`	`true`
gap	菜单项间距	`number`	`4`
icon-size	菜单未折叠时图标的大小	`number`	`20`
indent	菜单每级的缩进	`number`	`32`
inverted	是否使用反转样式 (深色背景)	`boolean`	`false`
key-field	数据源中 key 的字段名	`string`	`'key'`
label-field	数据源中 label 的字段名	`string`	`'label'`
ellipsis-icon	自定义省略图标 (水平模式)	`string \| Component`	—
popper-offset	弹出层的偏移量	`number`	`6`
popper-effect	Tooltip 主题	`'dark' \| 'light'`	`'light'`
close-on-click-outside	单击外部时是否折叠菜单	`boolean`	`true`
popper-class	弹出菜单的自定义类名	`string`	`''`
popper-style	弹出菜单的自定义样式	`string \| object`	`''`
show-timeout	菜单出现前的延迟	`number`	`300`
hide-timeout	菜单消失前的延迟	`number`	`300`
persistent	隐藏时是否保留子菜单 DOM	`boolean`	`true`

MenuItem Props

属性	说明	类型	默认值
index	唯一标识	`string`	— (必填)
label	显示文本	`string`	`''`
route	vue-router 路由对象	`string \| object`	`''`
disabled	是否禁用	`boolean`	`false`

MenuItemGroup Props

属性	说明	类型	默认值
title	分组标题	`string`	`''`

SubMenu Props

属性	说明	类型	默认值
index	唯一标识	`string`	— (必填)
label	显示文本	`string`	`''`
popper-class	弹出菜单的自定义类名	`string`	`''`
disabled	是否禁用	`boolean`	`false`
show-timeout	展开收起的延时	`number`	`300`
hide-timeout	收起的延时	`number`	`300`
popper-offset	弹出层偏移量	`number`	`6`

Events

事件名称	说明	回调参数
select	菜单激活回调	`(index: string, indexPath: string[], item: MenuItemData \| undefined, routeResult?: Promise<void>)`
open	子菜单展开回调	`(index: string, indexPath: string[])`
close	子菜单收起回调	`(index: string, indexPath: string[])`
update:value	value 改变时的回调 (支持 v-model)	`(value: string) => void`

Slots

插槽名	说明	组件
default	菜单内容	Menu
default	菜单项内容	MenuItem
title	分组标题	MenuItemGroup
default	分组内容	MenuItemGroup
title	子菜单标题	SubMenu
default	子菜单内容	SubMenu

Expose

名称	说明	类型
open	展开指定子菜单	`(index: string) => void`
close	收起指定子菜单	`(index: string) => void`
activeIndex	当前激活项	`Ref<string>`
openedMenus	当前展开的子菜单	`Ref<string[]>`

MenuItemData

这是用于 options 属性的数据结构：

属性	说明	类型
key	唯一标识 (同 index)	`string`
index	唯一标识 (同 key)	`string`
label	显示文本	`string`
icon	图标名称	`string`
disabled	是否禁用	`boolean`
children	子菜单数据	`MenuItemData[]`
group	是否为分组项	`boolean`

主题变量 (CSS Variables)

所有颜色变量已与全局主题系统对接，自动支持暗黑模式：

变量名	默认值	描述
`--yh-menu-bg-color`	`var(--yh-bg-color)`	菜单背景色
`--yh-menu-text-color`	`var(--yh-text-color-primary)`	菜单文字颜色
`--yh-menu-active-text-color`	`var(--yh-color-primary)`	激活状态文字颜色
`--yh-menu-hover-bg-color`	`var(--yh-color-primary-light-9)`	悬停背景色
`--yh-menu-active-bg-color`	`var(--yh-color-primary-light-9)`	激活背景色
`--yh-menu-border-color`	`var(--yh-border-color-light)`	菜单边框颜色
`--yh-menu-item-height`	`50px`	菜单项高度
`--yh-menu-icon-size`	`18px`	菜单图标大小
`--yh-menu-base-padding`	`20px`	菜单基础内边距
`--yh-menu-indicator-width`	`3px`	指示条宽度
`--yh-menu-indicator-color`	`var(--yh-menu-active-text-color)`	指示条颜色

类型导出

名称	说明
`YhMenuProps`	Menu 组件 Props 类型
`YhMenuEmits`	Menu 组件事件类型
`YhMenuSlots`	Menu 组件插槽类型
`YhMenuExpose`	Menu 组件 Expose 类型
`YhMenuMode`	菜单模式联合类型
`YhMenuTrigger`	子菜单触发方式联合类型
`YhMenuItemData`	菜单数据类型
`YhMenuItemProps`	MenuItem 组件 Props 类型
`YhMenuItemGroupProps`	MenuItemGroup 组件 Props 类型
`YhSubMenuProps`	SubMenu 组件 Props 类型
`YhMenuInstance`	Menu 组件实例类型
`YhMenuItemInstance`	MenuItem 组件实例类型
`YhMenuItemGroupInstance`	MenuItemGroup 组件实例类型
`YhSubMenuInstance`	SubMenu 组件实例类型

Inverted 模式

开启 inverted 属性后，菜单会自动切换为深色主题，使用以下覆盖变量：

--yh-menu-bg-color: var(--yh-bg-color-overlay-dark)
--yh-menu-text-color: var(--yh-text-color-secondary)
--yh-menu-hover-bg-color: var(--yh-fill-color-dark)

提示: Menu 组件融合了 Element Plus、Ant Design 和 Naive UI 的优秀设计，支持垂直/水平模式、折叠、分组、vue-router 集成等丰富功能。

Menu 菜单 ​

基础用法 ​

水平菜单 ​

折叠菜单 ​

弹出层定制 ​

数据驱动 ​

外部控制 ​

菜单分组 ​

禁用菜单 ​

自定义颜色 ​

Inverted 样式 ​

菜单内容很长 ​

手风琴 ​

展开选中的组 ​

自定义节点 ​

在 Nuxt 中使用 ​

API ​

Menu Props ​

MenuItem Props ​

MenuItemGroup Props ​

SubMenu Props ​

Events ​

Slots ​

Expose ​

MenuItemData ​

主题变量 (CSS Variables) ​

类型导出 ​

基础用法

水平菜单

折叠菜单

弹出层定制

数据驱动

外部控制

菜单分组

禁用菜单

自定义颜色

Inverted 样式

菜单内容很长

手风琴

展开选中的组

自定义节点

在 Nuxt 中使用

API

Menu Props

MenuItem Props

MenuItemGroup Props

SubMenu Props

Events

Slots

Expose

MenuItemData

主题变量 (CSS Variables)

类型导出