# NavigationMenu 多级导航
网站式多级导航栏：顶级触发器悬停/点击打开统一视口面板（大面板多列链接卡），支持延迟开合、受控打开项、键盘导航，`href` 叶子项渲染为链接。
## 基础用法（大面板）
尚未选择
## 受控打开（value + oas-change）
> **事件语义**：`oas-change` 是**开合**语义——点组展开/收起面板即派发（`value` 为打开的顶级项）；叶子项选择走 `oas-select`。宿主容器（popover/drawer 等）里内嵌时，勿监听 `oas-change` 做「跳转并关闭容器」——那会在面板刚展开时就把容器关掉；关闭时机应监听 `oas-select`。
打开产品
打开资源
关闭
当前打开：products
## 延迟开合
## 垂直方向
## 多列网格
## 图标颜色（iconColor）
面板链接卡图标支持 `iconColor` 字段（显式固定图标色，优先于选中/禁用态默认色；缺省 `currentColor` 随文字色）。子元素声明式通道用 `icon-color` 属性。
## 遮罩 + 保挂载 + 箭头
backdrop 打开时显示遮罩；keep-mounted 关闭后保留面板 DOM；arrow 显示指向箭头。
## 禁用项
## 箭头跟随触发器
弹出层箭头默认停在不指向任何触发器；打开面板后箭头位置由 JS 按当前触发器的位置/宽度写入，切换触发器时箭头跟随移动。
依次悬停/点击「产品」「资源」：箭头跟随指向打开的触发器。
## 碰撞回折（边界是视口）
面板缺省**书写起点侧缘跟随当前触发器**（LTR 左缘 / RTL 右缘）：导航栏与外部容器都不是裁切边界，面板允许越出它们（导航栏 shrink-to-fit 时更是必然越出）。只有「跟随后的面板」会**越出视口右缘**时才回折——改为右缘贴触发器右缘、仍不越出视口；面板下缘会越出视口时向上弹（`flip-up`）；空间充足时保持起点侧缘跟随的正常位置。把浏览器窗口压窄到面板放不下，即可看到回折。
容器只有 120px（比面板窄）、导航栏自身也只比触发器略宽，而面板宽度随内容撑开（下限为内容最小宽度 min-content，不写死固定宽度）：面板越出容器与导航栏都不回折、不被裁切（两者都不是裁切边界），左缘始终跟随触发器。回折只由视口触发——把浏览器窗口压窄到面板放不下时才会右对齐。
## Sub 二级级联
面板项带 `sub` 字段（二级导航数据）时渲染「二级触发器」，点击在面板内打开覆盖式二级面板（slide-in 级联动画）：`Esc` / `←` 逐层回退到主面板（焦点回触发器），再 `Esc` 关闭整个面板；`↓` 在二级链接间移动、跳过禁用项，`Enter` 选择。与 inline section 折叠并存（`sub` 优先于 `children`）。
点「学习中心」在面板内展开二级导航
## 营销位插槽（panel-footer）
`slot="panel-footer"` 在面板底部渲染营销位容器（CTA 卡片等），有内容才显示；与面板联动打开，`--vp-h` 高度过渡自动把营销位计入。
面板底部出现营销区（仅在有内容时渲染）。
## 子元素声明式通道
除 `items` JSON 外，可用 `` 子元素声明式书写（`items` 属性**显式设置时优先**）。默认插槽文本为 label；属性对齐 `NavItem`/`MenuItem` 标量字段（`value`/`href`/`target`/`icon`/`description`/`active`/`disabled` 等）。直接子项默认递归为 `children`（面板内 inline 二级子导航）；带 `sub` 属性的项其子项解析为面板内覆盖式二级导航；`` 为分组载体（`type: "group"` 语义，组内子项平铺进网格）。子元素增删、属性与文本变化会自动重渲染。
产品
组件
文档
定价
关于
尚未选择
产品
组件
主题
学习中心
文档
教程
带 `sub` 属性的项：子项渲染为面板内覆盖式二级导航；分组载体内的子项平铺进网格。
## API
### oas-navigation-menu
#### 属性
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `arrow` | 弹出层指向箭头，默认显示；`arrow="false"` 隐藏 | `string` | `true` |
| `backdrop` | 打开时显示遮罩（点击遮罩关闭） | `boolean` | — |
| `columns` | 面板网格列数，默认 2（大面板多列链接卡） | `string` | `2` |
| `delay-duration` | hover 开合延迟（毫秒），默认 200；点击/键盘立即生效不受影响 | `string` | `200` |
| `items` | 导航项 JSON（层级结构；叶子项可带 `description` 描述与 `icon` 图标渲染大面板链接卡） | `string` | `[]` |
| `keep-mounted` | 关闭时保留面板 DOM 不销毁（供爬虫索引/SEO） | `boolean` | — |
| `loop` | 顶级方向键循环导航开关，缺省 `true`（边界循环）；显式 `loop="false"` 时边界停止（与 menubar 对齐） | `string` | — |
| `orientation` | 布局方向：`horizontal`（默认）/ `vertical`（面板在触发器右侧） | `string` | `horizontal` |
| `skip-delay-duration` | 跳过延迟窗口（毫秒），默认 300：关闭后窗口内再次 hover 其他项直接打开跳过延迟 | `string` | `300` |
| `value` | 受控打开项（顶级触发器 value，空字符串 = 关闭；存在时打开态以属性为准，交互仅派发 `oas-change` 由宿主更新） | `string` | — |
#### 事件
| 事件 | 说明 |
| --- | --- |
| `oas-change` | 打开项变化（开合语义：点组展开/收起即派发，非叶子选择），`detail: { value }`（value 为打开的顶级项 value，空字符串 = 关闭）；叶子项选择监听 `oas-select`，勿以此事件做跳转/关闭容器 |
| `oas-select` | 选择某项（顶级叶子链接、面板链接卡或二级子导航链接），`detail: { value }` |
#### 插槽
| 名称 | 说明 |
| --- | --- |
| `panel-footer` | 面板底部营销位插槽：`