ナビゲーション
タブバー・ボトムナビ・ハンバーガーメニューなど、ユーザーがページやコンテンツを切り替えるナビゲーションUIの比較
このページでわかること
- ブレッドクラム・タブバー・ハンバーガーメニュー・水平メニュー・サイドナビ・ページネーションの6種類のナビゲーションUIの違いと使い分け
- Mantine・Ant Design・shadcn/ui・Chakra UI・MUI・CSS/Tailwind での実装比較
- モバイル/デスクトップ、浅い階層/深い階層など、シーン別の選定基準
- 実際の組み合わせパターンと、選定時によくある疑問への回答
ナビゲーションUIとは
ナビゲーションUIは、サイトやアプリの構造をユーザーに伝え、目的のコンテンツまで最小のステップで導くための要素群。情報設計（IA）の成果を具体化するUIであり、サイトの使いやすさを直接左右する。
大きくは「グローバルナビゲーション」（サイト全体の構造を示す）と「ローカルナビゲーション」（カテゴリ内の構造を示す）に分かれる。グローバルナビはヘッダーやサイドバーに常設され、ローカルナビはセクション内に置かれることが多い。デバイス（モバイル/デスクトップ）や階層の深さによって、適したUIパターンが変わる。
本ページでは、React で使われる代表的なナビゲーションUIを6種類取り上げ、ライブラリごとの実装と特性を比較する。
目的別の選び方
どのナビゲーションUIを採用するかは、デバイス・階層の深さ・主な用途で決まる。下表は典型的な選定基準。
| UI種類 | モバイル | デスクトップ | 浅い階層(1-2) | 深い階層(3+) | 主な用途 |
|---|---|---|---|---|---|
| ブレッドクラム | ◯ | ◎ | △ | ◎ | 現在地表示・戻り経路 |
| タブバー / ボトムナビ | ◎ | ◯ | ◎ | △ | コンテンツ切替・主要機能切替 |
| ハンバーガーメニュー | ◎ | △ | ◯ | ◯ | 全機能の折りたたみ |
| 水平メニュー | △ | ◎ | ◎ | ◯ | サイトのグローバルナビ |
| サイドナビ（NavLink） | △ | ◎ | ◯ | ◎ | 管理画面・ドキュメント |
| ページネーション | ◎ | ◎ | − | − | 一覧データの区切り |
◎ 推奨 / ◯ 適合 / △ 条件付き / − 該当なし
ブレッドクラム（Breadcrumb）
詳細を見る →現在のページ階層を示すブレッドクラムUIの実装比較。 セパレーター・アイコン・ドロップダウン・ルーティング連携をインタラクティブに確認
- 🏠 ホーム
- ›カテゴリ
- ›ブレッドクラム
タブバー / ボトムナビ（Tab Bar / Bottom Navigation）
詳細を見る →コンテンツ切り替えやモバイルのボトムナビゲーションに使うタブUIの実装比較。 バリアント・配置・アイコン統合・レスポンシブ対応をインタラクティブに確認
ハンバーガーメニュー（Hamburger Menu）
詳細を見る →モバイル画面でナビゲーションを折りたたむハンバーガーメニューUIの実装比較。 アイコンアニメーション・Drawer連携・レスポンシブ制御などをインタラクティブに確認
水平メニュー（Horizontal Menu）
詳細を見る →ヘッダーに配置する水平ナビゲーションメニューの実装比較。 サブメニュー・アクティブ状態・テーマ切替・レスポンシブ対応をインタラクティブに確認
サイドナビゲーション（NavLink）
詳細を見る →サイドバー内のナビゲーションリンクUIの実装比較。 アクティブ状態・アイコン・ネスト・バッジ・無効状態など実践的なパターンをインタラクティブに確認
ページネーション（Pagination）
詳細を見る →データ一覧やコンテンツのページ送りに使うページネーションUIの実装比較。 siblings・boundaries・ページサイズ変更・シンプルモードなどをインタラクティブに確認
組み合わせパターン
実際の画面では、複数のナビゲーションUIを組み合わせて使うことが多い。代表的なパターンを示す。
- 管理画面・ダッシュボード: サイドナビ + ブレッドクラム + ページネーション
- メディアサイト・ブログ: 水平メニュー + ブレッドクラム + ページネーション
- モバイルアプリ: ハンバーガーメニュー + タブバー（ボトムナビ）
- ECサイト: 水平メニュー + サイドナビ（カテゴリ） + ブレッドクラム + ページネーション
よくある質問
ハンバーガーメニューはモバイル以外でも使うべき？
基本はモバイル向け。デスクトップでは「メニューが隠れていること」自体が認知コストになるため、水平メニューを推奨する。ただし制作ツールのように画面を広く使いたい場合や、メニュー項目が極端に多い場合は採用するケースもある。
タブバーとセグメントコントロールの違いは？
タブバーは画面（ビュー）の切り替えに使われ、セグメントコントロールは表示方法やフィルタの切り替えに使われる。Mantineでは Tabs と SegmentedControl で別コンポーネントとして提供されている。
ブレッドクラムは何階層から必要？
3階層以上のサイトで効果が大きい。2階層以下では戻るボタンや上位ナビゲーションで十分なケースが多い。Eコマースのカテゴリ階層が深いサイトでは必須に近い。
サイドナビとハンバーガーメニューは併用できる？
できる。デスクトップではサイドナビを固定表示し、モバイルではハンバーガーで開閉するレスポンシブパターンが定番。Mantine AppShell、shadcn/ui Sheet などがこのパターンを標準サポートする。
Zenn