メインコンテンツへスキップ

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

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

目次

使い方（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）

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

  • .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" href="#" tabindex="-1" aria-disabled="true">無効</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の設定例
<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">無効</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}.navbar-light.bg-light（または div.navbar.navbar-expand-{breakpoint}.navbar-light.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"（支援技術に現在のページであることを伝える）を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .navbar の直下を div.container-{fluid｜breakpoint}（コンテナクラス）で囲む必要あり
    • ナビゲーション部分：ul.navbar-nav.mr-auto　⇒ ul.navbar-nav.mr-auto.mb-2.mb-lg-0
    • ナビゲーションメニューをアクティブにする場合は、.active を li.nav-item に追加するのではなく、その子要素の a.nav-link に追加
    • .active 関連のアクセシビリティの設定を変更（a.nav-link > span.sr-only ⇒ a.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})-*

ブランド（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>
【設定】
  • <a> などに .navbar-brand を入れる（文字の大きさは1.25remで固定されている）

イメージ（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>
【設定】
  • a.navbar-brand > <img>

イメージとテキスト（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="..." width="30" height="30" class="d-inline-block align-text-top" alt="ブランド">
			Bootstrap
		</a>
	</div>
</nav>
【設定】
  • a.navbar-brand > img.d-inline-block.align-text-top +ブランドテキスト
【変更履歴】
  • 【v5.0.0-beta3】
    • img.align-top ⇒ img.align-text-top

ナビゲーションバーのナビゲーションリンクは、独自の修飾子クラスを使用して .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" href="#" tabindex="-1" aria-disabled="true">無効</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" href="#" tabindex="-1" aria-disabled="true">無効</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>
【設定】
  • <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.active に aria-current="page"（支援技術に現在のページであることを伝える）を入れる
  • .disabled と同じ要素に、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）と aria-disabled="true"（支援技術に要素が無効の状態であることを伝える）を入れる
【注意】
  • <nav> > <div> の場合に a.nav-link に .nav-item の追加は不要【v4.5.1で変更】
【変更履歴】
  • 【v5.0.0-alpha1】
    • リンクをアクティブにする場合は、.active を li.nav-item に追加するのではなく、その子要素の a.nav-link に追加
    • .active 関連のアクセシビリティの設定を変更（a.nav-link > span.sr-only ⇒ a.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"]

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>

【設定】

  • 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 内にドロップメニューを入れる

フォーム（Form）

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

1. 一般のフォーム

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light bg-light">
	<div class="container-fluid">
		<form class="d-flex">
			<input class="form-control me-2" type="search" 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 class="form-control mr-sm-2" type="search" 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 class="form-control me-2" type="text" 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 class="form-control mr-sm-2" type="text" 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>
【設定】
  • form.d-flex > input.form-control.me-2《コントロール》 + button.btn.w-100《ボタン》
  • フォーム部分の行末揃えには ul.navbar-nav に .me-auto か form.d-flex に .ms-auto を追加
  • ナビゲーションバーのメニューがフォームのみの場合は、nav.navbar > div.container-fluid > form.d-flex を、nav.navbar > form.container-fluid に変更可能
  • コントロール部分にインプットグループ（div.input-group）を入れても可
【変更履歴】
  • 【v5.0.0-alpha1】
    • nav.navbar > form.form-inline > input.form-control.mr-sm-2 + button.btn ⇒ nav.navbar > div.container-fluid > form.d-flex > input.form-control.mr-2 + button.btn.w-100（.form-inline は廃止）
    • インプットグループのアドオン部分を囲む div.input-group-{prepend|append} は不要に
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴い空白ユーティリティのクラス名変更
      • .ml-* ⇒ .ms-*
      • .mr-* ⇒ .me-*

テキスト（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>
【設定】
  • 文章を span.navbar-text で囲む
  • テキスト部分の行末揃えには ul.navbar-nav に .me-auto か span.navbar-text に .ms-auto を追加

 

ナビゲーションバーの配色（Color schemes）

テーマのクラスと background-color ユーティリティの組み合わせにより、ナビゲーションバーの操作が簡単に。明るめの背景色で使用する場合は .navbar-light、暗めの背景色の場合は .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-light（明るめの背景色＝黒文字の場合）か .navbar-dark（暗めの背景色＝白文字の場合）を追加して、さらに .bg-{color}（定義済みの背景色）を追加
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
	<div class="container-fluid">
		...
	</div>
</nav>
【設定】
  • .navbar.navbar-light か .navbar.navbar-dark に任意の背景色をスタイル設定

 

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

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

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

見本 画像で表示

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

Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light 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 navbar-light bg-light">
	<div class="container">
		...
	</div><!-- /.container -->
</nav>
【設定】
  • .navbar > .container

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

見本 画像で表示

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

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】
    • .container > .navbar ⇒ .container > .navbar > .container-fluid

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

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

見本 画像で表示

●ビューポートの幅が特大（≥1200px）の場合

レスポンシブ・コンテナを使用したナビゲーションバー

●ビューポートの幅が大（≥992px）の場合

レスポンシブ・コンテナを使用したナビゲーションバー

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

 

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

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

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

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

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

見本 画像で表示

静的ナビゲーションバー

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

最下部に固定されたナビゲーションバー

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>
【設定】
  • .navbar に .fixed-bottom を追加
【注意】
  • スクロールした時に最下部がナビゲーションバーと重なるので、別途 <body> タグに padding-bottom:4.5rem; のCSSスタイルを設定

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

見本 画像で表示

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

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>
【設定】
  • .navbar に .sticky-top を追加
【注意】
  • <nav> を <header> で囲むのは不可

 

スクロール（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 class="navbar-toggler" type="button" 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" href="#" tabindex="-1" aria-disabled="true">無効</a>
				</li>
			</ul>
			<form class="d-flex">
				<input class="form-control me-sm-2" type="search" 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 class="navbar-toggler" type="button" 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;"

 

レスポンシブ動作（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 class="form-control me-2" type="search" 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 class="form-control mr-sm-2" type="search" 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 class="form-control me-2" type="search" 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 class="form-control mr-2" type="search" 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 class="form-control me-2" type="search" 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 class="form-control mr-sm-2" type="search" 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-brand を div.collapse.navbar-collapse 内に入れる
  • 切替ボタンを行末側に表示したい場合は、a.navbar-brand《ブランド》 ⇒ button.navbar-toggler《切替ボタン》 の順に記載
  • 切替ボタンを行頭側に表示したい場合は、button.navbar-toggler《切替ボタン》 ⇒ a.navbar-brand《ブランド》 の順に記載
【変更履歴】
  • 【v5.0.0-alpha1】
    • .navbar-expand-xxl が追加

外部コンテンツ（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 属性があることを確認することを推奨。理論的には、これにより支援技術のユーザーは切替ボタンからそれが制御するコンテナに直接ジャンプできるが、これに対するサポートは現在かなりのパッチが当てられている。

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

 

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