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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

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

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

使い方(How it works)

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

  • ナビゲーションバーは、レスポンシブ可能な折り畳みのために .navbar-expand{-sm|-md|-lg|-xl} 入りの包括用の .navbar配色クラスが必要。
  • ナビゲーションバーとそのコンテンツは、デフォルトでは幅一杯に表示する。オプションのコンテナを使用して、横幅を制限可能。
  • 空白Flexユーティリティクラスを使用して、ナビゲーションバー内の間隔や配置を制御。
  • ナビゲーションバーはデフォルトでレスポンシブするが、簡単に修正して変更可能。レスポンシブの動作はJavaScriptの折り畳みプラグインに依存。
  • ナビゲーションバーは、印刷時にはデフォルトで非表示になっているので、それらを強制的に印刷させる場合は、.navbar.d-print を追加する。詳しくは表示ユーティリティクラスを参照すること。
  • 支援技術のユーザーにランドマーク領域として明示するには、<nav> 要素を使用してアクセシビリティを確認するか、より一般的な <div> などの要素を使用して、すべてのナビゲーションバーに role="navigation" を追加すること。

実例とサポートされているサブコンポーネントのリストを参照すること。

 

サポート済みのコンテンツ(Supported content)

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

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

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

見本

この例では、カラーbg-light)と空白my-2, my-lg-0, mr-sm-0, my-sm-0)のユーティリティクラスを使用。

Bootstrap3.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navber" aria-expanded="false">
				<span class="sr-only">ナビゲーションの切替</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">ブランド</a>
		</div><!-- /.navbar-header -->

		<div class="collapse navbar-collapse" id="Navber">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">ホーム <span class="sr-only">(current)</span></a></li>
				<li><a href="#">リンク</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">メニュー1</a></li>
						<li><a href="#">メニュー2</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">その他</a></li>
					</ul>
				</li>
				<li class="disabled">
					<a href="#">無効</a>
				</li>
			</ul>
			<form class="navbar-form navbar-right">
				<div class="form-group">
					<input type="search" class="form-control" placeholder="検索..." aria-label="検索...">
				</div>
				<button type="submit" class="btn btn-success">検索</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"]) > a.navbar-brand《ブランド》+ [button.navbar-toggler[data-toggle="collapse"] > span.navbar-toggler-icon]《切替ボタン》 + {[div.collapse.navbar-collapse > ul.navbar-nav > li.nav-item > a.nav-link]《ナビゲーション》 + form.form-inline《フォーム》}

アクセシビリティの設定】

  • button.navbar-toggler に、
    • aria-expanded="false" 属性(要素の開閉の状態を示す)
    • aria-controls="ID" 属性(切替ボタンとメニューを関連付ける)
    • aria-label 属性(代替テキストを指定)
    を入れる

【Bootstrap3.xとの変更箇所】

  • ナビゲーションバー:nav.navbar.navbar-defaultnav.navbar.navbar-expand-{breakpoint}.navbar-light.bg-light
  • div.container-fluid, div.navbar-header の設定は不要に
  • 切替ボタン:button.navbar-toggle.collapsedbutton.navbar-toggler.navbar-toggler-right
  • 切替ボタンの代替テキスト:button.navbar-toggle.collapsed > span.sr-onlybutton.navbar-toggler[aria-label]
  • 切替ボタンのアイコン:span.icon-bar×3 ⇒ span.navbar-toggler-icon
  • メニューリスト:ul.nav.navbar-nav > <li> > <a>ul.navbar-nav > li.nav-item > a.nav-link
  • フォーム:form.navbar-form > div.form-groupform.form-inline
  • フォームの右寄せ:form.navbar-form.navbar-rightul.navbar-nav.mr-auto(またはform.navbar-inline.ml-auto

ブランド(Brand)

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

.navbar-brand にイメージを追加するには、カスタムスタイルやユーティリティが必要になる。ここではいくつかの例を表示。

見本

●アンカーリンクでの設定

●見出しでの設定

●画像のみでの設定

●画像とテキストでの設定

設定例
アンカーリンクでの設定<nav class="navbar navbar-light bg-light">
	<a class="navbar-brand" href="#">Bootstrap</a>
</nav>
見出しでの設定<nav class="navbar navbar-light bg-light">
	<span class="navbar-brand mb-0 h1">Bootstrap</span>
</nav>
画像のみでの設定<nav class="navbar navbar-light bg-light">
	<a class="navbar-brand" href="#">
		<img alt="ブランド" src="..." width="30" height="30">
	</a>
</nav>
画像とテキストでの設定<nav class="navbar navbar-light bg-light">
	<a class="navbar-brand" href="#">
		<img src="..." width="30" height="30" class="d-inline-block align-top" alt="ブランド">
		Bootstrap
	</a>
</nav>

【設定】

  • <a> などに .navbar-brand を入れる(文字の大きさは1.25remで固定されている)

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

.active を使用したアクティブ状態は、現位置のページを .nav-link またはその直接の親 .nav-items に直接適用可能なことを示す。

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

見本
設定例
<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のクラスを使用すれば、好きなだけリストベースのアプローチを完全に回避可能。

設定例
<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-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-item.nav-link
  • モバイル用ナビゲーションボタンとして、必ず .navbar.navbar-expand-{breakpoint} の追加と、button.navbar-toggler[data-toggle="collapse"] を設定すること
  • リンクをアクティブにする場合:a.nav-link.active を追加(li.nav-item.active を追加しても可)し、ユーザー補助用に span.sr-only を入れて現在の位置を表示
  • リンクを無効にする場合:a.nav-link.disabled を追加

アクセシビリティの設定】

  • .disabled と同じ要素に tabindex="-1" aria-disabled="true"(支援技術にdisabled属性が指定されたのと同じ状態であること伝える)を入れる

【変更履歴】

  • 【v4.2.1】.disabled 関連のアクセシビリティの設定を追加

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

見本

また、ナビゲーションバーのナビゲーションにドロップダウンを使用することも可能。ドロップダウンのメニューには配置のために囲み要素が必要なので、以下に示すように、.nav-item.nav-link に別々の入れ子要素を使用すること。

Bootstrap3.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNavDropdown" aria-expanded="false">
				<span class="sr-only">ナビゲーションの切替</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">ブランド</a>
		</div><!-- /.navbar-header -->
		<div class="collapse navbar-collapse" id="navbarNavDropdown">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">ホーム <span class="sr-only">(現位置)</span></a></li>
				<li><a href="#">リンク1</a></li>
				<li><a href="#">リンク2</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">メニュー1</a></li>
						...
					</ul>
				</li>
			</ul>
		</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="#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" 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 dropdown">
				<a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
					<a class="dropdown-item" href="#">メニュー1</a>
					...
				</div><!-- ./dropdown-menu -->
			</li>
		</ul>
	</div><!-- /.navbar-collapse -->
</nav>

【設定】

  • ul.navbar-nav >(li.nav-item +)li.nav-item.dropdown > {a.nav-link.dropdown-toggle[data-toggle="dropdown"]《ドロップダウンリンク》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
    ul.nav.navbar-nav > li.nav-item.dropdown 内にドロップメニューを入れる

【Bootstrap3.xとの変更箇所】

  • ドロップダウンリンク:li.dropdown > a.dropdown-toggle[data-toggle="dropdown"][role="button"]li.nav-item.dropdown > a.nav-link.dropdown-toggle[data-toggle="dropdown"]
  • キャレット(▼):<span class="caret"></span> の設定は不要
  • ドロップメニュー:ul.dropdown-menu > li > adiv.dropdown-menu > a.dropdown-item

フォーム(Form)

さまざまなフォームコントロールとコンポーネントを .form-inline でナビゲーションバー内に配置。

1. 一般のフォーム

見本
設定例
<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:between を設定。この動作を調整するには、必要に応じて追加のFlexユーティリティを使用する。

2. フォームの右寄せ v4.1.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="#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>
</nav>

【変更履歴】

  • 【v4.1.0】.navbar.justify-content-between の設定が不要に

3. インプットグループを使ったフォーム

見本

インプットグループも機能:

設定例
<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. 小さめのボタンを併用する場合

見本

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

設定例
<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.form-inline > input.form-control《コントロール》 + button.btn《ボタン》
  • フォーム部分の右寄せには ul.navbar-nav.mr-autoform.navbar-inline.ml-auto を追加
  • コントロール部分にインプットグループdiv.input-group)を入れても可
  • 縦方向の配置クラスを使って大きさの違うボタンを設定することが可能に(その際ボタンの間には空白が無いので、空白ユーティリティクラスを追加)

テキスト(Text)v4.0.0設定変更

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

1. 通常のテキスト

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<p class="navbar-text">ココがテキストです</p>
Bootstrap4.xの設定例 緑背景が変更箇所
<span class="navbar-text">ココがテキストです</span>

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

2. 右寄せ

見本
設定例
<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="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarText">
		<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="#">リンク1</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">リンク2</a>
			</li>
		</ul>
		<span class="navbar-text">
			インライン要素を含むテキスト
		</span>
	</div>
</nav>

【設定】

  • 文章を span.navbar-text で囲む
  • テキスト部分の右寄せには ul.navbar-nav.mr-autospan.navbar-text.ml-auto を追加

【Bootstrap3.xとの変更箇所】

  • .navbar-text の設定タグ:<p><span>
  • 右寄せ:.navbar-text.navbar-rightul.navbar-nav.mr-auto(またはspan.navbar-text.ml-auto

 

ナビゲーションバーの配色(Color schemes)

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

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-default">
	...
</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light bg-light">
	...
</nav>

【設定】

  • .navbar.navbar-light(文字を黒めにする)と .bg-light(灰色の背景色)を追加

【Bootstrap3.xとの変更箇所】

  • .navbar.navbar-default.navbar.navbar-light.bg-light
見本
Bootstrap3.xの設定例
<nav class="navbar navbar-dark">
	...
</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-dark bg-dark">
	...
</nav>

【設定】

  • .navbar.navbar-dark(文字を白にする)と .bg-dark(黒色の背景色)を追加

【Bootstrap3.xとの変更箇所】

  • .navbar.navbar-dark.navbar.navbar-dark.bg-dark
見本
設定例
<nav class="navbar navbar-dark bg-primary">
	...
</nav>

【設定】

  • .navbar.navbar-light(明るめの背景色=黒文字の場合)または .navbar-dark(暗めの背景色=白文字の場合)を追加して、さらに .bg-{themecolor}定義済みの背景色)を追加
見本
設定例
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
	...
</nav>

【設定】

  • .navbar.navbar-light または .navbar.navbar-dark に任意の背景色をスタイル設定

 

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

必須ではないが、.container でナビゲーションバーを囲んでページ上に配置したり、固定または静的なトップナビゲーションバーのコンテンツを中央にのみ配置することが可能。

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

見本 画像で表示

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

Bootstrap3.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-default">
	<div class="container-fluid">
		...
	</div><!-- /.container-fluid -->
</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	...
</nav>

【設定】

  • .navbar

【Bootstrap3.xとの変更箇所】

  • .navbar > .container-fluid.navbar

サイトの本体と同じ幅のナビゲーションバー v4.0.0設定変更 実例

見本 画像で表示

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

Bootstrap3.xの設定例 赤背景が変更箇所
<div class="container">
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			...
		</div><!-- /.container-fluid -->
	</nav>
</div><!-- /.container -->
Bootstrap4.xの設定例 緑背景が変更箇所
<div class="container">
	<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
		...
	</nav>
</div><!-- /.container -->

【設定】

【Bootstrap3.xとの変更箇所】

  • .container > .navbar > .container-fluid.container > .navbar

コンテナがnavbar内にある場合、指定された .navbar-expand{-sm|-md|-lg|-xl} クラスよりも下のブレークポイントでは水平方向のpaddigが削除される。これにより、ナビゲーションバーが折り畳まれているときは、狭いビューポートで不必要にpaddingが倍増することはない。

見本 画像で表示

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

Bootstrap3.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-default">
	<div class="container">
		...
	</div><!-- /.container -->
</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<div class="container">
		...
	</div><!-- /.container -->
</nav>

【設定】

  • .navbar > .container

 

ナビゲーションバーの配置(Placement)

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

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

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

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

見本 画像で表示

静的ナビゲーションバー

Bootstrap3.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-default navbar-static-top">
	<div class="container">
		...
	</div>
</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light bg-light">
	<a class="navbar-brand" href="#">ブランド</a>
	...
</nav>

【設定】

  • 特に追加設定する必要なし

【Bootstrap3.xとの変更箇所】

  • .navbar-static-top は廃止
見本 画像で表示

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

Bootstrap3.xの設定例 赤背景が変更箇所
<body style="padding-top:70px;">
	<nav class="navbar navbar-default navbar-fixed-top">
		<a class="navbar-brand" href="#">ブランド</a>
		...
	</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
<body style="padding-top:4.5rem;">
	<nav class="navbar navbar-light bg-light fixed-top">
		<a class="navbar-brand" href="#">ブランド</a>
		...
	</nav>

【設定】

  • .navbar.fixed-top を追加

【注意】

  • スクロールした時に最上部がナビゲーションバーと重なるので、別途 <body> タグに padding-top:4.5rem; のCSSスタイルを設定

【Bootstrap3.xとの変更箇所】

  • .navbar-fixed-top.fixed-top
  • CSS設定:padding-top:70px;padding-top:4.5rem;
見本 画像で表示

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

Bootstrap3.xの設定例 赤背景が変更箇所
<body style="padding-bottom:70px;">
	<nav class="navbar navbar-default navbar-fixed-bottom">
		<a class="navbar-brand" href="#">ブランド</a>
		...
	</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
<body style="padding-bottom:4.5rem;">
	<nav class="navbar navbar-light bg-light fixed-bottom">
		<a class="navbar-brand" href="#">ブランド</a>
		...
	</nav>

【設定】

  • .navbar.fixed-bottom を追加

【注意】

  • スクロールした時に最下部がナビゲーションバーと重なるので、別途 <body> タグに padding-bottom:4.5rem; のCSSスタイルを設定

【Bootstrap3.xとの変更箇所】

  • .navbar-fixed-bottom.fixed-bottom
  • CSS設定:padding-bottom:70px;padding-bottom:4.5rem;

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

見本 画像で表示

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

設定例
<body class="py-3">
	<nav class="navbar sticky-top navbar-light bg-light">
		<a class="navbar-brand" href="#">ブランド</a>
		...
	</nav>

【設定】

  • .navbar.sticky-top を追加

【注意】

 

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

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

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

切替(Toggler)v4.0.0設定変更

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

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

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Navbar" aria-expanded="false">
				<span class="sr-only">ナビゲーションの切替</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div><!-- /.navbar-header -->
		<div class="collapse navbar-collapse" id="Navbar">
			<a class="navbar-brand" href="#">ブランド</a>
			<ul class="nav navbar-nav">
				...
			</ul>
			<form class="navbar-form navbar-right">
				...
			</form>
		</div><!-- /.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">
			...
		</form>
	</div><!-- /.collapse -->
</nav>

2. 折り畳まれると左にブランド名、右に切替ボタン v4.0.0設定変更

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navber" aria-expanded="false">
				<span class="sr-only">ナビゲーションの切替</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">ブランド</a>
		</div><!-- /.navbar-header -->
		<div class="collapse navbar-collapse" id="Navber">
			<ul class="nav navbar-nav">
				...
			</ul>
			<form class="navbar-form navbar-right">
				...
			</from>
		</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">
			...
		</form>
	</div><!-- /.navbar-collapse -->
</nav>

3. 折り畳まれると左に切替ボタン、右にブランド名 v4.0.0新設

見本
設定例
<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">
			...
		</form>
	</div>
</nav>

【設定】

  • .navbar.navbar-expand-{breakpoint} > [button.navbar-toggler[data-toggle="collapse"][data-target="#ID"]]《ボタン》 + a.navbar-brand《ブランド》 + [#ID.collapse.navbar-collapse > ul.navbar-nav]《メニュー》
  • .navbar-expand-{breakpoint} は、モバイルサイズでのみ折り畳みたい場合は、.navbar-expand-md に、タブレットサイズ以下で折り畳みたい場合は、.navbar-expand-lg を使用(各サイズの動作は様々なナビゲーションバー参照)
  • 折り畳まれたときにブランドを隠したい場合は、a.navbar-branddiv.collapse.navbar-collapse 内に入れる
  • 切替ボタンを右側に表示したい場合は、a.navbar-brand《ブランド》 ⇒ button.navbar-toggler《切替ボタン》 の順に記載
  • 切替ボタンを左側に表示したい場合は、button.navbar-toggler《切替ボタン》 ⇒ a.navbar-brand《ブランド》 の順に記載

【変更履歴】

  • 【v4.0.0-beta.3】切替ボタンにカーソルを合わせた際に、指カーソル(cursor: pointer;)に変化しない仕様を取り止め

【Bootstrap3.xとの変更箇所】

  • .navbar > .container(または .container-fluid)> [.navbar-header > <button>《切替ボタン》 + a.navbar-brand《ブランド》] + .collapse.navbar-collapse《ナビゲーション》 ⇒ .navbar.navbar-expand-{breakpoint} > [<button>《切替ボタン》 + a.navbar-brand《ブランド》] + .collapse.navbar-collapse《ナビゲーション》(div.container-fluiddiv.navbar-header の設定は不要に)
  • 切替ボタン:button.navbar-togglebutton.navbar-toggler
  • ☰(ボタンアイコン):span.sr-only + span.icon-bar×3 ⇒ span.navbar-toggler-icon
  • 左側に切替ボタンを表示することが可能に
  • 切替ボタンはデフォルトで左寄せに変更(ボタンを右側に表示したい場合は、《ブランド》 ⇒ 《切替ボタン》 の順に記載

外部コンテンツ(External content)

場合によっては、折り畳みプラグインを使用して、ページの他の場所にある非表示コンテンツに切り替えたい場合もある。Bootstrapのプラグインは iddata-target のマッチングで動作するので、簡単に実行可能。

見本
設定例
<!-- 非表示コンテンツ -->
<div class="collapse" id="navbarToggleExternalContent">
	<div class="bg-dark p-4">
		<h4 class="text-white">折り畳みコンテンツ</h4>
		<span class="text-muted">ナビゲーションバーブランド経由で切り替え可能。</span>
	</div>
</div>

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

【設定】

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

 

Bootstrap4.0で廃止になったもの(上記以外)

  • フォーム以外でのボタン:.navbar-btn
  • テキストリンク:.navbar-link