メインコンテンツへスキップ ドキュメントナビゲーションへスキップ
GitHub で表示

ナビゲーションとタブ

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

クラスは全体を通して使用されているため、マークアップは非常に柔軟になります。上記のように <ul> を使用するか、項目の順序が重要な場合は <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" aria-disabled="true">Disabled</a>
</nav>

利用可能なスタイル

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

水平方向の配置

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

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

常に、<ul> を使用せずに垂直方向のナビゲーションも可能です。

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

下線

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

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

塗りつぶしと揃え

2つの修飾子クラスのいずれかを使用して、.nav の内容をすべての利用可能な幅に拡張します。.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" aria-disabled="true">Disabled</a>
  </li>
</ul>

<nav> ベースのナビゲーションを使用する場合、.nav-link だけが <a> 要素のスタイル設定に必要なので、.nav-item を安全に省略できます。

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

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

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

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

ナビゲーションバーを提供するためにナビゲーションを使用する場合は、<ul> の最も論理的な親コンテナに role="navigation" を追加するか、ナビゲーション全体を <nav> 要素でラップしてください。<ul> 自体にロールを追加しないでください。これは、支援技術によって実際のリストとして発表されるのを妨げる可能性があります。

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

ドロップダウンの使用

わずかな追加の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" aria-disabled="true">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" aria-disabled="true">Disabled</a>
  </li>
</ul>

CSS

変数

v5.2.0 で追加

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

.nav 基本クラスについて

scss/_nav.scss 
--#{$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 
--#{$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 
--#{$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};
v5.3.0 で追加

.nav-underline 修飾子クラスについて

scss/_nav.scss 
--#{$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 変数

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

これは、ホームタブの関連コンテンツのプレースホルダーコンテンツです。別のタブをクリックすると、次のタブでこのタブの表示/非表示が切り替わります。タブJavaScriptはクラスを入れ替えて、コンテンツの表示とスタイルを制御します。タブ、ピル、その他の .nav 搭載のナビゲーションで使用できます。

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

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

これは、無効化されたタブに関連付けられたコンテンツのプレースホルダーです。

<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 搭載のナビゲーションで使用できます。

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

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

これは、無効化されたタブに関連付けられたコンテンツのプレースホルダーです。

<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 搭載のナビゲーションで使用できます。

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

これは、無効化されたタブに関連付けられたコンテンツのプレースホルダーです。

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

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

<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オーサリングプラクティスパターンに従って、現在アクティブなタブのみがキーボードフォーカスを受け取ります。JavaScriptプラグインが初期化されると、非アクティブなすべてのタブコントロールにtabindex="-1"が設定されます。現在アクティブなタブにフォーカスが当たると、カーソルキーによって前後のタブがアクティブになります。HomeキーとEndキーは、それぞれ最初のタブと最後のタブをアクティブにします。プラグインはロービングtabindexを適宜変更します。ただし、JavaScriptプラグインは、カーソルキーの操作に関しては、水平方向と垂直方向のタブリストを区別しません。タブリストの方向に関係なく、上向きと左向きのカーソルは前のタブに移動し、下向きと右向きのカーソルは次のタブに移動します。

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

データ属性の使用

要素にdata-bs-toggle="tab"またはdata-bs-toggle="pill"を指定するだけで、JavaScriptを記述せずにタブまたはピルナビゲーションをアクティブ化できます。これらのデータ属性を.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

フェード効果

タブをフェードインするには、各.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>

メソッド

すべての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.tab（前のアクティブなタブで、hide.bs.tabイベントと同じタブ）
  4. shown.bs.tab（新しくアクティブになったばかりの表示されたタブで、show.bs.tabイベントと同じタブ）

アクティブなタブがなかった場合、hide.bs.tabイベントとhidden.bs.tabイベントは発生しません。

イベントタイプ 説明
hide.bs.tab 新しいタブを表示する際に発生するイベントです（そのため、以前のアクティブなタブは非表示になります）。event.targetとevent.relatedTargetを使用して、現在アクティブなタブと、すぐにアクティブになる新しいタブをそれぞれターゲットにします。
hidden.bs.tab 新しいタブが表示された後に発生するイベントです（そのため、以前のアクティブなタブは非表示になります）。event.targetとevent.relatedTargetを使用して、以前のアクティブなタブと、新しいアクティブなタブをそれぞれターゲットにします。
show.bs.tab タブの表示時に発生するイベントですが、新しいタブが表示される前です。event.targetとevent.relatedTargetを使用して、アクティブなタブと、以前のアクティブなタブ（存在する場合）をそれぞれターゲットにします。
shown.bs.tab タブが表示された後に発生するタブ表示時のイベントです。event.targetとevent.relatedTargetを使用して、アクティブなタブと、以前のアクティブなタブ（存在する場合）をそれぞれターゲットにします。 
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
})