Navigation Menu
保留Base UI导航行为，用内凹表面表示打开状态。在根组件内放置一个NavigationMenuViewport。
@neumorphism-ui/navigation-menu预览
从菜单选择目标区域。
组件 · 56
主题 · 5
安装
安装: navigation-menu
npx shadcn@latest add @neumorphism-ui/navigation-menuCLI 会依次处理 npm 依赖、base token、utils 和组件源码。
首次使用此 Registry？请先完成 namespace 配置 。
用法
Import
Navigation Menu import 代码
"use client";
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuViewport } from "@/components/ui/navigation-menu";Example
Navigation Menu 用法代码
export default function Example() {
return <div><NavigationMenu aria-label="产品"><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>产品</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="#navigation-guide">指南</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList><NavigationMenuViewport /></NavigationMenu><p id="navigation-guide">指南</p></div>;
}API 参考
| 组件 | 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
NavigationMenu | value / onValueChange | NavigationMenu.Root.Props | — | 当前打开项及变更回调。 |
NavigationMenuLink | render | ReactElement | — | 通过render组合框架链接。 |
NavigationMenuViewport | side / align / sideOffset | NavigationMenuViewportProps | — | 设置面板位置和间距。 |
无障碍
- 01
目标使用实际href链接，并给nav提供名称。
- 02
测试Tab、方向键和Escape，保留焦点样式。