菜单 Menu

响应式收缩

设置 breakpoint 可触发响应式收缩。

缩起内嵌菜单

通过 collapsed 来指定菜单收起。

深色模式导航

通过 theme 指定主题，分为 light 和 dark 两种。

顶部导航菜单

设置 mode 为 horizontal 时，使用水平菜单。

标题省略增强

菜单默认使用纯 CSS 方案做单行省略，性能更轻，适合大多数导航场景。

当你需要在标题溢出时显示 Tooltip，或者复用 Ellipsis 组件的配置能力时，可以开启 ellipsis，并通过 ellipsis-props 透传 lineClamp、expandTrigger、tooltip 等属性。

悬浮按钮菜单

指定 mode 为 popButton 使用按钮组样式的悬浮菜单。

悬浮菜单

指定 mode 为 pop 可以使用悬浮菜单。

不同大小菜单

通过 style 自由指定菜单的宽度和菜单项的高度。

内嵌菜单

菜单内可以嵌入多个子项，通过 openKeys 可以设置默认打开的子项。

API

<menu> Props

参数名	描述	类型	默认值	版本
theme	菜单的主题	'light' | 'dark'	'light'
mode	菜单的模式	'vertical' | 'horizontal' | 'pop' | 'popButton'	'vertical'
level-indent	层级之间的缩进量	number	-
auto-open	默认展开所有多级菜单	boolean	false
collapsed (v-model)	是否折叠菜单	boolean	-
default-collapsed	默认是否折叠菜单	boolean	false
collapsed-width	折叠菜单宽度	number	-
accordion	开启手风琴效果	boolean	false
auto-scroll-into-view	是否自动滚动选中项目到可见区域	boolean	false
show-collapse-button	是否内置折叠按钮	boolean	false
selected-keys (v-model)	选中的菜单项 key 数组	string[]	-
default-selected-keys	默认选中的菜单项 key 数组	string[]	[]
open-keys (v-model)	展开的子菜单 key 数组	string[]	-
default-open-keys	默认展开的子菜单 key 数组	string[]	[]
scroll-config	滚动到可见区域的配置项，接收所有scroll-into-view-if-needed的参数	{ [key: string]: any }	-
trigger-props	弹出模式下可接受所有 Trigger 的 Props	TriggerProps	-
tooltip-props	弹出模式下可接受所有 ToolTip 的 Props	object	-
ellipsis	是否使用 Ellipsis 组件渲染菜单标题。默认关闭，继续走现有纯 CSS 省略方案	boolean	false
ellipsis-props	ellipsis 开启后透传给 Ellipsis 组件的属性	MenuEllipsisProps	-
auto-open-selected	默认展开选中的菜单	boolean	false	2.8.0
breakpoint	响应式的断点, 详见响应式栅格	'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'	-	2.18.0
popup-max-height	弹出框的最大高度	boolean | number	true	2.23.0

<menu> Events

事件名	描述	参数
collapse	折叠状态改变时触发	collapsed: boolean type: 'clickTrigger'|'responsive'
menu-item-click	点击菜单项时触发	key: string
sub-menu-click	点击子菜单时触发	key: string openKeys: string[]

<menu> Slots

插槽名	描述	参数
collapse-icon	折叠图标	collapsed: boolean
expand-icon-right	向右展开的图标	-
expand-icon-down	向下展开的图标	-

<sub-menu> Props

参数名	描述	类型	默认值	版本
title	子菜单的标题	string	-
selectable	弹出模式下，是否将多级菜单头也作为一个菜单项，支持点击选中等状态	boolean	false
popup	是否强制使用弹出模式，level 表示当前子菜单的层级	boolean | ((level: number) => boolean)	false
popup-max-height	弹出框的最大高度	boolean | number	true	2.23.0

<sub-menu> Slots

插槽名	描述	参数	版本
title	标题	-
expand-icon-right	向右展开的图标	-
expand-icon-down	向下展开的图标	-
icon	菜单的图标	-	2.11.0

<menu-item-group> Props

参数名	描述	类型	默认值
title	菜单组的标题	string	-

<menu-item-group> Slots

插槽名	描述	参数
title	标题	-

<menu-item> Props

参数名	描述	类型	默认值
disabled	是否禁用	boolean	false

<menu-item> Slots

插槽名	描述	参数	版本
icon	菜单的图标	-	2.11.0

MenuEllipsisProps

ellipsis-props 会直接透传给 Ellipsis 组件，便于在菜单场景下复用同一套省略配置。

参数名	描述	类型	默认值
lineClamp	最大显示行数。不传时为单行省略	number | string	-
expandTrigger	展开的触发方式	'click'	-
tooltip	省略时是否展示提示。可传入 Tooltip 属性对象	boolean | EllipsisTooltipProps	true

FAQ

<MenuItem> 和 <SubMenu> 组件的 key 属性为必填

在 <Menu> 组件中使用 <MenuItem> 和 <SubMenu> 组件时，请传入唯一的 key 属性。组件内部在进行计算时会依赖此值，如果没有赋值会导致部分场景下异常

什么时候应该开启 ellipsis

如果你只需要传统的单行省略效果，保持默认值 false 即可，渲染成本最低。

如果你需要溢出后显示 Tooltip、配置多行截断，或者想统一复用 Ellipsis 的交互能力，再开启 ellipsis 并配合 ellipsis-props 使用。