サイドバー
Sidebar
別名: サイドナビゲーション、サイドメニュー、サイドパネル、Side navigation、Sidenav、Side panel
生態（さわってみる）
一言定義
画面の脇に縦型のナビゲーション領域を常時表示し続けるUI。
分類
使う場面
- PC幅のSaaS管理画面など、常にナビゲーションを見せておきたい・切り替えの手間を省きたいとき
- 現在地（アクティブなセクション）を常時ハイライトして把握させたいとき
避ける場面
- モバイル幅で常時表示するスペースを確保できないとき（→ドロワーメニュー）
- ナビゲーション項目が少なく、常時表示するほどの分量がないとき
近縁種との比較
「常時表示か、出し入れして使うか」が横型ナビゲーションパネル系UIの一次的な分岐点で、サイドバーは画面幅に余裕のあるSaaS管理画面などで常に表示され続ける点が、ハンバーガーボタン等の操作で画面外から出し入れするドロワーメニューとの最大の違いである。開閉操作やフォーカストラップを持たない代わりに、常時ナビゲーション領域として画面幅を占有するため、モバイル幅では表示スペースを確保できずドロワーメニューへの切り替えが定石となる。
実例リンク
アクセシビリティ
- role
- nav要素 + aria-label（または見出しでラベル付け）。現在のセクションを示す項目に aria-current="page"
- キーボード操作
- 各項目をTabで移動、Enter/Spaceで選択。常時表示のため開閉操作は不要
- 補足
- ドロワーと違いフォーカストラップは不要（常時操作可能な通常のページ領域であるため）