Docs
导航菜单

导航菜单

用于导航网站的链接集合。

DocsAPI Reference

安装

pnpm dlx shadcn@latest add navigation-menu

用法

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>选项一</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>链接</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

示例

链接组件

当使用 Next.js 的 <Link /> 组件时，可以使用 navigationMenuTriggerStyle() 来为触发器应用正确的样式。

import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"
<NavigationMenuItem>
  <Link href="/docs" legacyBehavior passHref>
    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
      文档
    </NavigationMenuLink>
  </Link>
</NavigationMenuItem>

另请参见 Radix UI 文档，以处理客户端路由。

MenubarPagination