メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

ナビ&タブ(Navs and tabs) v5.0.0設定変更

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

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

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

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

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

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

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> 要素を使って自分自身を作動させる。.navdisplay: 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 にする
【注意】
【変更履歴】
  • 【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 を使用。すべての横方向の空白が占有されるが、すべてのナビゲーションメニューが同じ幅になるわけではない。

見本(<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とは異なり、すべてのナビゲーションメニューは同じ幅になる。

見本(<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】
  • 【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】
  • 【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プラグインを使用して、タブやピルのナビゲーションを拡張してローカルコンテンツのタブ切替可能な領域が作成できる。

見本

これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。別のタブをクリックすると、このタブの表示が次のタブに切り替わる。タブ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>

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

見本

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

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

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

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

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 を利用したナビゲーションが使用できる。

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

これは、メッセージタブに関連付けられたコンテンツのプレースホルダコンテンツ。別のタブをクリックすると、このタブの表示が次のタブに切り替わる。タブ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>

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

見本

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

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

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

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

設定例
<!-- アンダーラインナビゲーション部分 -->
<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-linkdisabled を入れる
【注意】
  • ナビゲーションで設定する場合、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プラグインは、カーソルキーの相互作用に関して、横並びタブリストと縦積みタブリストを区別しないことに注意。タブリストの方向に関係なく、上と左のカーソルは前のタブに移動し、下と右のカーソルは次のタブに移動。

【変更履歴】
  • 【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設定変更

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

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

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)

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

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

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

hide.bs.tab 新しいタブが表示されるときに発動(従って、前のアクティブなタブは非表示になる)。event.targetevent.relatedTarget を使用して、現在のアクティブなタブと次にアクティブになる新しいタブをそれぞれターゲットにする
hidden.bs.tab 新しいタブが表示された後に発動(従って、前のアクティブなタブは非表示になる)。event.targetevent.relatedTarget を使用して、前のアクティブなタブと新しいアクティブなタブをそれぞれターゲットにする
イベントタイプ 説明
show.bs.tab タブが表示される前に、タブの表示で発動。アクティブなタブと前のアクティブなタブ(使用可能な場合)をそれぞれターゲットにするには event.targetevent.relatedTarget を使用
shown.bs.tab タブが表示された後、タブの表示で発動。アクティブなタブと前のアクティブなタブ(使用可能な場合)をそれぞれターゲットにするには event.targetevent.relatedTarget を使用
使用例 v5.2.0設定変更
JavaScriptconst tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // 新しくアクティブ化されたタブ
  event.relatedTarget // 前のアクティブなタブ
})