Navigation-Menu

ヘッダー直下に配置する水平タブ型のナビゲーション。アイコン＋ラベルのタブを横並びに配置し、アクティブタブを下線と色で示す。

プレビュー

タブをクリックするとアクティブ状態が切り替わります。

実装例

import {
  NavigationMenu,
  NavigationMenuItem,
} from "@/components/NavigationMenu";

<NavigationMenu ariaLabel="メインメニュー">
  <NavigationMenuItem icon="home"          label="ホーム"    active href="/" />
  <NavigationMenuItem icon="phone"         label="会話履歴"  href="/calls" />
  <NavigationMenuItem icon="person-circle" label="顧客管理"  href="/customers" />
  <NavigationMenuItem icon="message"       label="SMS管理"   href="/sms" />
  <NavigationMenuItem icon="person"        label="マイページ" href="/mypage" />
</NavigationMenu>

仕様

Navigation-Menu (コンテナ)

displayflex (横並び)
heightauto (Item の 40px に依存)
background--bg-surface (#FFFFFF)
shadow--shadow-layer-1 (0 1px 2px rgba(31,41,55,.3))
padding0 --spacing-xxl (0 64px)

Item

height40px
padding0 --spacing-xs (0 16px)
gap (icon ↔ label)--spacing-xxs (8px)
icon size20px
label14px (--font-size-s) / Regular / --text-secondary (#6B7280)
Active border-bottom2px solid --action-primary (#0066CC)
Active text--action-primary (#0066CC)
Hover bgrgba(31, 41, 55, 0.08)

利用基準

使うべき時

ヘッダーの直下、コンテンツエリアの上部に配置する
主要なセクション間の切り替えに使用する
アクティブなタブは 1 つだけにする
ラベルは 2〜6 文字程度の簡潔な日本語を推奨

使わない時

ページ内のコンテンツ切り替え (タブ型 UI) に使う → Tabs コンポーネントを使用
アクション (保存・削除など) のトリガーとして使う → Button を使用
アクティブなタブを同時に 2 つ以上にする

Figma

Navigation-Menu ↗