ボトムナビゲーションとは

画面の下部に固定表示される、アイコンとラベルを並べたナビゲーションバー。スマホアプリでよく使われる。

概要

スマホアプリでよく見かける、画面の下部に固定表示されるナビゲーションです。アイコンと短いラベルを 3〜5 個並べ、今どの画面を表示しているかが一目で分かるようにします。スマホは片手で操作することが多いため、画面上部より親指の届きやすい下部に主要な移動先を置く目的で使われます。

別名

表記ゆれ：ボトムナビゲーション、タブバー、ボトムナビ、下部固定メニュー、bottom navigation、tab bar

iOS の標準部品としては「タブバー」という呼び方が定着しています。Android や Web デザインの文脈では「ボトムナビゲーション」が一般的です。

AI への伝え方

「ボトムナビゲーションを付けて」で通じます。並べる項目の数とアイコン、現在地の表示方法（色を変える、ラベルを太字にするなど）を伝えると仕様がぶれません。スマホ幅だけに表示して PC 幅では非表示にしたい場合は、その条件も伝えておくと安心です。

似たパーツとの違い

「タブ」は 1 つの画面の中でコンテンツを切り替える部品で、ページ自体は移動しません。ボトムナビゲーションは画面（ページ）そのものを切り替える点が異なります。「ドロワーメニュー」は普段は隠れていてボタンを押したときだけ開くのに対し、ボトムナビゲーションは常に画面に表示されたままという違いがあります。

デモ

コード

HTML

<div class="bottom-navigation-demo">
  <main class="bottom-navigation-demo__body">
    <p>下部のナビゲーションから項目をタップすると、現在地が切り替わります。</p>
    <p>これはダミーの本文です。ボトムナビゲーションが画面下部に固定されている様子を確認してください。</p>
  </main>
  <nav class="bottom-navigation-demo__nav" aria-label="ボトムナビゲーション">
    <button type="button" class="bottom-navigation-demo__item" data-nav-item aria-current="page">
      <svg class="bottom-navigation-demo__icon" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M4 11 12 4l8 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M6 10v9h12v-9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <span>ホーム</span>
    </button>
    <button type="button" class="bottom-navigation-demo__item" data-nav-item>
      <svg class="bottom-navigation-demo__icon" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="6" fill="none" stroke="currentColor" stroke-width="2" />
        <line x1="16" y1="16" x2="21" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
      <span>検索</span>
    </button>
    <button type="button" class="bottom-navigation-demo__item" data-nav-item>
      <svg class="bottom-navigation-demo__icon" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 4v16M4 12h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
      <span>投稿</span>
    </button>
    <button type="button" class="bottom-navigation-demo__item" data-nav-item>
      <svg class="bottom-navigation-demo__icon" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2" />
        <path d="M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
      <span>マイページ</span>
    </button>
  </nav>
</div>

CSS

.bottom-navigation-demo {
  font-family: sans-serif;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 72px;
}

.bottom-navigation-demo__body {
  color: #333333;
  line-height: 1.8;
}

.bottom-navigation-demo__body p {
  margin: 0 0 16px;
}

.bottom-navigation-demo__nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #ffffff;
  border-top: 1px solid #e6e6e6;
  z-index: 10;
}

.bottom-navigation-demo__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border: 0;
  background: transparent;
  color: #666666;
  font-size: 11px;
  cursor: pointer;
}

.bottom-navigation-demo__icon {
  width: 22px;
  height: 22px;
}

.bottom-navigation-demo__item[aria-current="page"] {
  color: #0017c1;
}

document.querySelectorAll("[data-nav-item]").forEach((item) => {
  item.addEventListener("click", () => {
    document.querySelectorAll("[data-nav-item]").forEach((other) => {
      other.removeAttribute("aria-current");
    });
    item.setAttribute("aria-current", "page");
  });
});