Menu 菜单
独立的菜单列表，支持选中态与键盘导航。
基础用法
基础用法
示例代码
默认选中
默认选中（value 回显）
示例代码
禁用项
禁用项
示例代码
多级子菜单
带 children 的菜单项显示展开箭头（›），点击或悬停展开子菜单，子菜单缩进展示；键盘 ArrowRight 进入、ArrowLeft 返回。
多级子菜单
示例代码
水平导航
mode="horizontal" 时菜单项横排，呈顶部导航条样式；一级子菜单向下浮出，二级及以上仍向右浮出。
水平导航（顶部导航条样式）
示例代码
收起态
collapsed（仅 vertical 生效）将菜单收窄为只显示图标，悬停或点击图标项时子菜单向右浮出，子菜单内仍为完整菜单。
收起态（只显示图标）
示例代码
分组
type: "group" 的菜单项渲染为带组标题的分区（组标题小字、次要色、不可点），组内子项平铺在同一层，可继续混入子菜单与分隔线。
分组
示例代码
带图标
icon 使用 @oas-isui/icons 的图标名（iconRegistry），以内联 SVG 渲染在文字左侧。
带图标
示例代码
分隔线
type: "divider" 渲染一条细分隔线，不可点、不参与键盘导航。
分隔线
示例代码
暗色菜单
theme="dark" 使菜单局部使用暗色 token（深背景 + 浅文字），独立于全局主题；不设置时跟随全局主题。
暗色菜单
示例代码
选择事件
选择事件
示例代码
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
collapsed | 收起态（仅 vertical）：只显示图标，子菜单向右浮出 | — | — |
items | 菜单项 JSON | string | [] |
mode | 布局模式：vertical 纵向菜单 / horizontal 顶部导航条 | — | — |
theme | 局部主题：dark 使用暗色 token（独立于全局主题） | — | — |
value | 当前选中值 | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-select | 选择某项，detail: { value } |
MenuItem 字段：
| 字段 | 说明 | 类型 |
|---|---|---|
label | 菜单项文字 | string |
value | 选中值 | string |
type | 菜单项类型：item（默认）/ group（分组标题）/ divider（分隔线） | string |
icon | 图标名（@oas-isui/icons 的 iconRegistry 键） | string |
disabled | 禁用该项 | boolean |
children | 子菜单项数组，结构与父项一致（可继续嵌套） | MenuItem[] |
children 为可选子菜单项数组；有 children 的项点击/悬停展开子菜单，选中态只落在叶子项。group 的 children 平铺展示在同一层，组标题不可点、不参与键盘导航；divider 不可点、不参与键盘导航。
键盘导航：方向键移动（自动跳过组标题与分隔线）、Enter 选择（含子菜单的项 Enter/ArrowRight 进入）、Home / End 跳转、ArrowLeft 返回父级；role="menu" + menuitemradio（子菜单父项为 menuitem），选中项显示对勾。