Docs
ナビゲーションメニュー

ナビゲーションメニュー

Web サイトをナビゲートするためのリンクのコレクション

DocsAPI Reference

インストール

npx shadcn-ui@latest add navigation-menu

使用法

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>アイテム 1</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>リンク</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

例

Link コンポーネント

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 のドキュメント も参照してください。