NavigationMenu 导航菜单
组织站点的主要导航入口，并支持带说明的多级内容面板。
使用概览
适合使用
- 产品站或文档站有多个清晰栏目及二级入口时。
不建议使用
- 应用命令多于页面链接，或移动端空间不足以展开大型面板时。
真实示例
产品主导航菜单
从产品栏目展开数据分析页面入口。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/navigation-menu.json基础用法
导入
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from "@richardqiu/quartz/navigation-menu";JSX
<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>产品</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/products/analytics">数据分析</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>状态与控制摘要
默认
键盘焦点可见
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
delayDuration | number | 200 | 控制指针进入后打开导航内容的等待时间。 |
组合结构
- 01
NavigationMenu - 02
NavigationMenuList - 03
NavigationMenuItem - 04
NavigationMenuTrigger - 05
NavigationMenuContent - 06
NavigationMenuLink
键盘约定
- 方向键遍历顶层导航与已展开链接，Enter 或空格键打开，Escape 关闭。
可访问性契约
- 链接保留原生导航语义与活动状态。
- 触发器通过 Radix 导航原语暴露受控展开关系。