组件 · 导航

Menu 菜单

纵向/横向菜单，支持 SubMenu 与选中态。

入口 @selrux/ui/menu · 源码 src/components/menu/index.ts · 1 个组件 · 发布状态 preview

使用建议

避免：与 DropdownMenu 触发菜单混淆
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

import { Menu, findSubMenuOpenPath, resolveExclusiveParentOpenKeys } from '@selrux/ui/menu';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

内嵌菜单

mode="inline"，子菜单在原位展开，适合侧栏。

水平菜单

mode="horizontal"，适合顶栏导航。

收起状态

inlineCollapsed 时只显示图标位，悬停弹出子菜单。

受控选择与展开

selectedKeys / onSelect、openKeys / onOpenChange 受控并显示；inlineIndent 缩进；selectable={false} 仅导航不保留选中；size 尺寸。

选中 list；展开 orders

API

属性覆盖：示例用到 12 / 12 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

主题化导航菜单。

属性	说明	类型	默认值
`size`	视觉尺寸；缺省跟随 ConfigProvider。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`items`	菜单内容（数据驱动）。	`ItemType[]`	-
`mode`	菜单类型。	`"inline" \| "horizontal" \| "vertical"`	-
`selectedKeys`	受控选中项。	`string[]`	-
`defaultSelectedKeys`	非受控初始选中。	`string[]`	-
`openKeys`	受控展开项。	`string[]`	-
`defaultOpenKeys`	非受控初始展开。	`string[]`	-
`inlineCollapsed`	inline 是否收起为图标栏。	`boolean`	-
`inlineIndent`	inline 每级缩进（px）。	`number`	-
`selectable`	是否允许选中。	`boolean`	-
`onClick`	点击菜单项。	`((info: MenuInfo) => void)`	-
`onSelect`	选中回调；同值不重复。	`((info: MenuSelectInfo) => void)`	-
`onOpenChange`	展开变化。	`((openKeys: MenuKey[]) => void)`	-
`children`	复合子节点（首版以 items 为主；保留扩展位）。	`ReactNode`	-

另有 277 项原生属性与事件继承自 HTMLAttributes，原样透传。

导出类型：ItemType、MenuDividerType、MenuInfo、MenuItemGroupType、MenuItemType、MenuKey、MenuMode、MenuProps、MenuSelectInfo、MenuSize、SubMenuType

函数与常量

名称	说明	签名 / 类型
`findSubMenuOpenPath`	查找子菜单 key 从根到自身的展开路径（仅含 submenu key，不含 group）。	`(items: ItemType[] \| undefined, target: MenuKey) => MenuKey[] \| null`
`resolveExclusiveParentOpenKeys`	手风琴 openKeys：同级一级互斥，但保留通向新开节点的祖先路径。 - 打开三级 `perm`：`['sys']` → `['sys','perm']`（不会只剩 `perm`） - 切换到另一一级 `biz`：→ `['biz']`（关掉系统分支） - 仅关闭某级：沿用 `nextOpenKeys`	`(items: ItemType[] \| undefined, prevOpenKeys: readonly MenuKey[], nextOpenKeys: readonly MenuKey[]) => MenuKey[]`