ボトムナビゲーション(タブバー)

Bottom navigation

別名: タブバー、ボトムタブバー、ボトムタブ、Bottom nav、Tab bar、Navigation bar

生態(さわってみる)

一言定義

モバイル画面の下部に主要な行き先を常時固定表示するナビゲーションUI。

分類

使う場面

  • モバイルアプリ/PWAで主要な行き先が3〜5個程度に絞れるとき
  • 親指の可動域を考え、画面下部に主要動線を置きたいとき

避ける場面

  • PC幅の画面(→サイドバーやヘッダーナビゲーション)
  • 行き先が5個を超えるとき(→ハンバーガーメニュー等に集約)

近縁種との比較

スティッキーヘッダーが画面上部に固定されるのに対し、ボトムナビゲーションは画面下部に固定される点が対照的で、モバイルでは親指の可動域を考慮してこちらが好まれる。両者は「常に見えている固定要素」という共通点を持ちつつ、上部は検索やブランドなどの補助要素、下部は主要な行き先の切り替えという役割分担で併用されることが多い。見た目が近いタブとは、タブがページ内のコンテンツパネルを切り替えるナビゲーションであるのに対し、ボトムナビゲーションは別々の画面(ルート)そのものを切り替える、より上位のナビゲーション単位である点で区別される。

実例リンク

アクセシビリティ

role
nav要素 + aria-label。現在表示中のタブに aria-current="page"
キーボード操作
各タブをTabで移動、Enter/Spaceで切り替え
補足
親指操作を想定し、タップ領域は44px角以上を確保する