サイドバー
Sidebar画面の脇に縦型のナビゲーション領域を常時表示し続けるUI。
○ 使う場面
- PC幅のSaaS管理画面など、常にナビゲーションを見せておきたい・切り替えの手間を省きたいとき
- 現在地（アクティブなセクション）を常時ハイライトして把握させたいとき
× 避ける場面
- モバイル幅で常時表示するスペースを確保できないとき（→ドロワーメニュー）
- ナビゲーション項目が少なく、常時表示するほどの分量がないとき
別名
サイドナビゲーション、サイドメニュー、サイドパネル
近縁種との比較
「サイドバー」は英語のside（脇）とbar（帯状の領域）を組み合わせた名称で、画面の脇に縦に伸びる帯状の領域という、見たままの形状に由来する呼び名である。
| 近縁種 | 違い・使い分け |
|---|---|
| ドロワーメニュー | 画面幅に余裕のあるSaaS管理画面などで常に表示され続けるサイドバーに対し、ドロワーメニューはハンバーガーボタン等の操作で画面外から出し入れする点が横型ナビゲーションパネル系UIの一次的な分岐点で、モバイル幅では表示スペースを確保できずドロワーメニューへの切り替えが定石となる。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション