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

ナビゲーションとタブ

Bootstrap に含まれるナビゲーション コンポーネントの使用方法に関するドキュメントと例。

このページでは

ベースナビ

Bootstrap で利用可能なナビゲーションは、基本.navクラスからアクティブおよび無効な状態まで、一般的なマークアップとスタイルを共有します。モディファイヤ クラスを交換して、各スタイルを切り替えます。

基本.navコンポーネントはフレックスボックスで構築され、あらゆる種類のナビゲーション コンポーネントを構築するための強力な基盤を提供します。これには、いくつかのスタイル オーバーライド (リストを操作するため)、より大きなヒット領域のためのリンク パディング、および基本的な無効化されたスタイルが含まれています。

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

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

html 
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

クラスは全体で使用されるため、マークアップは非常に柔軟になります。<ul>アイテムの順序が重要な場合は、上記のように sを使用する<ol>か、要素を使用して独自のロールを作成します<nav>。.navはを使用しているためdisplay: flex、ナビゲーション リンクはナビゲーション アイテムと同じように動作しますが、追加のマークアップはありません。

html 
<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

利用可能なスタイル

.nav修飾子とユーティリティを使用して s コンポーネントのスタイルを変更します。必要に応じて組み合わせたり、独自のものを作成したりできます。

水平方向の配置

フレックスボックス ユーティリティを使用して、ナビゲーションの水平方向の配置を変更します。デフォルトでは、ナビゲーションは左揃えですが、中央揃えまたは右揃えに簡単に変更できます。

中心.justify-content-center:

html 
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

右揃え.justify-content-end:

html 
<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

垂直

ユーティリティでフレックス アイテムの方向を変更して、ナビゲーションをスタックします.flex-column。それらをいくつかのビューポートにスタックする必要があり、他のビューポートにはスタックしない? レスポンシブ バージョン (例: .flex-sm-column) を使用します。

html 
<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

いつものように、縦方向のナビゲーションは<ul>s なしでも可能です。

html 
<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

タブ

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

html 
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

丸薬

同じ HTML を使用しますが、.nav-pills代わりに次を使用します。

html 
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

埋めて正当化する

のコンテンツを強制.nav的に、2 つの修飾子クラスのいずれかを使用可能な幅全体に拡張します。使用可能なすべて.nav-itemのスペースを で均等に埋めるに��、 を使用します.nav-fill。すべての水平スペースが占有されていますが、すべてのナビゲーション アイテムが同じ幅であるとは限りません。

html 
<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ベースのナビゲーションを使用する場合、スタイリング要素にのみ必要なため、<nav>安全に省略できます。.nav-item.nav-link<a>

html 
<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

等幅要素の場合は、 を使用します.nav-justified。水平方向のスペースはすべてナビゲーション リンクで占有されますが、.nav-fill上記とは異なり、すべてのナビゲーション アイテムは同じ幅になります。

html 
<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

に基づくナビゲーション.nav-fillを使用した例に似ています。<nav>

html 
<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

フレックス ユーティリティの操作

応答性の高いナビゲーション バリエーションが必要な場合は、一連のフレックスボックス ユーティリティの使用を検討してください。これらのユーティリティはより冗長ですが、レスポンシブ ブレークポイント全体でより優れたカスタマイズを提供します。以下の例では、ナビゲーションは最下位のブレークポイントに積み重ねられ、小さなブレークポイントから始まる利用可能な幅を満たす水平レイアウトに適応します。

html 
<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="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

アクセシビリティについて

ナビゲーション バーを提供するために nav を使用している場合はrole="navigation"、 の最も論理的な親コンテナーにを追加する<ul>か、<nav>ナビゲーション全体を要素で囲んでください。役割をそれ自体に追加しないでください<ul>。支援技術によって実際のリストとして通知されなくなります。

ナビゲーション バーは、.nav-tabsクラスでタブとして視覚的にスタイル設定されている場合でも、属性を指定しないでください。これらは、 ARIA オーサリング プラクティス ガイド タブ パターンで説明されているように、動的なタブ付きインターフェイスにのみ適しています。例については、このセクションの動的タブ付きインターフェースのJavaScript の動作を参照してください。JavaScriptはアクティブなタブに追加することで選択状態を処理するため、動的なタブ付きインターフェイスではこの属性は必要ありません。role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

ドロップダウンの使用

少し余分な HTML とドロップダウン JavaScript プラグインを使用してドロップダウン メニューを追加します。

ドロップダウンのあるタブ

html 
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ドロップダウン付きの丸薬

html 
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

CSS

変数

v5.2.0 で追加

Bootstrap の進化する CSS 変数アプローチの一環として、nav は.nav、.nav-tabs、およびでローカル CSS 変数を使用して、.nav-pillsリアルタイムのカスタマイズを強化するようになりました。CSS 変数の値は Sass を介して設定されるため、Sass のカスタマイズも引き続きサポートされます。

基本.navクラス:

  --#{$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クラス:

  --#{$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クラス:

  --#{$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-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:           $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 プラグインを使用して (個別に、またはコンパイル済みbootstrap.jsファイルを介してインクルード)、ナビゲーション タブとピルを拡張して、ローカル コンテンツのタブ可能なペインを作成します。

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

これは、[プロファイル] タブの関連コンテンツの一部のプレースホルダー コンテンツです。別のタブをクリックすると、このタブの表示が次のタブに切り替わります。タブ JavaScript はクラスを交換して、コンテンツの可視性とスタイルを制御します。タブ、ピル、およびその他の.nav-powered ナビゲーションで使用できます。

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

ニーズに合うように、これは<ul>上に示したようにベースのマークアップ、または任意の「独自のロール」マークアップで機能します。を使用している場合は、直接<nav>追加しないでくださいrole="tablist"。ナビゲーション ランドマークとしての要素の本来の役割が上書きされるためです。代わりに、代替要素 (以下の例では単純な<div>) に切り替えて、それをラップし<nav>ます。

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <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>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

タブ プラグインはピルでも動作します。

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

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</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>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">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

そして縦の丸薬で。理想的には、垂直タブの場合aria-orientation="vertical"、タブ リスト コンテナーにも追加する必要があります。

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

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</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>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</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">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

アクセシビリティ

ARIA オーサリング プラクティス ガイド タブ パターンで説明されているように、動的なタブ付きインターフェイスには、支援技術 (スクリーン リーダーなど) のユーザーに構造、機能、および現在の状態を伝えるために、、、、および追加の属性role="tablist"がrole="tab"必要role="tabpanel"です。aria-ベスト プラクティスとして<button>、新しいページや場所に移動するリンクではなく、動的な変更をトリガーするコントロールであるため、タブに要素を使用することをお勧めします。

ARIA Authoring Practices パターンに沿って、現在アクティブなタブのみがキーボード フォーカスを受け取ります。JavaScript プラグインが初期化されるとtabindex="-1"、すべての非アクティブなタブ コントロールに設定されます。現在アクティブなタブにフォーカスがあると、カーソル キーで前/次のタブがアクティブになり、それに応じてプラグインがロービングtabindexを変更します。ただし、JavaScript プラグインは、カーソル キーの相互作用に関して、水平タブ リストと垂直タブ リストを区別しないことに注意してください。タブ リストの向きに関係なく、上下のカーソルは前のタブに移動し、下と右のカーソルは前のタブに移動します。次のタブ。

一般に、キーボード ナビゲーションを容易にするために、タブ パネル内の意味のあるコンテンツを含む最初の要素が既にフォーカス可能でない限り、タブ パネル自体もフォーカス可能にすることをお勧めします。JavaScript プラグインは、この側面を処理しようとはしません。必要に応じて tabindex="0"、マークアップを追加して、タブ パネルを明示的にフォーカス可能にする必要があります。
タブ JavaScript プラグイン は、ドロップダウン メニューを含むタブ付きインターフェースをサポートしていません。これは、ユーザビリティとアクセシビリティの両方の問題を引き起こすためです。使いやすさの観点から、現在表示されているタブのトリガー要素が (閉じたドロップダウン メニュー内にあるため) すぐに表示されないという事実は、混乱を招く可能性があります。アクセシビリティの観点からは、現在、この種の構造を標準の WAI ARIA パターンにマッピングする賢明な方法はありません。つまり、支援技術のユーザーが簡単に理解できるようにすることはできません。

データ属性の使用

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

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<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 経由

JavaScript を介してタブ可能なタブを有効にします (各タブは個別に有効にする必要があります):

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

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

いくつかの方法で個々のタブをアクティブ化できます。

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

フェード効果

タブをフェードインするには、.fadeそれぞれに を追加します.tab-pane。最初のタブ ペインでも.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>

メソッド

非同期メソッドと遷移

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

詳細については、JavaScript のドキュメントを参照してください。

コンテンツをタブ要素としてアクティブにします。

コンストラクターを使用してタブ インスタンスを作成できます。次に例を示します。

const bsTab = new bootstrap.Tab('#myTab')
方法 説明
dispose 要素のタブを破棄します。
getInstance DOM 要素に関連付けられたタブ インスタンスを取得できる静的メソッド。次のように使用できますbootstrap.Tab.getInstance(element)。
getOrCreateInstance DOM 要素に関連付けられたタブ インスタンスを返すか、初期化されていない場合は新しいタブ インスタンスを作成する静的メソッド。次のように使用できますbootstrap.Tab.getOrCreateInstance(element)。
show 指定されたタブを選択し、関連するペインを表示します。以前に選択されていた他のタブは選択解除され、関連するペインは非表示になります。タブ ペインが実際に表示される前 (つまり、イベントが発生する前)に呼び出し元に戻ります。shown.bs.tab

イベント

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

  1. hide.bs.tab(現在アクティブなタブ上)
  2. show.bs.tab（表示されるタブで）
  3. hidden.bs.tabhide.bs.tab(前のアクティブなタブで、イベントと同じもの)
  4. shown.bs.tabshow.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て、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。 
const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})