ナビゲーションバー（Navbar） v5.0.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 を設定し、展開されたナビゲーションバーのコンテンツをスクロール。

 

サポート済のコンテンツ（Supported content）v5.1.1設定変更

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

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

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

見本

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

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

コピー<nav class="navbar navbar-expand-lg navbar-light 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">
        <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><!-- /.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 navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Bootstrap</a>
  </div>
</nav>

見出しでの設定コピー<nav class="navbar navbar-light 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 navbar-light 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 navbar-light 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.1.1設定変更

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

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

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

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

見本

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

コピー<nav class="navbar navbar-expand-lg navbar-light 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 navbar-light 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 navbar-light 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）

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

1. 一般のフォーム

見本

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

コピー<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <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 navbar-light 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">
        <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 navbar-light 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 navbar-light 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 navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">ココがテキストです</span>
  </div>
</nav>

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

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

見本

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

コピー<nav class="navbar navbar-light 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）

テーマのクラスと background-color ユーティリティの組み合わせにより、ナビゲーションバーの操作が簡単に。明るめの背景色で使用する場合は .navbar-light、暗めの背景色の場合は .navbar-dark のどちらかを選択。その後、.bg-* ユーティリティでカスタマイズ。

黒色のナビゲーションバー

見本

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 navbar-light" style="background-color: #e3f2fd;">
  <div class="container-fluid">
    ...
  </div>
</nav>

 

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

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

レイアウトの違いを見比べること。

幅一杯のナビゲーションバー 実例

見本 画像で表示

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

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

メニューのみがサイトの本体と同じ幅のナビゲーションバー 実例

見本 画像で表示

設定例

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

サイトの本体と同じ幅のナビゲーションバー 実例

見本 画像で表示

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

コピー<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
    <div class="container-fluid">
      ...
    </div><!-- /.container-fluid -->
  </nav>
</div><!-- /.container -->

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

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

見本 画像で表示

設定例

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

 

ナビゲーションバーの配置（Placement）

位置ユーティリティを使用して、非静的な位置にナビバーを配置。上に固定、下に固定、上に達したら固定（上部に達するまでページをスクロールし、その位置に留まる）のいずれかを選択。position: fixed を使用した固定ナビゲーションバーでは、DOMの標準フローから空白が詰まるので、他の要素との重複を避けるため、任意のCSS (例：<body> での padding-top) が必要な場合がある。

.sticky-top で使用される position: sticky は、すべてのブラウザで完全にサポートされていないことにも注意。

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

静的トップナビゲーションバー（Static top）実例

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

見本 画像で表示

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

コピー<nav class="navbar navbar-light 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 navbar-light bg-light fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      ...
    </div>
  </nav>

最下部に固定されたナビゲーションバー（Fixed bottom）実例

見本 画像で表示

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

コピー<body style="padding-bottom:4.5rem;">
  <nav class="navbar navbar-light bg-light fixed-bottom">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      ...
    </div>
  </nav>

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

ナビゲーションバーが最上部に達するとそこに固定される。

見本 画像で表示

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

コピー<body class="py-3">
  <nav class="navbar navbar-light bg-light sticky-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">ブランド</a>
      ...
    </div>
  </nav>

 

スクロール（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 navbar-light 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">
        <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 navbar-light 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">
        <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 navbar-light 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">
        <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 navbar-light 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">
        <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 navbar-light 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 text-reset" 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">
          <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>

 

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定

scss/_variables.scss 内 navbar-variables の設定$navbar-padding-y:                  $spacer / 2;
$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) / 2;
$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;

ループ（Loop）

レスポンシブナビゲーションバーの展開/折り畳みクラス（ .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: $navbar-nav-link-padding-x;
            padding-left: $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-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; /* stylelint-disable-line declaration-no-important */
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

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