Skip to main content Skip to docs navigation
View on GitHub

ナビとタブ Navs and tabs

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

On this page

Base nav

Bootstrapで利用可能なナビゲーションは、基本の.navクラスからアクティブ状態や無効状態まで、共通のマークアップとスタイルを共有しています。修飾クラスを切り替えることで、各スタイル間を切り替えることができます。

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

基本の.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>

Available styles

修飾クラスとユーティリティを使用して、.navコンポーネントのスタイルを変更できます。必要に応じて組み合わせるか、独自のものを構築してください。

Horizontal alignment

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

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

Vertical

.flex-columnユーティリティを使用してflexアイテムの方向を変更することで、ナビゲーションを縦方向に積み重ねることができます。一部のビューポートでは積み重ねる必要があるが、他のビューポートでは必要ない場合は、レスポンシブバージョン（例：.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>

Tabs

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

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>

Pills

同じ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>

Underline

同じ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>

Fill and justify

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

Working with flex utilities

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

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>

Regarding accessibility

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

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

Using dropdowns

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

Tabs with dropdowns

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>

Pills with dropdowns

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

Variables

Added in 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};
Added in 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 variables

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 behavior

tab JavaScript plugin（個別にまたはコンパイルされたbootstrap.jsファイルを通じて含める）を使用して、ナビゲーションタブとピルを拡張し、ローカルコンテンツのタブ切り替え可能なペインを作成します。

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

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

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

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

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

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

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

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

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

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

<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"も追加する必要があります。

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

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

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

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

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

Accessibility

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

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

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

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

Using data attributes

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

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

すべてのAPIメソッドは非同期でトランジションを開始します。 トランジションが開始されるとすぐに呼び出し元に戻りますが、終了する前に戻ります。さらに、トランジション中のコンポーネントに対するメソッド呼び出しは無視されます。JavaScriptドキュメントで詳細を確認してください。

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

コンストラクタを使用してタブインスタンスを作成できます。例えば:

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

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.tabおよびhidden.bs.tabイベントは発生しません。

Event typeDescription
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
})