Neumorphism UI

Navigation Menu

用于站点顶部导航，可通过触发器展开相关链接组。

预览

产品导航

打开产品菜单中的组件与主题链接，或从指南链接直接前往对应区域。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/navigation-menu

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

组合列表与项目，关联每个触发器和内容，并放置 NavigationMenuViewport。展开区域内的 NavigationMenuLink 应使用真实目标地址。

"use client";

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from "@/components/ui/navigation-menu";

export default function Example() {
  return (
    <NavigationMenu aria-label="Main navigation">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent><NavigationMenuLink href="/guides">Guides</NavigationMenuLink></NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
      <NavigationMenuViewport />
    </NavigationMenu>
  );
}

API 参考

保留Base UI导航行为，用内凹表面表示打开状态。在根组件内放置一个NavigationMenuViewport。

组件属性类型默认值说明
NavigationMenuvalue / onValueChangeNavigationMenu.Root.Props—当前打开项及变更回调。
NavigationMenuLinkrenderReactElement—通过render组合框架链接。
NavigationMenuViewportside / align / sideOffsetNavigationMenuViewportProps—设置面板位置和间距。

无障碍

  • 01

    目标使用实际href链接，并给nav提供名称。

  • 02

    测试Tab、方向键和Escape，保留焦点样式。