§05-09Search & Navigation

bottom nav

モバイル画面の下部に主要な移動先を並べる。

親指で届く位置に主要な画面への移動を置き、片手で行き先を切り替えられる。利用頻度の高い画面が数個に絞れるモバイルアプリに向く。

実装のポイント

項目は 3〜5 個に絞り、アイコンとラベルを併記する。現在地には aria-current を付け、iOS では env(safe-area-inset-bottom) で下端の余白を確保する。