Docs
导航菜单

导航菜单

用于浏览网站的链接集合。

DocsAPI Reference

安装

¥Installation

pnpm dlx shadcn@latest add navigation-menu

用法

¥Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

示例

¥Examples

链接组件

¥Link Component

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

¥When using the Next.js <Link /> component, you can use navigationMenuTriggerStyle() to apply the correct styles to the trigger.

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

另请参阅 Radix UI 文档 以了解如何处理客户端路由。

¥See also the Radix UI documentation for handling client side routing.

菜单栏分页