Nav

ヘッダーに配置する横並びナビゲーションリンク。アクティブ状態・アイコン対応を備える。

いつ使うか

ヘッダーにメインナビゲーションを配置するときに使用する
3〜7項目程度のページ切り替えリンクに使用する

いつ使わないか

サイドバー型のナビゲーションには使わない。別途サイドバーコンポーネントを使用する
パンくずリストには使わない。Breadcrumb コンポーネントを使用する
タブ切り替え（同一ページ内のコンテンツ切り替え）には使わない。Tabs コンポーネントを使用する

Usage

import { Nav, NavItem } from '@bi-shop-it/ui/nav';

<Nav>
  <NavItem href="/dashboard">ダッシュボード</NavItem>
  <NavItem isActive href="/projects">
    プロジェクト
  </NavItem>
  <NavItem href="/settings">設定</NavItem>
</Nav>;

UIProviderの設定

NavItem は UIProvider から注入されたリンクコンポーネントを使用する。Next.jsの場合は next/link を注入することで、クライアントサイドナビゲーションが有効になる。

// app/layout.tsx
import { UIProvider } from '@bi-shop-it/ui/provider';
import Link from 'next/link';

const RootLayout = ({ children }) => (
  <UIProvider linkComponent={Link}>{children}</UIProvider>
);

UIProvider を設定しない場合は、通常の <a> タグとして動作する。

Props

Nav

Prop	型	デフォルト	説明
`children`	`ReactNode`	—	NavItem を配置する

NavItem

Prop	型	デフォルト	説明
`children`	`ReactNode`	—	リンクテキスト
`href`	`string`	—	遷移先のURL
`icon`	`IconName`	—	ラベルの前に表示するアイコン名
`isActive`	`boolean`	`false`	現在のページを示すアクティブ状態
`onClick`	`MouseEventHandler`	—	クリック時のイベントハンドラ

状態

デフォルト

<Nav>
  <NavItem href="/dashboard">ダッシュボード</NavItem>
  <NavItem isActive href="/projects">
    プロジェクト
  </NavItem>
  <NavItem href="/settings">設定</NavItem>
</Nav>

アイコン付き

icon でアイコンを指定すると、ラベルの前にアイコンが表示される。

<Nav>
  <NavItem href="/dashboard" icon="Home">
    ダッシュボード
  </NavItem>
  <NavItem isActive href="/projects" icon="File">
    プロジェクト
  </NavItem>
  <NavItem href="/settings" icon="Settings">
    設定
  </NavItem>
</Nav>

アクティブ状態の切り替え

各項目をクリックすると isActive が切り替わり、アクティブ状態の視覚的な変化を確認できる。

<Nav>
  <NavItem isActive href="/dashboard">
    ダッシュボード
  </NavItem>
  <NavItem href="/projects">プロジェクト</NavItem>
  <NavItem href="/settings">設定</NavItem>
</Nav>

アクセシビリティ

コンポーネントが内部で処理すること

<nav> 要素でラップし、スクリーンリーダーがナビゲーションランドマークとして認識する
isActive 時に aria-current="page" を自動付与し、現在のページを支援技術に伝達する
装飾アイコンに aria-hidden="true" を自動付与し、スクリーンリーダーから隠す

利用者が対応すること

ページ内に複数の <nav> がある場合は、Nav を含むラッパーに aria-label を付与して区別すること
リンクテキストは遷移先が明確に伝わる内容にすること（「こちら」は避ける）
現在のページに対応する NavItem には必ず isActive を指定すること

Nav