NavigationMenu
navigation-menu导航菜单 · Base UI navigation-menu 薄包(mega 面板/共享 Viewport 尺寸形变) + 触发器/内容/链接 + chevron 旋转
用法
基础用法
Trigger + Content 组合悬停展开共享浮层；纯链接项直接放 Link 不带 Content。
tsx
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem value="resources">
<NavigationMenuTrigger>资源</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="w-56">
<li><NavigationMenuLink href="#" className="block px-3 py-2">文档中心</NavigationMenuLink></li>
<li><NavigationMenuLink href="#" className="block px-3 py-2">组件库</NavigationMenuLink></li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem value="pricing">
<NavigationMenuLink href="#pricing">价格</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Mega 面板
Content 内自由布局，可放多列卡片网格做大型导航面板，面板尺寸随内容自动形变。
tsx
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem value="products">
<NavigationMenuTrigger>产品</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid w-[28rem] grid-cols-2 gap-1">
{products.map((p) => (
<NavigationMenuLink key={p.title} href="#" className="block px-3 py-2">
<div className="font-medium text-foreground">{p.title}</div>
<div className="mt-0.5 text-xs text-muted">{p.desc}</div>
</NavigationMenuLink>
))}
</div>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>零延迟开启
delay={0} 让悬停即开，无开启延迟。
tsx
<NavigationMenu delay={0}>{/* ...List */}</NavigationMenu>何时用
站点顶部主导航，需要把多个入口归到「产品 / 资源」等下拉里，且下拉内容是 mega 面板（多列卡片、图标+描述）时用。纯链接横排不带下拉用 Navbar；点击触发的指令式下拉菜单（编辑/删除等动作）用 Menu；桌面应用的 File/Edit/View 菜单条用 Menubar。
导入
ts
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from "@hulianui/ui"Props
根 NavigationMenu 透传 Base UI NavigationMenu.Root，各子件透传对应 Base UI 部件，均叠加 className。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | any | — | 受控：当前展开项的 value |
| defaultValue | any | — | 非受控初始展开项 |
| delay | number | 100 | 悬停到开启的延迟(ms)，0 为 hover 即开 |
| closeDelay | number | — | 移出到关闭的延迟(ms) |
| orientation | "horizontal" | "vertical" | "horizontal" | 菜单条方向 |
| className | string | — | 根容器样式 |
子件（NavigationMenuItem 需 value；NavigationMenuLink 透传 href 等锚点属性）均接受 className 并透传 Base UI 同名部件属性。
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (value) => void | 展开项变化回调（透传 Base UI NavigationMenu.Root） |
禁忌 / 坑
- [[base-ui-navigation-menu-content-must-stay-in-flow-for-popup-size-measure]]：别给激活的
NavigationMenuContent加position: absolute。Base UI 靠测量内容的自然尺寸来驱动共享 Viewport 的--popup-width/height形变；脱离文档流会让自然尺寸变 0，面板塌成 ~2×2px 看不见（构建和单测都过、屏上却空白）。 - 纯链接项（无下拉）直接在
NavigationMenuItem里放NavigationMenuLink，不要套 Trigger/Content。
相关
Playground
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem value="products">
<NavigationMenuTrigger>产品</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid grid-cols-2 gap-1">{/* NavigationMenuLink 列表 */}</div>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem value="pricing">
<NavigationMenuLink href="/pricing">价格</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>