ナビ&タブ～Bootstrap5設置ガイド

基本のナビゲーション（Base nav）

Bootstrapで利用可能なナビゲーションは、基本となる .nav クラスからアクティブ状態、無効状態、一般的なマークアップとスタイルを共有。修飾子クラスを入れ替えて各スタイルを切り替える。

基本の .nav コンポーネントはFlexboxで構築され、すべてのタイプのナビゲーションコンポーネントを構築するための強力な基盤を提供。これには（リストを操作するための）スタイル再定義、ヒット領域のリンク埋め込み、基本的な無効状態のスタイルが組み込まれている。

基本の .nav コンポーネントは、.active 状態を含まない。次の例にはクラスが含まれている。主に、この特定のクラスが特別なスタイルを発動しないことを示すため。

アクティブな状態を支援技術に伝えるには、aria-current 属性を使用－現在のページを示す page 値かセット内の現在のアイテムを示す true を使用。

1. リスト(`<ul>` > `<li>`)で設定

見本

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

<ul class="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>

クラスが全体を通して使用されるため、マークアップを柔軟に行うことが可能。上記のような <ul> を使用するか、<nav> 要素を使って自分自身を作動させる。.nav は display: flex を使用するので、ナビゲーションのリンクはナビゲーションのアイテムと同じように動作するが、特別なマークアップはない。

2. ナビゲーション(`<nav>`)で設定

見本

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

<nav class="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>
</nav>

【設定】

<ul> を使用する場合：ul.nav > li.nav-item > a.nav-link
<nav> を使用する場合：nav.nav > a.nav-link
リンクをアクティブにする場合：a.nav-link に .active を追加
リンクを無効にする場合：a.nav-link に .disabled を追加

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

.active と同じ要素に aria-current="page"（支援技術に現在のページであることを伝える）を入れる
.disabled と同じ要素に、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）と aria-disabled="true"（支援技術に要素が無効の状態であることを伝える）を入れる

【変更履歴】

【v5.0.0-alpha1】
- .active 関連のアクセシビリティの設定を追加

使用可能なスタイル（Available styles）

修飾子とユーティリティを使用して .nav コンポーネントのスタイルを変更。必要に応じてミックスしたり、自分で作成可能。

水平方向の位置合わせ（Horizontal alignment）

Flexユーティリティを使用してnavの水平方向の配置を変更。デフォルトでは、ナビゲーションは行頭揃えだが、簡単に中央揃えや行末揃えに変更可能。

1. 中央揃え

.justify-content-center で中央揃え：

見本

設定例

<ul class="nav justify-content-center">
	...
</ul>

2. 行末揃え

.justify-content-end で行末揃え：

見本

設定例

<ul class="nav justify-content-end">
	...
</ul>

【設定】

中央揃え：.nav に .justify-content-center を追加
行末揃え：.nav に .justify-content-end を追加

縦積み（Vertical）

Flexアイテムの方向を .flex-column ユーティリティで変更して、ナビゲーションを縦積みにする。それらをいくつかのビューポートだけで縦積みにする必要があるなら、レスポンシブ対応クラス（.flex-sm-columnなど）を使用。

1. リスト(`<ul>` > `<li>`)で設定

見本

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

<ul class="nav flex-column">
	<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>

2. ナビゲーション(`<nav>`)で設定

<ul> を使わない縦積みナビゲーションも可能。

見本

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

<nav class="nav flex-column">
	<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>
</nav>

【設定】

.nav に .flex-column を追加

タブナビゲーション（Tabs）

上記の基本的なナビゲーションを使用して、.nav-tabs クラスを追加してタブ付きのインターフェースを生成。それらを使用して、タブJavaScriptプラグインでタブ可動領域を作成。

見本

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

<ul class="nav nav-tabs">
	<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">アクティブ</a></li>
	<li class="nav-item"><a href="#" class="nav-link">リンク1</a></li>
	<li class="nav-item"><a href="#" class="nav-link">リンク2</a></li>
	<li class="nav-item"><a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>

【設定】

ul.nav.nav-tabs > li.nav-item > a.nav-link
最初に表示するタブは、あらかじめ a.nav-link.active でアクティブ化しておく
無効化したいタブは、a.nav-link.disabled にする

【注意】

タブを使ったコンテンツの切替についてはJavaScriptの動作に記載
.nav.nav-tabs に .flex-column を追加して縦積みにすることはできるが、レイアウト的には推奨しない

ピルナビゲーション（Pills）

同様のHTMLを使用するが、代わりに .nav-pills を使用：

見本

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

<ul class="nav nav-pills">
	<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">アクティブ</a></li>
	<li class="nav-item"><a href="#" class="nav-link">リンク1</a></li>
	<li class="nav-item"><a href="#" class="nav-link">リンク2</a></li>
	<li class="nav-item"><a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>

【設定】

ul.nav.nav-pills > li.nav-item > a.nav-link
最初に表示するリンクは、あらかじめ a.nav-link.active でアクティブ化しておく
無効化したいリンクは、a.nav-link.disabled にする

【注意】

ピルを使ったコンテンツの切替についてはJavaScriptの動作に記載

幅一杯と等幅サイズ（Fill and justify）

.nav の内容を2つの修飾子クラスのうちの利用可能な幅の1つを強制的に拡張。使用可能なすべての空白に比例して .nav-items で満たすために .nav-fill を使用。すべての横方向の空白が占有されるが、すべてのナビゲーションメニューが同じ幅になるわけではない。

1. 幅一杯で不均等サイズ

見本（`<ul>` > `<li>` で設定する場合）

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

<ul class="nav nav-pills nav-fill">
	<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">アクティブ</a></li>
	<li class="nav-item"><a href="#" class="nav-link">かなり長めのリンク</a></li>
	<li class="nav-item"><a href="#" class="nav-link">リンク</a></li>
	<li class="nav-item"><a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>

<nav> ベースのナビゲーションを使う場合は、<a> 要素のスタイル設定には .nav-link のみが必要なので、.nav-item は安全に省略可能。

見本（`<nav>` で設定する場合）

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

<nav class="nav nav-pills nav-fill">
	<a class="nav-link active" aria-current="page" href="#">アクティブ</a>
	<a class="nav-link" href="#">かなり長めのリンク</a>
	<a class="nav-link" href="#">リンク</a>
	<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>

【設定】

.nav に .nav-fill を追加

【注意】

<nav> で設定する場合、a.nav-link に .nav-item の追加は不要【v4.5.1で変更】

等しい幅の要素については、.nav-justified を使用。すべての横方向の空白はナビゲーションリンクで占有されるが、上記の.nav-fillとは異なり、すべてのナビゲーションメニューは同じ幅になる。

2. 幅一杯で等幅サイズ

見本（`<ul>` > `<li>` で設定する場合）

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

<ul class="nav nav-pills nav-justified">
	<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">アクティブ</a></li>
	<li class="nav-item"><a href="#" class="nav-link">かなり長めのリンク</a></li>
	<li class="nav-item"><a href="#" class="nav-link">リンク</a></li>
	<li class="nav-item"><a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>

.nav-fill の例と同様に <nav> ベースのナビゲーションを使用する場合は、次のとおり。

見本（`<nav>` で設定する場合）

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

<nav class="nav nav-pills nav-justified">
	<a class="nav-link active" aria-current="page" href="#">アクティブ</a>
	<a class="nav-link" href="#">かなり長めのリンク</a>
	<a class="nav-link" href="#">リンク</a>
	<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>

【設定】

.nav に .nav-justified を追加

【注意】

<nav> で設定する場合、a.nav-link に .nav-item の追加は不要【v4.5.1で変更】

Flexユーティリティの使用（Working with flex utilities）

レスポンス型のナビゲーションが必要な場合は、一連のFlexユーティリティの使用を検討すること。これらのユーティリティは、より冗長になるが、レスポンス可能なブレークポイント全体にわたってより大きなカスタマイズを提供。下記の例では、ナビゲーションは極小のブレークポイントでは縦積みになり、小のブレークポイントから利用可能な幅を埋め込む横並びのレイアウトに適応。

見本

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

<nav class="nav nav-pills flex-column flex-sm-row">
	<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">アクティブ</a>
	<a class="flex-sm-fill text-sm-center nav-link" href="#">リンク1</a>
	<a class="flex-sm-fill text-sm-center nav-link" href="#">リンク2</a>
	<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>

アクセシビリティに関して（Regarding accessibility）

ナビゲーションバーを提供するためにナビゲーション(navs)を使用している場合は、<ul> の最も論理的な親コンテナに role="navigation" を追加するか、ナビゲーション全体を <nav> 要素で囲むようにし、<ul> 自体に role 属性を追加しないこと。これは、補助技術に実際のリストとして通知されないようにするためである。

ナビゲーションバーは、.nav-tabs クラスでタブとして視覚的にスタイルされていても、role="tablist"、role="tab" や role="tabpanel" 属性を与えるべきではないことに注意すること。これらは、WAI-ARIA オーサリングプラクティスで説明されているように、動的タブ付きインタフェースにのみ適している。実例については、このセクションの動的タブ付きインタフェースのJavaScript動作に記載。JavaScriptはアクティブなタブに aria-selected="true" を追加することで選択状態を処理するため、動的タブ付きインターフェースでは aria-current 属性は必要ない。

ドロップダウン付きナビゲーション（Using dropdowns）v5.0.0-beta1設定変更

少し追加したHTMLとドロップダウンJavaScriptプラグインでドロップダウンのメニューを追加。

ドロップダウン付きタブナビゲーション（Tabs with dropdowns）

見本

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

<ul class="nav nav-tabs">
	<li class="nav-item">
		<a href="#" class="nav-link active" aria-current="page">アクティブ</a>
	</li>
	<li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a>
		<ul class="dropdown-menu">
			<li><a class="dropdown-item" href="#">メニュー1</a></li>
			...
		</ul>
	</li>
	...
</ul>

※Bootstrap4.xの設定例赤背景が変更箇所

<ul class="nav nav-tabs">
	<li class="nav-item">
		<a href="#" class="nav-link active">アクティブ</a>
	</li>
	<li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
		</div>
	</li>
	...
</ul>

【設定】

ul.nav.nav-tabs >（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.nav-tabs > li.nav-item.dropdown 内にドロップメニューを入れる

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

ドロップダウンリンク（a.dropdown-toggle）に role="button" 属性（ボタンの役割を示す）を入れる
aria-expanded="false" 属性（要素の開閉の状態を示す）を入れる

【変更履歴】

【v5.0.0-alpha1】
- .active 関連のアクセシビリティの設定を追加
- ドロップダウン部分の設定が変更
【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-toggle="dropdown"] ⇒ [data-bs-toggle="dropdown"]

ドロップダウン付きピルナビゲーション（Pills with dropdowns）

見本

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

<ul class="nav nav-pills">
	<li class="nav-item">
		<a href="#" class="nav-link active" aria-current="page">アクティブ</a>
	</li>
	<li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a>
		<ul class="dropdown-menu">
			<li><a class="dropdown-item" href="#">メニュー1</a></li>
			...
		</ul>
	</li>
	...
</ul>

※Bootstrap4.xの設定例赤背景が変更箇所

<ul class="nav nav-pills">
	<li class="nav-item">
		<a href="#" class="nav-link active">アクティブ</a>
	</li>
	<li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
		</div>
	</li>
	...
</ul>

【設定】

ul.nav.nav-pills >（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.nav-pills > li.nav-item.dropdown内にドロップメニューを入れる

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

ドロップダウンリンク（a.dropdown-toggle）に role="button" 属性（ボタンの役割を示す）を入れる
aria-expanded="false" 属性（要素の開閉の状態を示す）を入れる

【変更履歴】

【v5.0.0-alpha1】
- .active 関連のアクセシビリティの設定を追加
- ドロップダウン部分の設定が変更
【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-toggle="dropdown"] ⇒ [data-bs-toggle="dropdown"]

JavaScript動作（JavaScript behavior）v5.0.0-beta2設定変更

個別かコンパイルされた bootstrap.js ファイルに組み込まれているタブJavaScriptプラグインを使用して、タブやピルのナビゲーションを拡張してローカルコンテンツのタブ切替可能な領域が作成可能。

WAI-ARIA オーサリングプラクティスで説明されているように、動的タブ付きインタフェースは、role ="tablist"、role="tab"、role="tabpanel"、追加の aria- 構造、機能、現在の状態を支援技術（スクリーンリーダーなど）のユーザーに提供する。最善の技法として、タブに <button> 要素を使用することを推奨。これらは、新しいページや場所に移動するリンクではなく、動的な変更を発動するコントロールであるため。

動的タブ付きインタフェースには、ユーザビリティとアクセシビリティの両方の問題が発生するためドロップダウンのメニューを入れてはいけない。ユーザビリティの観点からは、現在表示されているタブの切替え要素が（閉じられたドロップダウンのメニューの中にあるので）すぐには見えないという事実が混乱の原因となる。アクセシビリティの観点からは、現在のところ、この種の構造を標準的なWAI ARIAパターンに割り付ける賢明な方法はなく、支援技術のユーザーには容易に理解できない。

1. タブナビゲーションの場合

見本

タブパネルのプレースホルダーコンテンツ。これはホームタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはプロフィールタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはコンタクトタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

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

<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs mb-3" role="tablist">
	<li class="nav-item" role="presentation">
		<button id="home-tab" class="nav-link active" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">ホーム</button>
	</li>
	<li class="nav-item" role="presentation">
		<button id="profile-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">プロフィール</button>
	</li>
	<li class="nav-item" role="presentation">
		<button id="contact-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">コンタクト</button>
	</li>
</ul>

<!-- パネル部分 -->
<div id="myTabContent" class="tab-content">
	<div id="home" class="tab-pane active" role="tabpanel" aria-labelledby="home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div id="profile" class="tab-pane" role="tabpanel" aria-labelledby="profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div id="contact" class="tab-pane" role="tabpanel" aria-labelledby="contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs mb-3" role="tablist">
  <li class="nav-item" role="presentation">
    <a id="home-tab" class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">ホーム</a>
  </li>
  <li class="nav-item" role="presentation">
    <a id="profile-tab" class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">プロフィール</a>
  </li>
  <li class="nav-item" role="presentation">
    <a id="contact-tab" class="nav-link" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">コンタクト</a>
  </li>
</ul>

<!-- パネル部分 -->
<div id="myTabContent" class="tab-content">
  <div id="home" class="tab-pane active" role="tabpanel" aria-labelledby="home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
  <div id="profile" class="tab-pane" role="tabpanel" aria-labelledby="profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
  <div id="contact" class="tab-pane" role="tabpanel" aria-labelledby="contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>

2. ナビゲーション(`<nav>`)で設定

これは上記のように <ul> ベースのマークアップか任意の「独自のロール」マークアップをすれば動作するので、自分のニーズに合うように設定する。<nav> を使用する場合は、role="tablist" を直接追加しないように注意すること。これは、ナビゲーションの目印として要素の本来の役割を上書きするため。代わりに、代替要素（下記の例では単純な <div>）に切り替え、それを <nav> で囲むこと。

見本

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

<nav>
	<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
		<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">ホーム</button>
		<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">プロフィール</button>
		<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">コンタクト</button>
	</div>
</nav>

<div class="tab-content" id="nav-tabContent">
	<div class="tab-pane active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div class="tab-pane" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

<nav>
  <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
    <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">ホーム</a>
    <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">プロフィール</a>
    <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">コンタクト</a>
  </div>
</nav>

<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
  <div class="tab-pane" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>

3. ピルナビゲーションの場合フェード効果付き

タブプラグインは、ピルとの併用も可能。

見本

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

<!-- ピル部分 -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
	<li class="nav-item" role="presentation">
		<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">ホーム</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">プロフィール</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">コンタクト</button>
	</li>
</ul>

<!-- パネル部分 -->
<div class="tab-content" id="pills-tabContent">
	<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

<!-- ピル部分 -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">ホーム</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">プロフィール</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">コンタクト</a>
  </li>
</ul>

<!-- パネル部分 -->
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">タブパネルのプレースホルダーコンテンツ。
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>

4. 縦積みのピルナビゲーションフェード効果付き

そして縦積みのピルナビゲーションでも設置可能。

見本

タブパネルのプレースホルダーコンテンツ。これはメッセージタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはセッティングタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

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

<div class="d-flex align-items-start">
	<div class="nav flex-column nav-pills flex-shrink-0 me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
		<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">ホーム</button>
		<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">プロフィール</button>
		<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">メッセージ</button>
		<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">セッティング</button>
	</div>
	<div class="tab-content" id="v-pills-tabContent">
		<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
			<p>タブパネルのプレースホルダーコンテンツ。...</p>
		</div>
		<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
			<p>タブパネルのプレースホルダーコンテンツ。...</p>
		</div>
		<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
			<p>タブパネルのプレースホルダーコンテンツ。...</p>
		</div>
		<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
			<p>タブパネルのプレースホルダーコンテンツ。...</p>
		</div>
	</div>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

<div class="row">
	<div class="col-3">
		<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
			<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">ホーム</a>
			...
		</div>
	</div>
	<div class="col-9">
		<div class="tab-content" id="v-pills-tabContent">
			<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
				<p>タブパネルのプレースホルダーコンテンツ。...</p>
			</div>
			...
		</div>
	</div>
</div>

【設定】

リストで設定：[ul.nav.nav-{tabs|pills} > li.nav-item > button.nav-link[data-bs-toggle="{tab|pill}"]]《タブ/ピル部分》 + [.tab-content > .tab-pane]《パネル部分》
ナビゲーションで設定：[<nav> > div.nav.nav-{tabs|pills} > button.nav-link[data-bs-toggle="{tab|pill}"]]《タブ/ピル部分》 + [.tab-content > .tab-pane]《パネル部分》
縦積みピルナビゲーション：.d-flex.align-items-start > .nav.flex-column.nav-pills.flex-shrink-0.me-3 > button.nav-link[data-bs-toggle="pill"]《ピル部分》
（タブ/ピルと同様に）最初に表示するパネルには、あらかじめ .tab-pane に .active を追加しておく
プラグインを使ってタブ/ピルを切り替えるために、無効化以外のタブ/ピルのアンカーリンク（<button>）に data-bs-toggle="{tab|pill}" を入れる

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

.nav.nav-{tabs|pills} に、role="tablist"（タブリストの役割を伝える）を入れる
li.nav-item に、role="presentation"（支援技術に要素の意味を打ち消していることを伝える）を入れる（ul.nav.nav-{tabs|pills}[role="tablist"] とセットで設定）【v4.5.0で変更】
button.nav-link に、
- role="tab" 属性（支援技術にタブ部分の役割を伝える）
- aria-controls="パネルのID" 属性（タブパネルのタブ部分とパネル部分を関連付ける）
- 最初に表示するタブ/ピルに aria-selected="true" 属性、それ以外のタブ/ピルに aria-selected="false" 属性（支援技術に要素の選択の状態を伝える）
を入れる
div.tab-pane に、
- role="tabpanel" 属性（支援技術にパネル部分の役割を伝える）
- aria-labelledby="タブ/ピルのID" 属性（タブパネルのタブ部分とパネル部分を関連付ける）
を入れる
縦積みのピルナビゲーションでは、div.nav.flex-column.nav-pills に、aria-orientation="vertical" 属性（支援技術に要素の向きが垂直であることを伝える）を入れる

【注意】

ナビゲーションで設定する場合、button.nav-link に .nav-item の追加は不要【v4.5.1で変更】
上下のタブ/ピルとパネルとの間には空白がないので、.nav-{tabs|pills} か .tab-content に空白ユーティリティクラスを追加して調整する（上記の見本ではタブ/ピルとパネルの間にマージンを1rem入れる設定）
ドロップダウンの設定は不可（ユーザビリティとアクセシビリティの両方の問題が発生するため）

【変更履歴】

【v5.0.0-alpha2】
- 縦積みピルナビゲーション：.row > [.col-3 > .nav.flex-column.nav-pills] + {.col-9 > .tab-content] ⇒ .d-flex.align-items-start > .nav.flex-column.nav-pills.flex-shrink-0.mr-3 + .tab-content（グリッドクラスからFlexユーティリティクラスによる設定に変更）
【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-toggle="{tab|pill}"] ⇒ [data-bs-toggle="{tab|pill}"]
- RTL（右書き）の設定追加に伴い空白ユーティリティのクラス名変更
  - .mr-3 ⇒ .me-3
【v5.0.0-beta2】
- タブ/ピル部分：a.nav-link[href] ⇒ button.nav-link[data-bs-target type="button"]

データ属性を利用（Using data attributes）

要素に data-bs-toggle="tab" か data-bs-toggle="pill" と指定するだけで、JavaScriptを記述することなくタブやピルのナビゲーションを有効にすることが可能。これらのデータ属性は、.nav-tabs や .nav-pills で使用。

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

<!-- タブ部分 -->
<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
	<li class="nav-item" role="presentation">
		<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">ホーム</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">プロフィール</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">メッセージ</button>
	</li>
	<li class="nav-item" role="presentation">
		<buttonclass="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">セッティング</button>
	</li>
</ul>

<!-- パネル部分 -->
<div class="tab-content">
	<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
	<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
	<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

JavaScript経由で（Via JavaScript）v5.0.0-beta2設定変更

JavaScriptを使用してタブ切替可能なタブを有効にする（各タブは個別に有効にする必要あり）：

Bootstrap5.xの設定例

JavaScriptvar triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
	var tabTrigger = new bootstrap.Tab(triggerEl)

	triggerEl.addEventListener('click', function (event) {
		event.preventDefault()
		tabTrigger.show()
	})
})

※Bootstrap4.xの設定例

JavaScript$('#myTab a').on('click',function (event) {
	event.preventDefault()
	$(this).tab('show')
})

様々な方法で個々のタブをアクティブにすることが可能：

Bootstrap5.xの設定例

JavaScriptvar triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // タブ名で選択

var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // 最初のタブを選択

※Bootstrap4.xの設定例

JavaScript$('#myTab a[href="#profile"]').tab('show') // タブ名で選択

$('#myTab li:first-child a').tab('show') // 最初のタブを選択

【変更履歴】

【v5.0.0-alpha1】
- JavaScriptの設定がjQueryに依存しない方法に変更
【v5.0.0-beta2】
- #myTab a[href] ⇒ #myTab button[data-bs-target]

フェード効果（Fade effect）

タブパネルをフェードインさせるには、各 .tab-pane に .fade を追加。最初のタブパネルには、最初のコンテンツを表示させるために .show が必要。

<div class="tab-content">
	<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
	<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
	<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
	<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

メソッド（Methods）v5.0.0-alpha1メソッド追加、v5.0.0-beta2設定変更

非同期メソッドと遷移

すべてのAPIメソッドは、非同期で遷移を開始する。それらは移行が始まるとすぐに呼び出し元に戻るが、終了する前に呼び出し元に戻る。さらに、遷移コンポーネントのメソッド呼び出しは無視される。

詳細については、Javascriptのドキュメントに記載。

コンストラクタ（constructor）

タブ要素とコンテンツコンテナをアクティブにする。タブには、DOM内のコンテナの接点をターゲットとする data-bs-target か href が必要。

●最初のタブにactive設定していても最後のタブがアクティブになる例

HTML<ul class="nav nav-tabs" id="myTab" role="tablist">
	<li class="nav-item">
		<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">ホーム</button>
	</li>
	<li class="nav-item">
		<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">プロフィール</button>
	</li>
	<li class="nav-item">
		<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">メッセージ</button>
	</li>
	<li class="nav-item">
		<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">セッティング</button>
	</li>
</ul>

<div class="tab-content">
	<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
	<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
	<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Bootstrap5.xの設定例

JavaScript<script>
	var firstTabEl = document.querySelector('#myTab li:last-child button')
	var firstTab = new bootstrap.Tab(firstTabEl)

	firstTab.show()
</script>

※Bootstrap4.xの設定例

JavaScript<script>
	$(function () {
		$('#myTab li:last-child a').tab('show')
	})
</script>

show

指定されたタブを選択し、関連するコンテンツを表示。その前に選択された他のタブは選択解除され、関連するコンテンツは非表示になる。タブパネル区画が実際に表示される前（つまり、shown.bs.tab イベント発動前）に呼び出し元に戻る。

JavaScript  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

dispose

要素のタブを破棄。

getInstance v5.0.0-alpha1追加

DOM要素に関連付けられたタブ・インスタンスを取得することを可能にする静的メソッド

JavaScriptvar triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Bootstrapタブ・インスタンスを返す

【変更履歴】

【v5.0.0-alpha1】
- $().tab('xxx') ⇒ tab.xxx()
- getInstance メソッドが追加
【v5.0.0-beta2】
- #myTab li:last-child a ⇒ #myTab li:last-child button

イベント（Events）

新しいタブを表示すると、イベントは次の順序で発動：

hide.bs.tab（現在のアクティブなタブに）
show.bs.tab（次に表示されるタブに）
hidden.bs.tab（前のアクティブなタブでは hide.bs.tab イベントと同じもの）
shown.bs.tab（新しくアクティブ化されて表示されるタブでは show.bs.tab イベントと同じもの）

既にアクティブなタブがない場合、hide.bs.tab と hidden.bs.tab イベントは発動しない。

イベントタイプ	説明
`show.bs.tab`	タブが表示される前に、タブの表示で発動。アクティブなタブと前のアクティブなタブ（使用可能な場合）をそれぞれターゲットにするには `event.target` と `event.relatedTarget` を使用
`shown.bs.tab`	タブが表示された後、タブの表示で発動。アクティブなタブと前のアクティブなタブ（使用可能な場合）をそれぞれターゲットにするには `event.target` と `event.relatedTarget` を使用
`hide.bs.tab`	新しいタブが表示されるときに発動（従って、前のアクティブなタブは非表示になる）。`event.target` と `event.relatedTarget` を使用して、現在のアクティブなタブと次にアクティブになる新しいタブをそれぞれターゲットにする
`hidden.bs.tab`	新しいタブが表示された後に発動（従って、前のアクティブなタブは非表示になる）。`event.target` と `event.relatedTarget` を使用して、前のアクティブなタブと新しいアクティブなタブをそれぞれターゲットにする

使用例 v5.0.0-beta2設定変更

JavaScriptvar tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
	event.target // 新しくアクティブ化されたタブ
	event.relatedTarget // 前のアクティブなタブ
})

前のページ
モーダル次のページ
ナビゲーションバー

ナビ&タブ（Navs and tabs） v5.0.0-alpha1設定変更

基本のナビゲーション（Base nav）

1. リスト(<ul> > <li>)で設定

見本

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

2. ナビゲーション(<nav>)で設定

見本

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

【設定】

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

【変更履歴】

使用可能なスタイル（Available styles）

水平方向の位置合わせ（Horizontal alignment）

1. 中央揃え

見本

設定例

2. 行末揃え

見本

設定例

【設定】

縦積み（Vertical）

1. リスト(<ul> > <li>)で設定

見本

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

2. ナビゲーション(<nav>)で設定

見本

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

【設定】

タブナビゲーション（Tabs）

見本

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

【設定】

【注意】

ピルナビゲーション（Pills）

見本

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

【設定】

【注意】

幅一杯と等幅サイズ（Fill and justify）

1. 幅一杯で不均等サイズ

見本（<ul> > <li> で設定する場合）

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

見本（<nav> で設定する場合）

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

【設定】

【注意】

2. 幅一杯で等幅サイズ

見本（<ul> > <li> で設定する場合）

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

見本（<nav> で設定する場合）

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

【設定】

【注意】

Flexユーティリティの使用（Working with flex utilities）

見本

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

アクセシビリティに関して（Regarding accessibility）

ドロップダウン付きナビゲーション（Using dropdowns）v5.0.0-beta1設定変更

ドロップダウン付きタブナビゲーション（Tabs with dropdowns）

見本

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

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

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

【変更履歴】

ドロップダウン付きピルナビゲーション（Pills with dropdowns）

見本

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

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

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

【変更履歴】

JavaScript動作（JavaScript behavior）v5.0.0-beta2設定変更

1. タブナビゲーションの場合

見本

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

※Bootstrap4.xの設定例 赤背景が変更箇所

2. ナビゲーション(<nav>)で設定

見本

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

1. リスト(`<ul>` > `<li>`)で設定

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

2. ナビゲーション(`<nav>`)で設定

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

1. リスト(`<ul>` > `<li>`)で設定

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

2. ナビゲーション(`<nav>`)で設定

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

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

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

見本（`<ul>` > `<li>` で設定する場合）

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

見本（`<nav>` で設定する場合）

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

見本（`<ul>` > `<li>` で設定する場合）

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

見本（`<nav>` で設定する場合）

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

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

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

※Bootstrap4.xの設定例赤背景が変更箇所

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

※Bootstrap4.xの設定例赤背景が変更箇所

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

※Bootstrap4.xの設定例赤背景が変更箇所

2. ナビゲーション(`<nav>`)で設定

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

※Bootstrap4.xの設定例赤背景が変更箇所

3. ピルナビゲーションの場合フェード効果付き

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

※Bootstrap4.xの設定例赤背景が変更箇所

4. 縦積みのピルナビゲーションフェード効果付き

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

※Bootstrap4.xの設定例赤背景が変更箇所

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