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

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

基本のナビゲーション（Base nav）v5.1.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">無効</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">無効</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"（支援技術に現在のページであることを伝える）を入れる

【変更履歴】

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

使用可能なスタイル（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">無効</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">無効</a>
</nav>

【設定】

.nav に .flex-column を追加

【変更履歴】

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

タブナビゲーション（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 class="nav-link disabled">無効</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" の設定が不要に

ピルナビゲーション（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 class="nav-link disabled">無効</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" の設定が不要に

幅一杯と等幅サイズ（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 class="nav-link disabled">無効</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">無効</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" の設定が不要に

等しい幅の要素については、.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">無効</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">無効</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" の設定が不要に

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">無効</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"]

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定

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:                    $link-color;
$nav-link-hover-color:              $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:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

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

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

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

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

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

見本

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

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

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

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

<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs mb-3" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" id="home-tab" class="nav-link active" 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" id="profile-tab" class="nav-link" 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" id="contact-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#contact" 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">
    <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>

※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">
    <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>`)で設定

これは上記のように <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>
</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>

※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">
    <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. ピルナビゲーションの場合フェード効果付き

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

見本

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>
</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>

※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">
    <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. 縦積みのピルナビゲーションフェード効果付き

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

見本

これは、メッセージタブに関連付けられたコンテンツのプレースホルダコンテンツ。別のタブをクリックすると、このタブの表示が次のタブに切り替わる。タブ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 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">
      <p><strong>これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。</strong>...</p>
    </div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
      <p><strong>これは、プロフィールタブに関連付けられたコンテンツのプレースホルダコンテンツ。</strong>...</p>
    </div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
      <p><strong>これは、メッセージタブに関連付けられたコンテンツのプレースホルダコンテンツ。</strong>...</p>
    </div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
      <p><strong>これは、セッティングタブに関連付けられたコンテンツのプレースホルダコンテンツ。</strong>...</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><strong>これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。</strong>...</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 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">...</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 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">
    <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">
    <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">
    <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">...</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タブ・インスタンスを返す

getOrCreateInstance v5.0.2追加

DOM要素に関連付けられたタブ・インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。

JavaScriptvar triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(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
【v5.0.2】
- getOrCreateInstance メソッドが追加

イベント（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）v5.1.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）

見本

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

【設定】

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

【変更履歴】

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の設定例緑背景が変更箇所

見本（`<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の設定例緑背景が変更箇所