🌐 Nodejs.cn
新建

导航菜单

PreviousNext

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

Radix UIBase UI
"use client"

import * as React from "react"

安装

🌐 Installation

pnpm dlx shadcn@latest add navigation-menu

用法

🌐 Usage

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

链接组件

🌐 Link Component

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

🌐 Use the render prop to compose a custom link component such as Next.js Link.

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

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

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

🌐 See the Base UI Navigation Menu documentation for more information.