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

Bootstrapのナビゲーションコンポーネントの使用方法に関する解説と例

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

このページの項目 v5.0.0設定変更

基本のナビゲーション（Base nav）v5.3.1設定変更

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

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

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

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

1. リスト（`<ul>` > `<li>`）で設定

見本

Bootstrap5.1.1～の設定例緑背景はv5.0.0-alpha1での変更箇所

<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" aria-disabled="true">無効</a>
  </li>
</ul>

※Bootstrap5.1.0の設定例赤背景が変更箇所

<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> を使用するか、<nav> 要素を使って自分自身を作動させる。.nav は display: flex を使用するので、ナビゲーションのリンクはナビゲーションのアイテムと同じように動作するが、特別なマークアップはない。

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

見本

Bootstrap5.1.1～の設定例緑背景はv5.0.0-alpha1での変更箇所

<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" aria-disabled="true">無効</a>
</nav>

※Bootstrap5.1.0の設定例赤背景が変更箇所

<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"（支援技術に現在のページだと伝える）を入れる
ナビリンクが無効の場合：a.nav-link.disabled と同じ要素に aria-disabled="true"（支援技術に要素が無効の状態だと伝える）を入れる

【変更履歴】

【v5.0.0-alpha1】
- .active 関連のアクセシビリティの設定を追加
【v5.1.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）、aria-disabled="true"（支援技術に要素が無効の状態だと伝える）の設定が不要に（参考、v4.6.1でバックポート）
【v5.3.1】
- ナビリンクが無効の場合（a.nav-link.disabled）の aria-disabled="true"（支援技術に要素が無効の状態だと伝える）の設定が復活

使用可能なスタイル（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 を追加

【変更履歴】

【v5.1.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に

縦積み（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" 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" aria-disabled="true">無効</a>
</nav>

【設定】

.nav に .flex-column を追加

【変更履歴】

【v5.1.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に
【v5.3.1】
- ナビリンクが無効の場合（a.nav-link.disabled）の aria-disabled="true"（支援技術に要素が無効の状態だと伝える）の設定が復活

タブナビゲーション（Tabs）v5.2.0デザイン変更

上記の基本的なナビゲーションを使用して、.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 class="nav-link disabled" 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 を追加して縦積みにすることはできるが、レイアウト的には推奨しない

【変更履歴】

【v5.1.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に
【v5.2.0】
- border-radius の値を調整したので、若干丸みを帯びたデザインに変更
【v5.3.1】
- ナビリンクが無効の場合（a.nav-link.disabled）の aria-disabled="true"（支援技術に要素が無効の状態だと伝える）の設定が復活

ピルナビゲーション（Pills）v5.2.0デザイン変更

同じ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 class="nav-link disabled" 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の動作に記載

【変更履歴】

【v5.1.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に
【v5.2.0】
- border-radius の値を調整したので、若干丸みを帯びたデザインに変更
【v5.3.1】
- ナビリンクが無効の場合（a.nav-link.disabled）の aria-disabled="true"（支援技術に要素が無効の状態だと伝える）の設定が復活

アンダーラインナビゲーション（Underline）v5.3.0新設

同じHTMLで代わりに .nav-underline を使用。

見本

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

<ul class="nav nav-underline">
  <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 class="nav-link disabled" aria-disabled="true">無効</a></li>
</ul>

【設定】

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

【注意】

アンダーラインを使ったコンテンツの切替についてはJavaScriptの動作に記載

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

2つの修飾子クラスのうち1つを使用して、.nav の内容を利用できる幅一杯に強制的に拡張。使用できるすべての空白に比例して .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 class="nav-link disabled" 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" aria-disabled="true">無効</a>
</nav>

【設定】

.nav に .nav-fill を追加

【注意】

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

【変更履歴】

【v5.1.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に
【v5.3.1】
- ナビリンクが無効の場合（a.nav-link.disabled）の aria-disabled="true"（支援技術に要素が無効の状態だと伝える）の設定が復活

等しい幅の要素については、.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 class="nav-link disabled" 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" aria-disabled="true">無効</a>
</nav>

【設定】

.nav に .nav-justified を追加

【注意】

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

【変更履歴】

【v5.1.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に
【v5.3.1】
- ナビリンクが無効の場合（a.nav-link.disabled）の aria-disabled="true"（支援技術に要素が無効の状態だと伝える）の設定が復活

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" aria-disabled="true">無効</a>
</nav>

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

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

ナビゲーションバーは、.nav-tabs クラスでタブとして視覚的にスタイルされていても、role="tablist"、role="tab" や role="tabpanel" 属性を与えるべきではないので注意。これらは、ARIA Authoring Practices Guide tabs patternで説明されているように、動的タブ付きインタフェースにのみ適している。実例については、このセクションの動的タブ付きインタフェースの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"]

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、ナビゲーションは、リアルタイムのカスタマイズを強化するために、.nav, .nav-tabs, .nav-pills でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

.nav 基本クラス：

デフォルトの設定

scss/_nav.scss 内 nav-css-vars の設定--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: #{$nav-link-color};
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

.nav-tabs 修飾子クラス：

デフォルトの設定

scss/_nav.scss 内 nav-tabs-css-vars の設定--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

.nav-pills 修飾子クラス：

デフォルトの設定

scss/_nav.scss 内 nav-pills-css-vars の設定--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

.nav-underline 修飾子クラス：v5.3.0追加

デフォルトの設定

scss/_nav.scss 内 nav-pills-css-vars の設定--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 nav-variables の設定$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           var(--#{$prefix}secondary-color);
$nav-link-focus-box-shadow:         $focus-ring-box-shadow;

$nav-tabs-border-color:             var(--#{$prefix}border-color);
$nav-tabs-border-width:             var(--#{$prefix}border-width);
$nav-tabs-border-radius:            var(--#{$prefix}border-radius);
$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color);
$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg);
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg;

$nav-pills-border-radius:           var(--#{$prefix}border-radius);
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

$nav-underline-gap:                 1rem;
$nav-underline-border-width:        .125rem;
$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color);

JavaScript動作（JavaScript behavior）v5.2.0設定変更、v5.3.0一部追加

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

1. タブナビゲーションの場合 v5.2.0設定変更

見本

これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。別のタブをクリックすると、このタブの表示が次のタブに切り替わる。タブJavaScriptは、クラスを交換してコンテンツの可視性とスタイルを制御。タブ、ピル、その他の .nav を利用したナビゲーションが使用できる。

これは、プロフィールタブに関連付けられたコンテンツのプレースホルダコンテンツ。別のタブをクリックすると、このタブの表示が次のタブに切り替わる。タブJavaScriptは、クラスを交換してコンテンツの可視性とスタイルを制御。タブ、ピル、その他の .nav を利用したナビゲーションが使用できる。

これは、コンタクトタブに関連付けられたコンテンツのプレースホルダコンテンツ。別のタブをクリックすると、このタブの表示が次のタブに切り替わる。タブJavaScriptは、クラスを交換してコンテンツの可視性とスタイルを制御。タブ、ピル、その他の .nav を利用したナビゲーションが使用できる。

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

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

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

<!-- パネル部分 -->
<div id="myTabContent" class="tab-content">
  <div class="tab-pane active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
    <p>これは、<strong>無効タブ</strong>の関連コンテンツの一部のプレースホルダーコンテンツ。</p>
  </div>
</div>

※Bootstrap4.6.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">
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div id="profile" class="tab-pane" role="tabpanel" aria-labelledby="profile-tab">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div id="contact" class="tab-pane" role="tabpanel" aria-labelledby="contact-tab">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
</div>

2. ナビゲーション（`<nav>`）で設定 v5.2.0設定変更

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

見本

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

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

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

<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">
    <p>これは、<strong>無効タブ</strong>の関連コンテンツの一部のプレースホルダーコンテンツ。</p>
  </div>
</div>

※Bootstrap4.6.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">
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
</div>

3. ピルナビゲーションの場合フェード効果付き、v5.2.0設定変更

タブプラグインは、ピルとの併用もできる。

見本

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

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

<!-- ピル部分 -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">ホーム</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">プロフィール</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">コンタクト</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>無効</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" tabindex="0">
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
    <p>これは、<strong>無効タブ</strong>の関連コンテンツの一部のプレースホルダーコンテンツ。</p>
  </div>
</div>

※Bootstrap4.6.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">
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
</div>

4. 縦積みのピルナビゲーションフェード効果付き、v5.2.0設定変更

そして縦積みのピルナビゲーションでも設置できる。理想的には、縦積みのピル場合、タブリストコンテナに aria-orientation="vertical" も追加する必要がある。

見本

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

これは、メッセージタブに関連付けられたコンテンツのプレースホルダコンテンツ。別のタブをクリックすると、このタブの表示が次のタブに切り替わる。タブJavaScriptは、クラスを交換してコンテンツの可視性とスタイルを制御。タブ、ピル、その他の .nav を利用したナビゲーションが使用できる。

これは、セッティングタブに関連付けられたコンテンツのプレースホルダコンテンツ。別のタブをクリックすると、このタブの表示が次のタブに切り替わる。タブJavaScriptは、クラスを交換してコンテンツの可視性とスタイルを制御。タブ、ピル、その他の .nav を利用したナビゲーションが使用できる。

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 type="button" class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">ホーム</button>
    <button type="button" class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">プロフィール</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>無効</button>
    <button type="button" class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">メッセージ</button>
    <button type="button" class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" 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" tabindex="0">
      <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
    </div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">
      <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
    </div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">
      <p>これは、<strong>無効タブ</strong>の関連コンテンツの一部のプレースホルダーコンテンツ。</p>
    </div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">
      <p>これは、<strong>メッセージタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
    </div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">
      <p>これは、<strong>セッティングタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
    </div>
  </div>
</div>

※Bootstrap4.6.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>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p></p>
      </div>
      ...
    </div>
  </div>
</div>

5. アンダーラインナビゲーションの場合フェード効果付き、v5.3.0追加

タブプラグインは、アンダーラインナビゲーションでも使用できる。

見本

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

設定例

<!-- アンダーラインナビゲーション部分 -->
<ul class="nav nav-underline mb-3" id="underline-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link active" id="underline-home-tab" data-bs-toggle="pill" data-bs-target="#underline-home" role="tab" aria-controls="underline-home" aria-selected="true">ホーム</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="underline-profile-tab" data-bs-toggle="pill" data-bs-target="#underline-profile" role="tab" aria-controls="underline-profile" aria-selected="false">プロフィール</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="underline-contact-tab" data-bs-toggle="pill" data-bs-target="#underline-contact" role="tab" aria-controls="underline-contact" aria-selected="false">コンタクト</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="underline-disabled-tab" data-bs-toggle="pill" data-bs-target="#underline-disabled" type="button" role="tab" aria-controls="underline-disabled" aria-selected="false" disabled>無効</button>
  </li>
</ul>

<!-- パネル部分 -->
<div class="tab-content" id="underline-tabContent">
  <div class="tab-pane fade show active" id="underline-home" role="tabpanel" aria-labelledby="underline-home-tab" tabindex="0">
    <p>これは、<strong>ホームタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="underline-profile" role="tabpanel" aria-labelledby="underline-profile-tab" tabindex="0">
    <p>これは、<strong>プロフィールタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="underline-contact" role="tabpanel" aria-labelledby="underline-contact-tab" tabindex="0">
    <p>これは、<strong>コンタクトタブ</strong>に関連付けられたコンテンツのプレースホルダコンテンツ。...</p>
  </div>
  <div class="tab-pane fade" id="underline-disabled" role="tabpanel" aria-labelledby="underline-disabled-tab" tabindex="0">
    <p>これは、<strong>無効タブ</strong>の関連コンテンツの一部のプレースホルダーコンテンツ。</p>
  </div>
</div>

【設定】

リストで設定：[ul.nav.nav-{tabs|pills} > li.nav-item > button.nav-link[data-bs-toggle="{tab|pill}" data-target type="button"]]《タブ/ピル部分》 + [.tab-content > .tab-pane]《パネル部分》
ナビゲーションで設定：[<nav> > div.nav.nav-{tabs|pills|underline} > button.nav-link[data-bs-toggle="{tab|pill}" data-target type="button"]]《タブ/ピル/アンダーライン部分》 + [.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" 属性（タブパネルのタブ部分とパネル部分を関連付ける）
- tabindex="0" 属性（タブパネルを明示的にフォーカス可能にする）
を入れる
縦積みのピルナビゲーションでは、div.nav.flex-column.nav-pills に、aria-orientation="vertical" 属性（支援技術に要素の向きが垂直だと伝える）を入れる
タブ/ピル/アンダーラインを無効にする場合は、.nav-link に disabled を入れる

【注意】

ナビゲーションで設定する場合、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"]（v4.6.2でバックポート）
【v5.2.0】
- div.tab-pane に、tabindex="0" 属性を入れる（Tabを押すとアクティブなタブとパネルに移動）
- 各ナビゲーションに無効状態のタブ/ピルを追加（1.タブナビゲーションの各パネルのIDを * ⇒ *-tab-pane に変更）
【v5.3.0】
- アンダーラインナビゲーションの場合を追加

アクセシビリティ（Accessibility）v5.2.0追加、v5.3.1更新

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

ARIAオーサリングプラクティスのパターンに沿って、現在アクティブなタブのみがキーボードフォーカスを受け取る。JavaScriptプラグインが初期化されると、すべての非アクティブなタブコントロールに tabindex="-1" が設定される。現在アクティブなタブにフォーカスが当たると、カーソルキーで前/次のタブがアクティブになる。Home キーと End キーは、それぞれ最初と最後のタブをアクティブにする。プラグインがそれに応じてroving tabindexを変更。ただし、JavaScriptプラグインは、カーソルキーの相互作用に関して、横並びタブリストと縦積みタブリストを区別しないことに注意。タブリストの方向に関係なく、上と左のカーソルは前のタブに移動し、下と右のカーソルは次のタブに移動。

一般に、キーボードナビゲーションを容易にするために、タブパネル内に意味のあるコンテンツを含む最初の要素がすでにフォーカス可能でない限り、タブパネル自体もフォーカス可能にすることを推奨。JavaScriptプラグインは、この側面を処理しようとしない—適切な場合は、マークアップに tabindex="0" を追加して、タブパネルを明示的にフォーカス可能にする必要がある。

タブJavaScriptプラグインは、ユーザビリティとアクセシビリティの両方の問題を引き起こすため、ドロップダウンメニューを含むタブ付きインターフェイスをサポートしていないので注意。ユーザビリティの観点から、現在表示されているタブの切り替え要素が（閉じたドロップダウンメニュー内にあるため）すぐに表示されないという事実は、混乱を引き起こす可能性がある。アクセシビリティの観点から、現在、この種の構造を標準的なWAI ARIAパターンに割り付ける賢明な方法はなく、支援技術のユーザーに簡単に理解できるようにはできない。

【変更履歴】

【v5.3.1】
- タブの移動で Home キー（有効な最初のタブに移動）と End キー（有効な最後のタブに移動）に対応

データ属性を利用（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 type="button" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-controls="home" aria-selected="true">ホーム</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">プロフィール</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" role="tab" aria-controls="messages" aria-selected="false">メッセージ</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" 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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

JavaScript経由で（Via JavaScript）v5.2.0設定変更

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

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

JavaScriptconst triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

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.6.xの設定例

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

様々な方法で個々のタブをアクティブにできる：

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

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

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

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

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.6.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]（v4.6.2でバックポート）
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

フェード効果（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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

メソッド（Methods）v5.0.2メソッド追加、v5.2.0設定変更

すべてのAPIメソッドは非同期で遷移を開始する。これらは、遷移が開始されるとすぐに呼び出し元に戻るが遷移が終了する前に戻る。さらに遷移中のコンポーネントでのメソッド呼び出しは無視される。詳細については、Javascriptのドキュメントに記載。

コンテンツをタブ要素として有効にする。

タブのインスタンスは、例えばコンストラクタで作成できる：

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

JavaScriptconst bsTab = new bootstrap.Tab('#myTab')

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

JavaScriptvar someListItemEl = document.querySelector('#myTab')
var bsTab = new bootstrap.Tab(someListItemEl)

メソッド	説明
`dispose`	要素のタブを破棄。
`getInstance` v5.0.0-alpha1追加	DOM要素に関連付けられたタブ・インスタンスを取得できる静的メソッド
`getOrCreateInstance` v5.0.2追加	DOM要素に関連付けられたタブ・インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。
`show`	指定されたタブを選択し、関連するコンテンツを表示。その前に選択された他のタブは選択解除され、関連するコンテンツは非表示になる。タブパネル区画が実際に表示される前（つまり、`shown.bs.tab` イベント発動前）に呼び出し元に戻る。

【変更履歴】

【v5.0.0-alpha1】
- $().tab('xxx') ⇒ tab.xxx()
- getInstance メソッドが追加
【v5.0.2】
- getOrCreateInstance メソッドが追加
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

イベント（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 イベントは発動しない。

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

使用例 v5.2.0設定変更

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

前のページ
ナビゲーションバー

次のページ
オフキャンバス

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

基本のナビゲーション（Base nav）v5.3.1設定変更

1. リスト（<ul> > <li>）で設定

見本

Bootstrap5.1.1～の設定例 緑背景はv5.0.0-alpha1での変更箇所

※Bootstrap5.1.0の設定例 赤背景が変更箇所

2. ナビゲーション（<nav>）で設定

見本

Bootstrap5.1.1～の設定例 緑背景はv5.0.0-alpha1での変更箇所

※Bootstrap5.1.0の設定例 赤背景が変更箇所

【設定】

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

【変更履歴】

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

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

1. 中央揃え

見本

設定例

2. 行末揃え

見本

設定例

【設定】

【変更履歴】

縦積み（Vertical）

1. リスト（<ul> > <li>）で設定

見本

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

2. ナビゲーション（<nav>）で設定

見本

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

【設定】

【変更履歴】

タブナビゲーション（Tabs）v5.2.0デザイン変更

見本

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

【設定】

【注意】

【変更履歴】

ピルナビゲーション（Pills）v5.2.0デザイン変更

見本

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

【設定】

【注意】

【変更履歴】

アンダーラインナビゲーション（Underline）v5.3.0新設

見本

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）

見本

1. リスト（`<ul>` > `<li>`）で設定

Bootstrap5.1.1～の設定例緑背景はv5.0.0-alpha1での変更箇所

※Bootstrap5.1.0の設定例赤背景が変更箇所

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

Bootstrap5.1.1～の設定例緑背景はv5.0.0-alpha1での変更箇所

※Bootstrap5.1.0の設定例赤背景が変更箇所

1. リスト（`<ul>` > `<li>`）で設定

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

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

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

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.6.xの設定例赤背景が変更箇所

2. ナビゲーション（`<nav>`）で設定 v5.2.0設定変更

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

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

3. ピルナビゲーションの場合フェード効果付き、v5.2.0設定変更

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

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

4. 縦積みのピルナビゲーションフェード効果付き、v5.2.0設定変更

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

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

5. アンダーラインナビゲーションの場合フェード効果付き、v5.3.0追加

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

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所