<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink href="#" active icon={<Home className="icon-sm" />}>Home</NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem value="products">
      <NavigationMenuTrigger icon={<Package className="icon-sm" />}>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="#">All Products</NavigationMenuLink>
        <NavigationMenuLink href="#">Featured</NavigationMenuLink>
        <NavigationMenuLink href="#">New Arrivals</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="resources">
      <NavigationMenuTrigger icon={<BookOpen className="icon-sm" />}>Resources</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="#">Documentation</NavigationMenuLink>
        <NavigationMenuLink href="#">Blog</NavigationMenuLink>
        <NavigationMenuLink href="#">Support</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#" icon={<Tag className="icon-sm" />}>Pricing</NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#" icon={<Users className="icon-sm" />}>About</NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#" icon={<Mail className="icon-sm" />}>Contact</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Variants

Horizontal (デフォルト)

ヘッダー下部やページ上部に配置する水平ナビゲーションバー。ホバーでドロップダウンが開きます。

トップバー

Vertical

ダッシュボードや管理画面のサイドバー。クリックでサブメニューが折りたたみ/展開されます。

サイドバー

Sizes

sm

高さ32px

横パディング12px

Gap8px

フォント13px

アイコン14px

md

高さ36px

横パディング14px

Gap8px

フォント14px

アイコン16px

default

高さ40px

横パディング16px

Gap8px

フォント14px

アイコン16px

lg

高さ48px

横パディング24px

Gap8px

フォント16px

アイコン16px

Size	高さ	横パディング	Gap	アイコン	フォント	プレビュー
`sm`	32px	12px	8px	14px	13px	Home About
`md`	36px	14px	8px	16px	14px	Home About
`default`	40px	16px	8px	16px	14px	Home About
`lg`	48px	24px	8px	16px	16px	Home About

Features

Sub Menus

水平モードではホバーでドロップダウン、垂直モードではクリックでアコーディオン式に展開されます。

Horizontal

Vertical

<NavigationMenuItem value="products">
  <NavigationMenuTrigger>Products</NavigationMenuTrigger>
  <NavigationMenuContent>
    <NavigationMenuLink href="#">All Products</NavigationMenuLink>
    <NavigationMenuLink href="#">Featured</NavigationMenuLink>
  </NavigationMenuContent>
</NavigationMenuItem>

Collapsed Mode

collapsed propでアイコンのみ表示。collapsedWidth propで幅をカスタマイズ可能（デフォルト: 64px）。

<NavigationMenu orientation="vertical" collapsed>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink href="#"
        icon={<Home className="icon-sm" />}>
        Home
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Active State

active propで現在のページを視覚的に強調表示し、aria-current="page"を自動設定します。

<NavigationMenuLink href="#" active
  icon={<Home className="icon-sm" />}>
  Home
</NavigationMenuLink>

Group Label

NavigationMenuGroupでアイテムをセクション分けし、label propでグループヘッダーを表示できます。

<NavigationMenu orientation="vertical">
  <NavigationMenuList>
    <NavigationMenuGroup label="Main">
      <NavigationMenuItem>
        <NavigationMenuLink href="#">Home</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuGroup>
    <NavigationMenuGroup label="Settings">
      <NavigationMenuItem>
        <NavigationMenuLink href="#">General</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuGroup>
  </NavigationMenuList>
</NavigationMenu>

Custom Link (asChild)

asChild propでNext.jsのLinkなどカスタムリンクコンポーネントを合成できます。

import Link from 'next/link'

<NavigationMenuLink asChild active>
  <Link href="/dashboard">Dashboard</Link>
</NavigationMenuLink>

API

Component Structure

NavigationMenu— Radix NavigationMenu + Collapsible

.List.ItemProps.TriggerProps.Content.LinkProps.GroupProps.Indicator.Viewport

.Listリストコンテナ

.ItemPropsメニューアイテム（value・defaultOpen）

.TriggerPropsサブメニュートリガー（icon・chevronIcon）

.Contentサブメニューコンテンツ

.LinkPropsリンク（active・asChild・icon）

.GroupPropsグループ（label対応）

.Indicatorアクティブインジケーター

.Viewportビューポート（水平のみ）

Props

Name	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	レイアウトの方向
`size`	`"sm" \| "md" \| "default" \| "lg"`	`"default"`	メニューアイテムのサイズ
`collapsed`	`boolean`	`false`	vertical専用: アイコンのみ表示（折りたたみサイドバー）
`width`	`number \| string`	`256`	vertical専用: サイドバーの幅（px数値またはCSS文字列）
`collapsedWidth`	`number \| string`	`sm:56 / md:60 / default:64 / lg:72`	vertical専用: 折りたたみ時の幅（サイズに応じた自動計算、px数値またはCSS文字列で上書き可）
`radius`	`"sm" \| "md" \| "lg" \| "xl"`	`"lg"`	ボーダーラディウス（horizontal: container/item concentric、vertical: 直接適用）
`fontWeight`	`"normal" \| "semibold"`	`"normal"`	メニューアイテムのフォントウェイト（active状態は常にsemibold）
`delayDuration`	`number`	`200`	horizontal専用: ホバーで開くまでの遅延（ms）
`skipDelayDuration`	`number`	`300`	horizontal専用: トリガー間移動時のスキップ遅延（ms）
`value`	`string`	`undefined`	アクティブメニューアイテムの値（制御モード）
`defaultValue`	`string`	`undefined`	デフォルトのアクティブ値（非制御モード）
`onValueChange`	`(value: string) => void`	`undefined`	アクティブアイテム変更時のコールバック

NavigationMenuItem

valueundefined

string

Radix識別子（horizontal用）

defaultOpenfalse

boolean

vertical専用: サブメニューの初期展開状態

Name	Type	Default	Description
`value`	`string`	`undefined`	Radix識別子（horizontal用）
`defaultOpen`	`boolean`	`false`	vertical専用: サブメニューの初期展開状態

NavigationMenuTrigger

iconundefined

ReactNode

ラベルの前に表示するアイコン

chevronIcon内蔵SVG

ReactNode

シェブロンアイコンのカスタマイズ（horizontal: ▼、vertical: ▶）

Name	Type	Default	Description
`icon`	`ReactNode`	`undefined`	ラベルの前に表示するアイコン
`chevronIcon`	`ReactNode`	`内蔵SVG`	シェブロンアイコンのカスタマイズ（horizontal: ▼、vertical: ▶）

NavigationMenuLink

activefalse

boolean

現在のページを表す（aria-current="page"）

asChildfalse

boolean

カスタムリンクコンポーネントとの合成（Radix Slot）

iconundefined

ReactNode

ラベルの前に表示するアイコン

hrefundefined

string

リンク先のURL

Name	Type	Default	Description
`active`	`boolean`	`false`	現在のページを表す（aria-current="page"）
`asChild`	`boolean`	`false`	カスタムリンクコンポーネントとの合成（Radix Slot）
`icon`	`ReactNode`	`undefined`	ラベルの前に表示するアイコン
`href`	`string`	`undefined`	リンク先のURL

NavigationMenuGroup

labelundefined

string

グループヘッダーラベル

Name	Type	Default	Description
`label`	`string`	`undefined`	グループヘッダーラベル

Customization

NavigationMenuContent に自由なJSXを配置して、メガメニューやカード型レイアウトなど柔軟にカスタマイズできます。

メガメニュー

<NavigationMenuContent>
  <div className="grid grid-cols-3 gap-4 p-4 w-[480px]">
    <div>
      <h4 className="text-xs font-semibold uppercase mb-2">
        Electronics
      </h4>
      <NavigationMenuLink href="#">
        Smartphones
      </NavigationMenuLink>
      <NavigationMenuLink href="#">
        Laptops
      </NavigationMenuLink>
    </div>
    {/* ...more columns */}
  </div>
</NavigationMenuContent>

カード型レイアウト

<NavigationMenuContent>
  <div className="grid grid-cols-2 gap-2 p-3 w-[400px]">
    <a href="#" className="block p-3 rounded-lg
      hover:bg-background-muted">
      <div className="text-sm font-semibold">
        Documentation
      </div>
      <div className="text-xs text-text-muted">
        Getting started guides and API references.
      </div>
    </a>
    {/* ...more cards */}
  </div>
</NavigationMenuContent>

Tip：NavigationMenuContent 内のレイアウトは完全に自由です。グリッド、フレックス、カード等、プロジェクトに合わせて自由にカスタマイズしてください。chevronIcon propでシェブロンアイコンも差し替え可能です。

Anatomy

Home

Products

Docs

Heighth-10 (40px)

Paddingpx-4 (16px)

Gapgap-2 (8px)

Root

ナビゲーション全体

List

アイテムリスト

Item

各ナビ項目

Trigger

ドロップダウン起動

Content

ドロップダウン内容

Link

ナビリンク

Viewport

コンテンツ表示領域

Best Practices

✓

推奨

✓サイトの主要セクションに対して使用する
✓activeを使って現在のページを明示する
✓サイドバーにはアイコン+ラベルを併用する
✓関連リンクをGroupでセクション分けする

避けるべき

✗3階層以上のネストを避ける
✗水平モードにアイテムを詰め込みすぎない
✗collapsedモードでラベルなしのアイコンを使わない
✗アクション実行用に使わない（Dropdownを使用）

Accessibility

キーボード操作

Tabメニューへフォーカス移動

Arrow Keysトリガー/リンク間を移動

Enter / Spaceリンクをアクティブ化 / コンテンツを開く

Escapeコンテンツを閉じてトリガーに戻る

ARIA / WCAG

aria-label="navigation" nav要素に設定
aria-current="page" アクティブリンクに自動設定
Radix NavigationMenu + Collapsibleによる完全なキーボードサポート
WAI-ARIA Disclosure Navigation Pattern準拠

NavigationMenu

Playground

Variants

Sizes

Features

Sub Menus

Collapsed Mode

Active State

Group Label

Custom Link (asChild)

API

Component Structure

Props

NavigationMenu

NavigationMenuItem

NavigationMenuTrigger

NavigationMenuLink

NavigationMenuGroup

Customization

メガメニュー

カード型レイアウト

Anatomy

Best Practices

推奨

避けるべき

Accessibility

キーボード操作

ARIA / WCAG

Related

Breadcrumb

Tabs

Dropdown