导航菜单 Navigation Menu

用于导航网站的一组链接。

"use client"

import * as React from "react"

安装


pnpm dlx shadcn@latest add navigation-menu

使用方法

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>项目一</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>链接</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

链接组件

使用 asChild 属性来组合自定义链接组件，例如 Next.js 的 Link。

import Link from "next/link"
 
import {
  NavigationMenuItem,
  NavigationMenuLink,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
 
export function NavigationMenuDemo() {
  return (
    <NavigationMenuItem>
      <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
        <Link href="/docs">文档</Link>
      </NavigationMenuLink>
    </NavigationMenuItem>
  )
}

API 参考

有关更多信息，请参阅 Radix UI 导航菜单文档。

原生选择框分页

安装使用方法链接组件 API 参考