Menu 导航菜单

为页面、侧边栏和应用顶部提供导航，使用 Vue 组件的声明式 props、v-model 和事件风格。

配置式 API

为什么不暴露子组件命名空间

ccui 的 <c-menu> 走配置式 API：所有菜单项、子菜单、分组、分割线都通过 items: MenuItem[] prop 用 type 字段表达，不暴露 Menu.SubMenu / Menu.ItemGroup / Menu.Divider 子组件命名空间（与 ccui「平铺独立顶层组件，不挂静态属性」原则一致）。

Menu 数据结构高度规整（树形 + 类型枚举），配置式 API 在动态菜单（如基于后端权限）场景比模板式更简洁；模板式如 <c-sub-menu> 等子组件如有强需求，留作后续演进项。

各菜单项类型通过 items.type 区分：

`type`	形状	说明
`'item'`	`{ key, label, icon? }`	普通菜单项（默认）
`'submenu'`	`{ key, label, type: 'submenu' \| undefined, children: MenuItem[] }`	含 `children` 即为子菜单
`'group'`	`{ key, label, type: 'group', children: MenuItem[] }`	分组容器（不可点）
`'divider'`	`{ key, type: 'divider' }`	分割线

type 字段缺省时自动推断：有 children 视为 'submenu'，无 children 视为 'item'。

基本使用

内联子菜单

默认展开与默认选中

适合只需要初始化状态的场景，后续由组件内部状态维护。需要由业务状态接管时，使用 v-model:selected-keys 和 v-model:open-keys。

多选菜单

分组、分割线和额外内容

暗色主题和收起

参数	类型	默认值	说明
mode	`vertical` / `horizontal` / `inline`	`vertical`	菜单类型
theme	`light` / `dark`	`light`	主题
items	`MenuItem[]`	`[]`	菜单数据
selectedKeys	`(string \| number)[]`	`[]`	当前选中的菜单项，支持 `v-model:selected-keys`
defaultSelectedKeys	`(string \| number)[]`	`[]`	默认选中的菜单项
openKeys	`(string \| number)[]`	`[]`	当前展开的子菜单，支持 `v-model:open-keys`
defaultOpenKeys	`(string \| number)[]`	`[]`	默认展开的子菜单
inlineIndent	`number`	`24`	inline 模式下每级缩进
collapsed	`boolean`	`false`	收起菜单，保留兼容属性
inlineCollapsed	`boolean`	`undefined`	inline 模式收起状态，优先级高于 `collapsed`
multiple	`boolean`	`false`	是否允许多选
selectable	`boolean`	`true`	是否允许选中菜单项
disabled	`boolean`	`false`	是否禁用整个菜单
accordion	`boolean`	`false`	是否只展开一个顶层子菜单
forceSubMenuRender	`boolean`	`false`	是否强制渲染未展开的子菜单 DOM
triggerSubMenuAction	`click` / `hover`	`click`	子菜单展开触发方式

MenuItem

interface MenuItem {
  key: string | number
  label?: VNodeChild
  title?: string
  icon?: string
  disabled?: boolean
  danger?: boolean
  extra?: VNodeChild
  type?: 'item' | 'submenu' | 'group' | 'divider'
  children?: MenuItem[]
}

Events

事件	说明
update:selectedKeys	选中项变化，用于 `v-model:selected-keys`
update:openKeys	展开项变化，用于 `v-model:open-keys`
click	点击菜单项，参数为 `MenuInfo`
select	选中菜单项，参数为 `MenuInfo`
deselect	多选模式下取消选中，参数为 `MenuInfo`
open-change	子菜单展开状态变化，参数为 `(openKeys, MenuOpenInfo)`
openChange	`open-change` 的 camelCase 事件别名

键盘交互

ArrowUp / ArrowDown：在可见菜单项中移动焦点。
ArrowLeft / ArrowRight：在水平菜单中移动焦点，在子菜单上收起或展开。
Enter / Space：选中当前菜单项或切换当前子菜单。

Menu 导航菜单 ​

配置式 API ​

基本使用 ​

内联子菜单 ​

默认展开与默认选中 ​

多选菜单 ​

分组、分割线和额外内容 ​

暗色主题和收起 ​

Menu Props ​

MenuItem ​

Events ​

键盘交互 ​