基本のナビゲーション(Base nav)
Bootstrapで利用可能なナビゲーションは、基本となる .nav
クラスからアクティブ状態、無効状態、一般的なマークアップとスタイルを共有。修飾子クラスを入れ替えて各スタイルを切り替える。
基本の .nav
コンポーネントはFlexboxで構築され、すべてのタイプのナビゲーションコンポーネントを構築するための強力な基盤を提供。これには(リストを操作するための)スタイル再定義、ヒット領域のリンク埋め込み、基本的な無効状態のスタイルが組み込まれている。
基本の .nav
コンポーネントは、.active
状態を含まない。次の例にはクラスが含まれている。主に、この特定のクラスが特別なスタイルを発動しないことを示すため。
アクティブな状態を支援技術に伝えるには、aria-current
属性を使用-現在のページを示す page
値かセット内の現在のアイテムを示す true
を使用。
1. リスト(<ul>
> <li>
)で設定
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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" href="#" tabindex="-1" aria-disabled="true">無効</a>
</li>
</ul>
クラスが全体を通して使用されるため、マークアップを柔軟に行うことが可能。上記のような <ul>
を使用するか、<nav>
要素を使って自分自身を作動させる。.nav
は display: flex
を使用するので、ナビゲーションのリンクはナビゲーションのアイテムと同じように動作するが、特別なマークアップはない。
2. ナビゲーション(<nav>
)で設定
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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"
(支援技術に現在のページであることを伝える)を入れる.disabled
と同じ要素に、tabindex="-1"
(リンクにキーボードフォーカスを受け取らないようにする)とaria-disabled="true"
(支援技術に要素が無効の状態であることを伝える)を入れる
【変更履歴】
- 【v5.0.0-alpha1】
.active
関連のアクセシビリティの設定を追加
使用可能なスタイル(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
を追加
縦積み(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" href="#" tabindex="-1" aria-disabled="true">無効</a>
</li>
</ul>
2. ナビゲーション(<nav>
)で設定
<ul>
を使わない縦積みナビゲーションも可能。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">アクティブ</a>
<a class="nav-link" href="#">リンク1</a>
<a class="nav-link" href="#">リンク2</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>
【設定】
.nav
に.flex-column
を追加
タブナビゲーション(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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>
【設定】
ul.nav.nav-tabs
>li.nav-item
>a.nav-link
- 最初に表示するタブは、あらかじめ
a.nav-link.active
でアクティブ化しておく - 無効化したいタブは、
a.nav-link.disabled
にする
【注意】
- タブを使ったコンテンツの切替についてはJavaScriptの動作に記載
.nav.nav-tabs
に.flex-column
を追加して縦積みにすることはできるが、レイアウト的には推奨しない
ピルナビゲーション(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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>
【設定】
ul.nav.nav-pills
>li.nav-item
>a.nav-link
- 最初に表示するリンクは、あらかじめ
a.nav-link.active
でアクティブ化しておく - 無効化したいリンクは、
a.nav-link.disabled
にする
【注意】
- ピルを使ったコンテンツの切替についてはJavaScriptの動作に記載
幅一杯と等幅サイズ(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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>
<nav>
ベースのナビゲーションを使う場合は、<a>
要素のスタイル設定には .nav-link
のみが必要なので、.nav-item
は安全に省略可能。
見本(<nav>
で設定する場合)
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" href="#">アクティブ</a>
<a class="nav-link" href="#">かなり長めのリンク</a>
<a class="nav-link" href="#">リンク</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>
【設定】
.nav
に.nav-fill
を追加
【注意】
<nav>
で設定する場合、a.nav-link
に.nav-item
の追加は不要【v4.5.1で変更】
等しい幅の要素については、.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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>
.nav-fill
の例と同様に <nav>
ベースのナビゲーションを使用する場合は、次のとおり。
見本(<nav>
で設定する場合)
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" href="#">アクティブ</a>
<a class="nav-link" href="#">かなり長めのリンク</a>
<a class="nav-link" href="#">リンク</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>
【設定】
.nav
に.nav-justified
を追加
【注意】
<nav>
で設定する場合、a.nav-link
に.nav-item
の追加は不要【v4.5.1で変更】
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" href="#" tabindex="-1" aria-disabled="true">無効</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"]
JavaScript動作(JavaScript behavior)v5.0.0-beta2設定変更
個別かコンパイルされた bootstrap.js
ファイルに組み込まれているタブJavaScriptプラグインを使用して、タブやピルのナビゲーションを拡張してローカルコンテンツのタブ切替可能な領域が作成可能。
WAI-ARIA オーサリングプラクティスで説明されているように、動的タブ付きインタフェースは、role ="tablist"
、role="tab"
、role="tabpanel"
、追加の aria-
構造、機能、現在の状態を支援技術(スクリーンリーダーなど)のユーザーに提供する。最善の技法として、タブに <button>
要素を使用することを推奨。これらは、新しいページや場所に移動するリンクではなく、動的な変更を発動するコントロールであるため。
動的タブ付きインタフェースには、ユーザビリティとアクセシビリティの両方の問題が発生するためドロップダウンのメニューを入れてはいけない。ユーザビリティの観点からは、現在表示されているタブの切替え要素が(閉じられたドロップダウンのメニューの中にあるので)すぐには見えないという事実が混乱の原因となる。アクセシビリティの観点からは、現在のところ、この種の構造を標準的なWAI ARIAパターンに割り付ける賢明な方法はなく、支援技術のユーザーには容易に理解できない。
1. タブナビゲーションの場合
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs mb-3" role="tablist">
<li class="nav-item" role="presentation">
<button id="home-tab" class="nav-link active" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">ホーム</button>
</li>
<li class="nav-item" role="presentation">
<button id="profile-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">プロフィール</button>
</li>
<li class="nav-item" role="presentation">
<button id="contact-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#contact" type="button" 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">タブパネルのプレースホルダーコンテンツ。...</div>
<div id="profile" class="tab-pane" role="tabpanel" aria-labelledby="profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
<div id="contact" class="tab-pane" role="tabpanel" aria-labelledby="contact-tab">タブパネルのプレースホルダーコンテンツ。...</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">タブパネルのプレースホルダーコンテンツ。...</div>
<div id="profile" class="tab-pane" role="tabpanel" aria-labelledby="profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
<div id="contact" class="tab-pane" role="tabpanel" aria-labelledby="contact-tab">タブパネルのプレースホルダーコンテンツ。...</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 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">ホーム</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">プロフィール</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">コンタクト</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">タブパネルのプレースホルダーコンテンツ。...</div>
<div class="tab-pane" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">タブパネルのプレースホルダーコンテンツ。...</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">タブパネルのプレースホルダーコンテンツ。...</div>
<div class="tab-pane" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>
3. ピルナビゲーションの場合 フェード効果付き
タブプラグインは、ピルとの併用も可能。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<!-- ピル部分 -->
<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">ホーム</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">プロフィール</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">コンタクト</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">タブパネルのプレースホルダーコンテンツ。...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">タブパネルのプレースホルダーコンテンツ。...</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">タブパネルのプレースホルダーコンテンツ。...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">タブパネルのプレースホルダーコンテンツ。
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>
4. 縦積みのピルナビゲーション フェード効果付き
そして縦積みのピルナビゲーションでも設置可能。
見本
タブパネルのプレースホルダーコンテンツ。これはホームタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タブパネルのプレースホルダーコンテンツ。これはプロフィールタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タブパネルのプレースホルダーコンテンツ。これはメッセージタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タブパネルのプレースホルダーコンテンツ。これはセッティングタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
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 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">ホーム</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">プロフィール</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">メッセージ</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">セッティング</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>タブパネルのプレースホルダーコンテンツ。...</p>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p>タブパネルのプレースホルダーコンテンツ。...</p>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<p>タブパネルのプレースホルダーコンテンツ。...</p>
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p>タブパネルのプレースホルダーコンテンツ。...</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>
</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 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">ホーム</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">プロフィール</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">メッセージ</button>
</li>
<li class="nav-item" role="presentation">
<buttonclass="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" 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 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">ホーム</button>
</li>
<li class="nav-item">
<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">プロフィール</button>
</li>
<li class="nav-item">
<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">メッセージ</button>
</li>
<li class="nav-item">
<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">セッティング</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タブ・インスタンスを返す
【変更履歴】
- 【v5.0.0-alpha1】
$().tab('xxx')
⇒tab.xxx()
getInstance
メソッドが追加
- 【v5.0.0-beta2】
#myTab li:last-child a
⇒#myTab li:last-child button
イベント(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 // 前のアクティブなタブ
})