<NavigationMenu>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="#" active icon={<Home className="icon-sm" />}>Home</NavigationMenu.Link>
    </NavigationMenu.Item>
    <NavigationMenu.Item value="products">
      <NavigationMenu.Trigger icon={<Package className="icon-sm" />}>Products</NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <NavigationMenu.Link href="#">All Products</NavigationMenu.Link>
        <NavigationMenu.Link href="#">Featured</NavigationMenu.Link>
        <NavigationMenu.Link href="#">New Arrivals</NavigationMenu.Link>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
    <NavigationMenu.Item value="resources">
      <NavigationMenu.Trigger icon={<BookOpen className="icon-sm" />}>Resources</NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <NavigationMenu.Link href="#">Documentation</NavigationMenu.Link>
        <NavigationMenu.Link href="#">Blog</NavigationMenu.Link>
        <NavigationMenu.Link href="#">Support</NavigationMenu.Link>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="#" icon={<Tag className="icon-sm" />}>Pricing</NavigationMenu.Link>
    </NavigationMenu.Item>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="#" icon={<Users className="icon-sm" />}>About</NavigationMenu.Link>
    </NavigationMenu.Item>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="#" icon={<Mail className="icon-sm" />}>Contact</NavigationMenu.Link>
    </NavigationMenu.Item>
  </NavigationMenu.List>
</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

<NavigationMenu.Item value="products">
  <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
  <NavigationMenu.Content>
    <NavigationMenu.Link href="#">All Products</NavigationMenu.Link>
    <NavigationMenu.Link href="#">Featured</NavigationMenu.Link>
  </NavigationMenu.Content>
</NavigationMenu.Item>

Collapsed Mode

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

<NavigationMenu orientation="vertical" collapsed>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="#"
        icon={<Home className="icon-sm" />}>
        Home
      </NavigationMenu.Link>
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu>

Active State

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

<NavigationMenu.Link href="#" active
  icon={<Home className="icon-sm" />}>
  Home
</NavigationMenu.Link>

Group Label

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

<NavigationMenu orientation="vertical">
  <NavigationMenu.List>
    <NavigationMenu.Group label="Main">
      <NavigationMenu.Item>
        <NavigationMenu.Link href="#">Home</NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.Group>
    <NavigationMenu.Group label="Settings">
      <NavigationMenu.Item>
        <NavigationMenu.Link href="#">General</NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.Group>
  </NavigationMenu.List>
</NavigationMenu>

Custom Link (asChild)

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

import Link from 'next/link'

<NavigationMenu.Link asChild active>
  <Link href="/dashboard">Dashboard</Link>
</NavigationMenu.Link>

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`	アクティブアイテム変更時のコールバック

NavigationMenu.Item

valueundefined

string

Radix識別子（horizontal用）

defaultOpenfalse

boolean

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

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

NavigationMenu.Trigger

iconundefined

ReactNode

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

chevronIcon内蔵SVG

ReactNode

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

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

NavigationMenu.Link

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

NavigationMenu.Group

labelundefined

string

グループヘッダーラベル

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

Customization

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

メガメニュー

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

カード型レイアウト

<NavigationMenu.Content>
  <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>
</NavigationMenu.Content>

Tip：NavigationMenu.Content 内のレイアウトは完全に自由です。グリッド、フレックス、カード等、プロジェクトに合わせて自由にカスタマイズしてください。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

NavigationMenu.Item

NavigationMenu.Trigger

NavigationMenu.Link

NavigationMenu.Group

Customization

メガメニュー

カード型レイアウト

Anatomy

Best Practices

推奨

避けるべき

Accessibility

キーボード操作

ARIA / WCAG

Related

Breadcrumb

Tabs

Dropdown