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

使い方（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" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            ドロップダウン
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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.xの設定例（～v4.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>

ブランド（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>

イメージ（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>

イメージとテキスト（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>

ナビゲーション（Nav）v5.2.0設定変更

ナビゲーションバーのナビゲーションリンクは、独自の修飾子クラスを使用して .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の設定例（～v4.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>

3. ドロップダウンの設定

見本

ナビゲーションバーでもドロップダウンを使用できる。ドロップダウンメニューでは、配置に折り返し要素が必要なため、以下に示すように、.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" id="navbarDropdownMenuLink" aria-expanded="false">ドロップダウン</a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">メニュー1</a></li>
            ...
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

フォーム（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>

テキスト（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>

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

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

Darkのナビゲーションバー

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    ...
  </div>
</nav>

定義済の背景色を使用したナビゲーションバー

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    ...
  </div>
</nav>

任意の背景色のナビゲーションバー

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<nav class="navbar" style="background-color: #e3f2fd;">
  <div class="container-fluid">
    ...
  </div>
</nav>

コンテナクラスを使用（Containers）

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

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

ビューポート幅一杯のナビゲーションバー 動作確認

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    ...
  </div><!-- /.container-fluid -->
</nav>

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

見本

設定例

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container">
    ...
  </div><!-- /.container -->
</nav>

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

見本

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新設 動作確認

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

見本

設定例

<nav class="navbar navbar-expand-md bg-light">
  <div class="container-lg">
    ...
  </div><!-- /.container-lg -->
</nav>

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

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

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

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

静的トップナビゲーションバー（Static top）動作確認

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

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    ...
  </div>
</nav>

最上部に固定されたナビゲーションバー（Fixed top）動作確認

見本

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>

最下部に固定されたナビゲーションバー（Fixed bottom）動作確認

見本

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>

最上部に達すると固定されるナビゲーションバー（Sticky top）動作確認

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

見本

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>

最下部に達するまで固定されるナビゲーションバー（Sticky bottom）v5.2.0新設 動作確認

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

見本

設定例

<body class="py-4">
  <nav class="navbar sticky-bottom bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      ...
    </div>
  </nav>
  ...
</body>

スクロール（Scrolling）v5.0.0-beta2新設（v4.6.0でバックポート）

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

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

以下は、.navbar-nav-scroll と style="--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="#" id="navbarScrollingDropdown" role="button" data-bs-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">無効</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.xの設定例（v4.6.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="#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>

レスポンシブ動作（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>

表示の範囲

外部コンテンツ（External content）

場合によっては、折り畳みプラグインを使用して、構造的に .navbar の外側にあるコンテンツのコンテナ要素を切り替える必要がある。Bootstrapのプラグインは id と data-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 属性があることを確認することを推奨。理論的には、これにより支援技術のユーザーは切替ボタンからそれが制御するコンテナに直接ジャンプできるが、これに対するサポートは現在かなりのパッチが当てられている。

オフキャンバス（Offcanvas）v5.1.0新設、設定変更

オフキャンバスプラグインを使用して、展開/折り畳み式ナビゲーションバーをオフキャンバス式ドロワーに変換。両方のオフキャンバスのデフォルトスタイルを拡張し、.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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              ドロップダウン
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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>

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);

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;

scss/_variables.scss 内 navbar-theme-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-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;
$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;
          }
        }
      }
    }
  }
}