メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

ナビゲーションバー(Navbar) v5.2.0設定変更

Bootstrapの強力でレスポンシブなナビゲーションヘッダ、navbarのドキュメントと例。折り畳みプラグインのサポートを含む、ブランド、ナビゲーションなどのサポートも含む。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。

使い方(How it works)

ナビゲーションバーを使い始める前に知っておくべきこと:

  • ナビゲーションバーは、レスポンシブ可能な折り畳みのために .navbar-expand{-sm|-md|-lg|-xl|-xxl} 入りの包括用の .navbar配色クラスが必要。
  • ナビゲーションバーとそのコンテンツは、デフォルトでは幅一杯に表示する。さまざまな方法で横幅を制限するためにコンテナを変更する。
  • 空白Flexユーティリティクラスを使用して、ナビゲーションバー内の間隔や配置を制御。
  • ナビゲーションバーはデフォルトでレスポンシブするが、簡単に修正して変更できる。レスポンシブの動作はJavaScriptの折り畳みプラグインに依存。
  • 支援技術のユーザーにランドマーク領域として明示するには、<nav> 要素を使用してアクセシビリティを確認するか、より一般的な <div> などの要素を使用して、すべてのナビゲーションバーに role="navigation" を追加して下さい。
  • 現在のページに aria-current="page" を使用するか、セット内の現在のアイテムに aria-current="true" を使用して、現在のアイテムを示す。
  • オプションの .navbar-scroll を追加して、max-height を設定し、展開されたナビゲーションバーのコンテンツをスクロール
  • v5.2.0の新機能:ナビゲーションバーは、.navbar 基本クラスに範囲設定されたCSS変数でテーマを設定できる。.navbar-light は非推奨になり、.navbar-dark は、スタイルを追加する代わりにCSS変数を再定義するように書き直された。

サポート済のコンテンツ(Supported content)v5.2.0設定変更

ナビゲーションバーには、いくつかのサブコンポーネントが組み込まれている。必要に応じて以下から選択:

  • .navbar-brand は、会社、製品、プロジェクト名に使用
  • .navbar-nav は、全高で軽量なナビゲーション(ドロップダウンも含む)に使用
  • .navbar-toggler は、折り畳みプラグインや他のナビゲーション切り替え機能で使用
  • Flexや空白ユーティリティは、フォームのコントロールとアクションに使用
  • .navbar-text は、テキストの縦方向の中央の文字列を追加する
  • .collapse.navbar-collapseは、親要素のブレークポイントでナビゲーションバーのコンテンツをグループ化して非表示にする。

以下は、lg(大)のブレークポイントで自動的にレスポンシブ(中以下のビューポートでは折り畳み表示)する明るめのテーマのナビゲーションバーに組み込まれているすべてのサブコンポーネントの例:

この例では、背景色bg-light)と空白me-auto, mb-2, mb-lg-0, me-2)のユーティリティクラスを使用。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="Navber">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            ドロップダウン
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">メニュー1</a></li>
            <li><a class="dropdown-item" href="#">メニュー2</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">その他</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">無効</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input type="search" class="form-control me-2" placeholder="検索..." aria-label="検索...">
        <button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
※Bootstrap4.5.0の設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="Navber">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク</a>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          ドロップダウン
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">メニュー1</a>
          <a class="dropdown-item" href="#">メニュー2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">その他</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"&gt;無効</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
      <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
    </form>
  </div><!-- /.navbar-collapse -->
</nav>
【設定】
  • nav.navbar.navbar-expand-{breakpoint}.bg-light(または div.navbar.navbar-expand-{breakpoint}.bg-light[role="navigation"]) > div.container-{fluid|breakpoint}《コンテナ》 > a.navbar-brand《ブランド》+ [button.navbar-toggler[data-bs-toggle="collapse"][data-bs-target="#ID"] > span.navbar-toggler-icon]《切替ボタン》 + {[div.collapse.navbar-collapse[ID] > ul.navbar-nav.me-auto.mb-2.mb-lg-0 > li.nav-item > a.nav-link]《ナビゲーション》 + form.d-flex《フォーム》}
アクセシビリティの設定】
  • button.navbar-toggler に、
    • aria-expanded="false" 属性(要素の開閉の状態を示す)
    • aria-controls="ID" 属性(切替ボタンとメニューを関連付ける)
    • aria-label 属性(代替テキストを指定)
    を入れる
  • a.nav-item.nav-link.active(アクティブメニューのリンク)に aria-current="page"(支援技術に現在のページであることを伝える)を入れる
  • <form> 要素に role="search"(支援技術に検索機能があることを伝える)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .navbar の直下を div.container-{fluid|breakpoint}コンテナクラス)で囲む必要あり
    • ナビゲーション部分:ul.navbar-nav.mr-auto ⇒ ul.navbar-nav.mr-auto.mb-2.mb-lg-0
    • ナビゲーションメニューをアクティブにする場合は、.activeli.nav-item に追加するのではなく、その子要素の a.nav-link に追加
    • .active 関連のアクセシビリティの設定を変更(a.nav-link > span.sr-onlya.nav-link[aria-current="page"]
    • ドロップメニュー部分の設定を変更
    • フォーム部分:form.form-inline my-2 my-lg-0
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="collapse"][data-bs-toggle="collapse"]
      • [data-target="#ID"][data-bs-target="#ID"]
      • [data-toggle="dropdown"][data-bs-toggle="dropdown"]
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .mr(-{breakpoint})-*.me(-{breakpoint})-*
  • 【v5.1.1】
    • ナビリンクが無効の場合(a.nav-link.disabled):href 属性、tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)、aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)の設定が不要に(参考、v4.6.1でバックポート)
  • 【v5.2.0】
    • nav.navbar.navbar-light.bg-lightnav.navbar.bg-light.navbar の中にスタイル設定が組み込まれたため .navbar-light が非推奨に)
    • <form> 要素にアクセシビリティとして role="search" を入れる
    • ドロップダウン:a.nav-link.dropdown-toggleid="ID"ul.dropdown-menuaria-labelledby="ID" 属性はそれぞれ不要に(v4.6.2でバックポート)

ブランド(Brand)

.navbar-brand はほとんどの要素で適用できるが、ユーティリティクラスやカスタムスタイルを必要とする要素がある場合にはアンカーリンクに設定するのが最適。

テキスト(Text)

.navbar-brand クラスの要素内にテキストを追加。

見本

アンカーリンクでの設定

見出しでの設定

Bootstrap5.xの設定例 緑背景が変更箇所
アンカーリンクでの設定<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Bootstrap</a>
  </div>
</nav>
見出しでの設定<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Bootstrap</span>
  </div>
</nav>
【設定】
  • <a> などに .navbar-brand を入れる(文字の大きさは1.25remで固定されている)

イメージ(Image)

.navbar-brand 内のテキストは、<img> に置き換えられる。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="..." alt="ブランド" width="30" height="30">
    </a>
  </div>
</nav>
【設定】
  • a.navbar-brand > <img>

イメージとテキスト(Image and text)v5.0.0-beta3設定変更

また、いくつかユーティリティを追加すれば、イメージとテキストも同時に使用できる。<img>.d-inline-block.align-text-top を追加しているので確認して下さい。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="..." alt="ブランド" width="30" height="30" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>
【設定】
  • a.navbar-brand > img.d-inline-block.align-text-top +ブランドテキスト
【変更履歴】
  • 【v5.0.0-beta3】
    • img.align-topimg.align-text-top

ナビゲーションバーのナビゲーションリンクは、独自の修飾子クラスを使用して .nav オプションを構築し、適切なレスポンシブ・スタイルのために切替クラスを使用する必要がある。ナビゲーションバーのコンテンツを安全に配置させるために、ナビゲーションバーのナビゲーションはできるだけ多くの横方向の空白を占有するようになる

現在のページを示すために、.nav-link.active クラスを追加。

アクティブな .nav-link には、aria-current 属性も追加する必要があるので注意。

1. <nav> > <ul> > <li> での設定

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">無効</a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
      </li>
    </ul>
  </div>
</nav>

2. <nav> > <div> での設定

見本

そしてnavのクラスを使用すれば、好きなだけリストベースのアプローチを完全に回避できる。

Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        <a class="nav-link" href="#">リンク1</a>
        <a class="nav-link" href="#">リンク2</a>
        <a class="nav-link disabled">無効</a>
      </div><!-- /.navbar-nav -->
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
※Bootstrap4.5.0の設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">ホーム <span class="sr-only">(現位置)</span></a>
      <a class="nav-item nav-link" href="#">リンク1</a>
      <a class="nav-item nav-link" href="#">リンク2</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
    </div>
  </div>
</nav>
【設定】
  • <ul> を使用する場合:nav.navbar > ul.navbar-nav > li.nav-item > a.nav-link
  • <div> を使用する場合:nav.navbar > div.navbar-nav > a.nav-link
  • モバイル用ナビゲーションボタンとして、必ず .navbar.navbar-expand-{breakpoint} の追加と、button.navbar-toggler[data-bs-toggle="collapse"] を設定すること
  • リンクをアクティブにする場合:a.nav-link.active を追加
  • リンクを無効にする場合:a.nav-link.disabled を追加
アクセシビリティの設定】
  • a.nav-link.activearia-current="page"(支援技術に現在のページであることを伝える)を入れる
【注意】
  • <nav> > <div> の場合に a.nav-link.nav-item の追加は不要【v4.5.1で変更】
【変更履歴】
  • 【v5.0.0-alpha1】
    • リンクをアクティブにする場合は、.activeli.nav-item に追加するのではなく、その子要素の a.nav-link に追加
    • .active 関連のアクセシビリティの設定を変更(a.nav-link > span.sr-onlya.nav-link[aria-current="page"]
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="collapse"][data-bs-toggle="collapse"]
      • [data-target="#ID"][data-bs-target="#ID"]
  • 【v5.1.1】
    • ナビリンクが無効の場合(a.nav-link.disabled):href 属性、tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)、aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)の設定が不要に(参考、v4.6.1でバックポート)
  • 【v5.2.0】
    • nav.navbar.navbar-light.bg-lightnav.navbar.bg-light.navbar-light が非推奨に)

3. ドロップダウンの設定 v5.2.0設定変更

見本

ナビゲーションバーでもドロップダウンを使用できる。ドロップダウンメニューでは、配置に折り返し要素が必要なため、以下に示すように、.nav-item.nav-link には必ず個別の入れ子要素を使用して下さい。

Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">ブランド</a>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク2</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">ドロップダウン</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">メニュー1</a></li>
            ...
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
【設定】
  • ul.navbar-nav >(li.nav-item +)li.nav-item.dropdown > {a.nav-link.dropdown-toggle[data-bs-toggle="dropdown"]《ドロップダウンリンク》 + [ul.dropdown-menu > <li> > a.dropdown-item]《ドロップメニュー》}
    ul.nav.navbar-nav > li.nav-item.dropdown 内にドロップメニューを入れる
【変更履歴】
  • 【v5.2.0】
    • ドロップダウン:a.nav-link.dropdown-toggleid="ID"ul.dropdown-menuaria-labelledby="ID" 属性はそれぞれ不要に(v4.6.2でバックポート)

フォーム(Form)v5.2.0設定変更

さまざまなフォームコントロールとコンポーネントをナビゲーションバー内に配置:

1. 一般のフォーム

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input type="search" class="form-control me-2" placeholder="検索..." aria-label="検索...">
      <button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
    </form>
  </div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
    <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
  </form>
</nav>

.navbar の直接の子要素はFlexレイアウトを使用し、デフォルトで justify-content: space-between を設定。この動作を調整するには、必要に応じて追加のFlexユーティリティを使用する。

2. フォームの行末揃え

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarForm" aria-controls="navbarForm" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarForm">
      <form class="d-flex ms-auto" role="search">
        <input type="text" class="form-control me-2" placeholder="検索..." aria-label="検索...">
        <button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarForm" aria-controls="navbarForm" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarForm">
    <form class="form-inline my-2 my-lg-0 ml-auto">
      <input type="text" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
      <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
    </form>
  </div><!-- /.navbar-collapse -->
</nav>

3. インプットグループを使ったフォーム v5.0.0-alpha1設定変更

インプットグループも機能。ナビゲーションバーがフォーム全体かほとんどフォームの場合、<form> 要素をコンテナとして使用しHTMLを保存する。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

4. 小さめのボタンを併用する場合

これらのナビゲーションバーフォームの一部として、さまざまなボタンがサポートされており、異なるサイズの要素の配置ができる。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button type="button" class="btn btn-outline-success">メインボタン</button>
    <button type="button" class="btn btn-sm ms-2 btn-outline-secondary">小さめのボタン</button>
  </form>
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button type="button" class="btn btn-outline-success">メインボタン</button>
    <button type="button" class="btn btn-sm ml-2 btn-outline-secondary">小さめのボタン</button>
  </form>
</nav>
【設定】
  • form.d-flex > input.form-control.me-2《コントロール》 + button.btn.flex-shrink-0《ボタン》
  • フォーム部分の行末揃えには ul.navbar-nav.me-autoform.d-flex.ms-auto を追加
  • ナビゲーションバーのメニューがフォームのみの場合は、nav.navbar > div.container-fluid > form.d-flex を、nav.navbar > form.container-fluid に変更可能
  • コントロール部分にインプットグループdiv.input-group)を入れても可
【注意】
  • ボタン部分に .flex-shrink-0 を入れないとボタンが縦長になる可能性あり
アクセシビリティの設定】
  • <form> 要素に role="search"(支援技術に検索機能があることを伝える)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • nav.navbar > form.form-inline > input.form-control.mr-sm-2 + button.btnnav.navbar > div.container-fluid > form.d-flex > input.form-control.mr-2 + button.btn.flex-shrink-0.form-inline は廃止)
    • インプットグループのアドオン部分を囲む div.input-group-{prepend|append} は不要に
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .ml-*.ms-*
      • .mr-*.me-*
  • 【v5.2.0】
    • <form> 要素にアクセシビリティとして role="search" を入れる

テキスト(Text)

ナビゲーションバーには、.navbar-text の助けを借りて少々のテキストを入れることができる。このクラスは、テキストの文字列の縦方向の配置と横方向の間隔を調整する。

1. テキストのみ

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">ココがテキストです</span>
  </div>
</nav>

必要に応じて、他のコンポーネントやユーティリティと組み合わせる。

2. 他のコンポーネントとの組み合わせ

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarColor" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
      </ul>
      <span class="navbar-text">
        インライン要素とナビゲーションバーのテキスト
      </span>
    </div>
  </div>
</nav>
【設定】
  • 文章を span.navbar-text で囲む
  • テキスト部分の行末揃えには ul.navbar-nav.me-autospan.navbar-text.ms-auto を追加

ナビゲーションバーの配色(Color schemes)v5.2.0設定変更

BootstrapのSass変数とCSS変数の組み合わせのおかげで、ナビゲーションバーのテーマはこれまでになく簡単になった。デフォルトは、明るめの背景色で使用するための「明るいナビゲーションバー」だが、暗めの背景色用に .navbar-dark の適用もできる。その後、.bg-* ユーティリティを入れてカスタマイズする。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    ...
  </div>
</nav>
【設定】
  • .navbar.navbar-dark(文字を白にする)と .bg-dark(黒色の背景色)を追加
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    ...
  </div>
</nav>
【設定】
  • .navbar(明るめの背景色=黒文字の場合)か .navbar.navbar-dark(暗めの背景色=白文字の場合)にして、さらに .bg-{color}定義済の背景色)を追加
【変更履歴】
  • 【v5.2.0】
    • 明るめの背景色の場合:.navbar.navbar-light.navbar
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar" style="background-color: #e3f2fd;">
  <div class="container-fluid">
    ...
  </div>
</nav>
【設定】
  • .navbar.navbar.navbar-dark に任意の背景色をスタイル設定
【変更履歴】
  • 【v5.2.0】
    • 明るめの背景色の場合:.navbar.navbar-light.navbar

コンテナクラスを使用(Containers)

必須ではないが、ナビゲーションバーを .container で囲んでページの中央に配置できる。ただし、内部コンテナは引き続き必要である。また .navbar 内にコンテナを追加して、固定か静的トップナビゲーションバーのコンテンツのみを中央に配置することもできる。

レイアウトの違いを見比べて下さい。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    ...
  </div><!-- /.container-fluid -->
</nav>
【設定】
  • .navbar > .container-fluid
【変更履歴】
  • 【v5.0.0-alpha1】
    • .navbar.navbar > .container-fluid
見本
設定例
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container">
    ...
  </div><!-- /.container -->
</nav>
【設定】
  • .navbar > .container

サイトの本体と同じ幅のナビゲーションバー 動作確認

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="container">
  <nav class="navbar navbar-expand-lg bg-light rounded-bottom">
    <div class="container-fluid">
      ...
    </div><!-- /.container-fluid -->
  </nav>
</div><!-- /.container -->
【設定】
【変更履歴】
  • 【v5.0.0-alpha1】
    • .container > .navbar.container > .navbar > .container-fluid

レスポンシブ・コンテナを使用したナビゲーションバー v5.0.0-alpha1新設 動作確認

レスポンシブ・コンテナを使用してビューポートのサイズに応じてナビゲーションバーの幅が変化。

見本
設定例
<nav class="navbar navbar-expand-md bg-light">
  <div class="container-lg">
    ...
  </div><!-- /.container-lg -->
</nav>
【設定】
  • .navbar > .container-{breakpoint}

ナビゲーションバーの配置(Placement)v5.2.0クラス追加

位置ヘルパークラスを使用して、非静的な位置にナビバーを配置。上で固定、下で固定、上に達したら固定(要素が一番上に達するまでスクロールした後は、その位置に留まる)、下に達するまで固定(ページが一番下に達するまでスクロールする間、その位置に留まる)から選択。

固定ナビゲーションバーは position: fixed を使用。つまり、DOMの標準フローから空白が詰まるので、他の要素との重複を避けるため、任意のCSS (例:<body> での padding-top) が必要な場合がある。

ナビゲーションバーの実例

通常はスクロールバーを移動させると最上部のナビゲーションバーも一緒に移動(デフォルトのスタイル)。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    ...
  </div>
</nav>
【設定】
  • 特に追加設定する必要なし
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<body style="padding-top:4.5rem;">
  <nav class="navbar bg-light fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      ...
    </div>
  </nav>
  ...
</body>
【設定】
  • .navbar.fixed-top を追加
【注意】
  • スクロールした時に最上部がナビゲーションバーと重なるので、別途 <body> タグに padding-top:4.5rem; のCSSスタイルを設定
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<body style="padding-bottom:4.5rem;">
  <nav class="navbar bg-light fixed-bottom">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      ...
    </div>
  </nav>
  ...
</body>
【設定】
  • .navbar.fixed-bottom を追加
【注意】
  • スクロールした時に最下部がナビゲーションバーと重なるので、別途 <body> タグに padding-bottom:4.5rem; のCSSスタイルを設定

ページをスクロールしてナビゲーションバーが最上部に達するとそこに固定される。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<body class="py-4">
  <nav class="navbar bg-light sticky-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      ...
    </div>
  </nav>
  ...
</body>
【設定】
  • .navbar.sticky-top を追加
【注意】
  • <nav><header> で囲むのは不可

ページをスクロールして最下部に達するまでナビゲーションバーが最下部に固定される。

見本
設定例
<body class="py-4">
  <nav class="navbar sticky-bottom bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      ...
    </div>
  </nav>
  ...
</body>
【設定】
  • .navbar.sticky-bottom を追加
【注意】
  • <nav><footer> で囲むのは不可

スクロール(Scrolling)v5.0.0-beta2新設(v4.6.0でバックポート)、v5.2.0設定変更

.navbar-nav-scroll.navbar-nav(または他のナビゲーションバーのサブコンポーネント)に追加すれば、折り畳まれたナビゲーションバーの切替可能なコンテンツ内で垂直スクロールが有効になる。デフォルトでは、スクロールは 75vh(またはビューポートの高さの75%)で開始されるが、ローカルのCSSカスタムプロパティ --bs-navbar-height かカスタムスタイルで再定義できる。より幅広のビューポートでナビゲーションバーが展開されているときは、コンテンツはデフォルトのナビゲーションバーと同じように表示。

この動作には overflow の潜在的な欠点があるので注意。overflow-y:auto(ここではコンテンツをスクロールするために必要)を設定すると、overflow-xauto と同等であり、水平方向のコンテンツをトリミングする。

以下は、.navbar-nav-scrollstyle="--bs-scroll-height: 100px;" を使用したナビゲーションバーの実例であり、最適な間隔のためにいくつか追加のマージンユーティリティが入っている。

見本 見やすいように常時折り畳んだ状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="ナビゲーションバーの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            ドロップダウン
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">メニュー1</a></li>
            <li><a class="dropdown-item" href="#">メニュー2</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">その他</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">無効</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input type="search" class="form-control me-sm-2" placeholder="検索..." aria-label="検索...">
        <button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
      </form>
    </div>
  </div>
</nav>
※Bootstrap4.6.1の設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
          ドロップダウン
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
          <li><a class="dropdown-item" href="#">メニュー1</a></li>
          <li><a class="dropdown-item" href="#">メニュー2</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">その他</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
      <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
    </form>
  </div>
</nav>
【設定】
  • .navbar-nav.navbar-nav-scroll を追加し、スクロール高の設定(style="--bs-scroll-height: 100px;")を入れる
【変更履歴】
  • 【v5.0.0-beta2】
    • スクロール高の設定:style="max-height: 100px;"style="--bs-scroll-height: 100px;"
  • 【v5.1.1】
    • ナビリンクが無効の場合(a.nav-link.disabled):href 属性、tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)、aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)の設定が不要に(v4.6.1でバックポート)
  • 【v5.2.0】
    • nav.navbar.navbar-light.bg-lightnav.navbar.bg-light.navbar-light が非推奨に)
    • <form> 要素にアクセシビリティとして role="search" を入れる
    • ドロップダウン:a.nav-link.dropdown-toggleid="ID"ul.dropdown-menuaria-labelledby="ID" 属性はそれぞれ不要に(v4.6.2でバックポート)

レスポンシブ動作(Responsive behaviors)

ナビゲーションバーは、.navbar-toggler, .navbar-collapse, .navbar-expand{-sm|-md|-lg|-xl|-xxl} クラスを使用して、コンテンツがボタンの後で折り畳まれるタイミングを決定できる。他のユーティリティと組み合わせて、特定の要素を表示するか非表示にするかを簡単に選択できる。

折り畳むことのない(常時展開する)ナビゲーションバーの場合は、ナビゲーションバーに .navbar-expand クラスを追加。常に折り畳むナビゲーションバーの場合には、.navbar-expand クラスを追加しないで下さい。

切替(Toggler)v5.0.0-alpha1クラス追加

ナビゲーションの切替は、デフォルトで行頭揃えになっているが、.navbar-brand のような兄弟要素に従うと、自動的に行末端に配置される。マークアップを元に戻すと、切替ボタンの配置が逆になる。以下に、異なる切替スタイルの例を示す。

1. 折り畳まれるとブランド名も非表示

極小のブレークポイントに .navbar-brand が表示されていない場合:

見本 見やすいように常時折り畳んだ状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="Navbar">
      <a class="navbar-brand" href="#">ブランド</a>
      <ul class="navbar-nav me-auto mt-2 mt-lg-0">
        ...
      </ul>
      <form class="d-flex" role="search">
        <input type="search" class="form-control me-2" placeholder="検索..." aria-label="検索...">
        <button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="Navbar">
    <a class="navbar-brand" href="#">ブランド</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      ...
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
      <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
    </form>
  </div><!-- /.navbar-collapse -->
</nav>

2. 折り畳まれると行頭にブランド名、行末に切替ボタン

見本 見やすいように常時折り畳んだ状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="Navber">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        ...
      </ul>
      <form class="d-flex" role="search">
        <input type="search" class="form-control me-2" placeholder="検索..." aria-label="検索...">
        <button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="Navber">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      ...
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input type="search" class="form-control mr-2" placeholder="検索..." aria-label="検索...">
      <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
    </form>
  </div><!-- /.navbar-collapse -->
</nav>

3. 折り畳まれると行頭に切替ボタン、行末にブランド名

見本 見やすいように常時折り畳んだ状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">ブランド</a>
    <div class="collapse navbar-collapse" id="Navber">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        ...
      </ul>
      <form class="d-flex" role="search">
        <input type="search" class="form-control me-2" placeholder="検索..." aria-label="検索...">
        <button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">ブランド</a>
  <div class="collapse navbar-collapse" id="Navber">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      ...
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
      <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
    </form>
  </div><!-- /.navbar-collapse -->
</nav>
表示の範囲
クラス/ビューポートの幅 極小
<576px

≥576px

≥768px

≥992px
特大
≥1200px
超特大
≥1400px
.navbar.navbar-expand 展開
.navbar.navbar-expand-sm 折り畳み 展開
.navbar.navbar-expand-md 折り畳み 展開
.navbar.navbar-expand-lg 折り畳み 展開
.navbar.navbar-expand-xl 折り畳み 展開
.navbar.navbar-expand-xxl
v5.0.0-alpha1追加
折り畳み 展開
.navbar のみ 折り畳み
【設定】
  • .navbar.navbar-expand-{breakpoint} > [button.navbar-toggler[data-bs-toggle="collapse"][data-bs-target="#ID"]]《ボタン》 + a.navbar-brand《ブランド》 + [#ID.collapse.navbar-collapse > ul.navbar-nav]《メニュー》
  • .navbar-expand-{breakpoint} は、モバイルサイズでのみ折り畳みたい場合は、.navbar-expand-md に、タブレットサイズ以下で折り畳みたい場合は、.navbar-expand-lg を使用(各サイズの動作は様々なナビゲーションバー参照)
  • 折り畳まれたときにブランドを隠したい場合は、a.navbar-branddiv.collapse.navbar-collapse 内に入れる
  • 切替ボタンを行末側に表示したい場合は、a.navbar-brand《ブランド》 ⇒ button.navbar-toggler《切替ボタン》 の順に記載
  • 切替ボタンを行頭側に表示したい場合は、button.navbar-toggler《切替ボタン》 ⇒ a.navbar-brand《ブランド》 の順に記載
【変更履歴】
  • 【v5.0.0-alpha1】
    • .navbar-expand-xxl が追加
  • 【v5.2.0】
    • nav.navbar.navbar-light.bg-lightnav.navbar.bg-light.navbar-light が非推奨に)
    • <form> 要素にアクセシビリティとして role="search" を入れる

外部コンテンツ(External content)

場合によっては、折り畳みプラグインを使用して、構造的に .navbar の外側にあるコンテンツのコンテナ要素を切り替える必要がある。Bootstrapのプラグインは iddata-bs-target のマッチングで動作するので、簡単に実行できる。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<!-- 非表示コンテンツ -->
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h4 class="text-white">折り畳みコンテンツ</h4>
    <span class="text-muted">ナビゲーションバーブランド経由で切り替えられる。</span>
  </div>
</div><!-- /.collapse -->

<!-- 切替ボタン -->
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="折り畳みナビゲーション">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

これを行うときは、追加のJavaScriptを含めて、コンテナを開いたときにプログラムでフォーカスをコンテナに移動することを推奨。そうしないと、キーボードユーザーや支援技術のユーザーは、新しく公開されたコンテンツを見つけるのに苦労する可能性がある。特に、開かれたコンテナがこの解説の構造の切替ボタンのにある場合はそうである。また、切替ボタンにコンテンツコンテナの id を指す aria-controls 属性があることを確認することを推奨。理論的には、これにより支援技術のユーザーは切替ボタンからそれが制御するコンテナに直接ジャンプできるが、これに対するサポートは現在かなりのパッチが当てられている。

【設定】
  • ナビゲーションバー切替ボタン:.navbar > button.navbar-toggler[data-bs-toggle="collapse"][data-bs-target="#ID"] > span.navbar-toggler-icon
  • 非表示コンテンツ:#ID.collapse
  • ボタンとコンテンツの順を逆にすると、コンテンツがナビゲーションバーの上に表示される

オフキャンバス(Offcanvas)v5.1.0新設、v5.2.0設定変更

1.通常の場合

オフキャンバス・コンポーネントを使用して、展開/折り畳み式ナビゲーションバーをオフキャンバス式ドロワーに変換。両方のオフキャンバスのデフォルトスタイルを拡張し、.navbar-expand-* クラスを使用して、動的で柔軟なナビゲーションサイドバーを作成。

以下の見本では、すべてのブレークポイントで常時折り畳まれているオフキャンバス・ナビゲーションバーを作成したので、.navbar-expand-* クラスは省略。

見本
設定例
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">オフキャンバス・ナビバー</a>
    <button type="button" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-expanded="false" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">オフキャンバス</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">ホーム</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">リンク</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              ドロップダウン
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">メニュー1</a></li>
              <li><a class="dropdown-item" href="#">メニュー2</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">その他</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input type="search" class="form-control me-2" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-success flex-shrink-0" type="submit">検索</button>
        </form>
      </div>
    </div>
  </div>
</nav>

lg などの特定のブレークポイントで通常のナビゲーションバーに展開されるオフキャンバス・ナビゲーションバーを作成するには、.navbar-expand-lg を使用。

設定例
<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">オフキャンバス・ナビバー</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>
【設定】
  • 切替ボタン(button.navbar-toggler):data-bs-toggle="collapse"data-bs-toggle="offcanvas"aria-label は不要)
  • ナビゲーション(div.collapse.navbar-collapse)の部分をオフキャンバスにする
【変更履歴】
  • 【v5.2.0】
    • nav.navbar.navbar-light.bg-lightnav.navbar.bg-light.navbar-light が非推奨に)
    • <form> 要素にアクセシビリティとして role="search" を入れる
    • オフキャンバスを閉じるボタン:.btn-close.text-reset.btn-close
    • ドロップダウン:a.nav-link.dropdown-toggleid="ID"ul.dropdown-menuaria-labelledby="ID" 属性はそれぞれ不要に(v4.6.2でバックポート)

Darkバージョン v5.2.0新設

Darkナビゲーションバーでオフキャンバスを使用する場合、テキストが判読できなくなるのを防ぐために、オフキャンバスのコンテンツの背景をDarkにする必要がある場合があるので注意して下さい。以下の例では、Darkのオフキャンバスで適切なスタイリングを行うために、.navbar.navbar-dark.bg-dark を、.offcanvas.text-bg-dark を、.dropdown-menu.dropdown-menu-dark を、.btn-close.btn-close-white をそれぞれ追加。

見本
設定例
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Darkオフキャンバス・ナビバー</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Darkオフキャンバス</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">ホーム</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">リンク</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              ドロップダウン
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li><a class="dropdown-item" href="#">メニュー1</a></li>
              <li><a class="dropdown-item" href="#">メニュー2</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">その他</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-success flex-shrink-0" type="submit">検索</button>
        </form>
      </div>
    </div>
  </div>
</nav>
【設定】
  • ナビゲーションバー:.navbar.navbar-dark.bg-dark
  • オフキャンバス:.offcanvas.text-bg-dark
  • 閉じるボタン:button.btn-close.btn-close-white
  • ドロップダウンメニュー:ul.dropdown-menu.dropdown-menu-dark

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数(Variables)v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、ナビゲーションバーは、リアルタイムのカスタマイズを強化するために .navbar でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定
scss/_navbar.scss 内 navbar-css-vars の設定--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

いくつかの追加のCSS変数も .navbar-nav にある:

scss/_navbar.scss 内 navbar-nav-css-vars の設定--#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

CSS変数によるカスタマイズは、.navbar-dark クラスで見ることができ、重複するCSSセレクタを追加せずに特定の値を再定義する。v5.2.1追加

scss/_navbar.scss 内 navbar-dark-css-vars の設定--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass変数(Sass variables)v5.2.0変数から名称変更

すべてのナビゲーションバーに対応する変数:

デフォルトの設定
scss/_variables.scss 内 navbar-variables の設定$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// navbar-brandのpadding-yを計算して、navbar-brandがnavbar-textとnav-linkと同じ高さになるようにする
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

Darkナビゲーションバー用の変数:

scss/_variables.scss 内 navbar-dark-variables の設定$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sassループ(Sass Loop) v5.2.0ループから名称変更

レスポンシブナビゲーションバーの展開/折り畳みクラス( .navbar-expand-lg など)は $breakpoints マップと組み合わされ、scss/_navbar.scss のループを経由して生成。

デフォルトの設定
scss/_navbar.scss 内 navbar-expand-loop の設定// ナビゲーションバーが折り畳まれる場所を構成するために一連の `.navbar-expand-*` レスポンシブクラスを生成
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}