ドロップダウン(Dropdowns) v5.0.0-beta1設定変更
Bootstrapドロップダウンプラグインで、リンクのリストなどを表示するためのコンテキストオーバーレイを切り替える。
概要(Overview)
ドロップダウンは、リンクのリストなどを表示するための切替表示できるコンテキストオーバーレイ機能であり、付属のBootstrapのドロップダウンJavaScriptプラグインと相互作用している。意図的な設計上の決定で、ホバーではなくクリックで切替表示する。
ドロップダウンは、動的な位置決めとビューポートの検出を提供するサードパーティのライブラリであるPopper上に構築されており、BootstrapのJavaScript(bootstrap.js
や bootstrap.min.js
など)の前にpopper.min.jsを組み込むか、代わりにPopperを内部に含む bootstrap.bundle.js
や bootstrap.bundle.min.js
を使用する。ナビゲーションバーではドロップダウンの位置を決めるためには動的な位置決めは必要ないので、Popperは使用されない。
アクセシビリティ(Accessibility)
WAI-ARIA標準は実際の role="menu"
ウィジェットを定義するが、これはアクションや関数を切り替えるアプリケーションのようなメニューに特有のものである。ARIAのメニューには、メニュー項目、チェックボックスメニュー項目、ラジオボタンメニュー項目、ラジオボタングループ、サブメニューしか含めることができない。
一方、Bootstrapのドロップダウンは汎用的で、さまざまな状況やマークアップ構造に適用できるように設計されている。例えば、検索フィールドやログインフォームなどの追加の入力とフォームコントロールを含むドロップダウンが作成できる。このため、Bootstrapは本当のARIAメニューに必要な role
と aria-
属性のいずれも要求していない(自動的に追加しない)。作成者は、これらのより具体的な属性自体を含める必要がある。
しかし、Bootstrapは、カーソルキーを使用して個々の .dropdown-item
要素を動かし、Esc を使用してメニューを閉じる機能など、ほとんどの標準的なキーボードメニューのやり取りに内蔵されているサポートを追加している。
ドロップダウンの設定(Example)v5.0.0-beta1設定変更
ドロップダウンの切替(ボタンやリンク)とドロップメニューを .dropdown
や position: relative
を宣言する別の要素(例:.btn-group
)で囲む。潜在的なニーズにより適合させるために、<a>
や <button>
要素からドロップダウンが起動できる。ここでの見本では、必要に応じてセマンティックな <ul>
要素を使用しているが、任意のマークアップにも対応している。
ドロップメニュー v5.2.0デザイン変更
見本 メニューのみを表示
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="dropdown">
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li><!-- 横仕切り線 -->
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="dropdown">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
<div class="dropdown-divider"></div><!-- 横仕切り線 -->
<a class="dropdown-item" href="#">その他リンク</a>
</div>
</div>
【設定】
div.dropdown
>ul.dropdown-menu
><li>
>a.dropdown-item
【変更履歴】
- 【v5.0.0-alpha1】
div.dropdown-menu
>a.dropdown-item
⇒ul.dropdown-menu
><li>
>a.dropdown-item
- 【v5.2.0】
border-radius
の値を調整したので、若干丸みを帯びたデザインに変更
ボタンドロップダウンの設定(Single button)
任意の単独の .btn
を、マークアップの変更によってドロップダウンの切替にできる。<button>
要素で動作させる方法は次のとおり:
1. <button>
要素を使用する場合
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="dropdown">
<!-- 切替ボタンの設定 -->
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンボタン
</button>
<!-- ドロップメニューの設定 -->
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="dropdown">
<!-- 切替ボタンの設定 -->
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウンボタン
</button>
<!-- ドロップメニューの設定 -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">その他リンク</a>
</div>
</div>
2. <a>
要素を使用する場合
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="dropdown">
<!-- 切替ボタンの設定 -->
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンリンク
</a>
<!-- ドロップメニューの設定 -->
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
</ul>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="dropdown">
<!-- 切替ボタンの設定 -->
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウンリンク
</a>
<!-- ドロップメニューの設定 -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
最も良い点は、任意のボタンの変形でもこれを行うことができること。
3. ボタングループでの設定
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
ボタン
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ボタン
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">その他リンク</a>
</div>
</div>
【設定】
<button>
要素を使用する場合:div.dropdown
> {[button.btn.btn-{themecolor}.dropdown-toggle[data-bs-toggle="dropdown"]
]《ドロップダウンボタン》 + [ul.dropdown-menu
><li>
>a.dropdown-item
]《ドロップメニュー》}<a>
要素を使用する場合:div.dropdown
> {[a.btn.btn-{themecolor}.dropdown-toggle[data-bs-toggle="dropdown"]
]《ドロップダウンボタン》 + [ul.dropdown-menu
><li>
>a.dropdown-item
]《ドロップメニュー》}- ボタングループでの設定:
div.btn-group
> {button.btn.btn-{themecolor}.dropdown-toggle[data-bs-toggle="dropdown"]
《ドロップダウンボタン》 + [ul.dropdown-menu
><li>
>a.dropdown-item
]《ドロップメニュー》} - dropdownプラグインを使ってメニューを開くために
.dropdown-toggle
と同じ要素に[data-bs-toggle="dropdown"]
を入れる - アンカーリンクでそのままURLを維持するには、
href="#"
の代わりにdata-bs-target
属性を使用 - ボタンとドロップダウンを関連付けるため、
button.btn.btn-{themecolor}.dropdown-toggle
にはid="ID"
、ul.dropdown-menu
にはaria-labelledby="ID"
属性を入れる .dropdown
に.show
を追加すると、メニューが開いた状態で表示される- アクティブ化しておきたいメニューがあれば、
a.dropdown-item.active
にする
【アクセシビリティの設定】
.dropdown-toggle
と同じ要素にaria-expanded="false"
属性(要素の開閉の状態を示す)
※メニューが開いた状態で表示する場合は、false
ではなくtrue
にする
【変更履歴】
- 【v5.0.0-alpha1】
- ドロップダウンボタンのアクセシビリティの設定で
aria-haspopup="true"
属性(ポップアップメニューがあるかどうかを示す)が不要に - ドロップメニュー部分の設定を変更
- ドロップダウンボタンのアクセシビリティの設定で
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-toggle="dropdown"]
⇒[data-bs-toggle="dropdown"]
分離ボタンドロップダウン(Split button)v5.0.0-beta1設定変更
同じく、単一ボタンドロップダウンとほぼ同じマークアップで、ドロップダウンボタンのドロップダウンを作成するが、ドロップダウンキャレットの周りに適切な間隔を置くために .dropdown-toggle-split
を追加。
この追加クラスを使用すると、キャレットの両側の横方向のパディングを25%減らし、通常のボタンドロップダウンに追加される空白は削除。これらの追加変更は、キャレットをスプリットボタンの中央に保ち、メインボタンの隣に適切なサイズのヒット領域を提供。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="btn-group">
<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">ドロップダウンの切替</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
...
</ul>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="btn-group">
<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">ドロップダウンの切替</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー1</a>
...
</div>
</div>
【設定】
div.btn-group
> {button.btn.btn-{themecolor}
《ボタン》 + [button.btn.btn-{themecolor}.dropdown-toggle. dropdown-toggle-split[data-bs-toggle="dropdown"]
>span.visually-hidden
]《ドロップダウンボタン》 + [ul.dropdown-menu
><li>
>a.dropdown-item
]《ドロップメニュー》}
※通常のボタンとは別に、ドロップメニュー表示用のボタンを入れる
【アクセシビリティの設定】
- ドロップダウンボタンにはユーザー補助用に
span.visually-hidden
を入れてドロップダウンの切替であることを示すこと
【変更履歴】
- 【v5.0.0-alpha1】
- 【v5.0.0-alpha2】
span.sr-only
⇒span.visually-hidden
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-toggle="dropdown"]
⇒[data-bs-toggle="dropdown"]
ボタンドロップダウンのサイズ(Sizing)
デフォルトと分離ドロップダウンボタンを含むボタンのドロップダウンですべてのサイズのボタンが機能する。
サイズの種類
大きめ .btn-lg
小さめ .btn-sm
デフォルト(参考)
Bootstrap5.xの設定例 緑背景が変更箇所
大きめのボタン<div class="btn-group">
<button type="button" class="btn btn-secondary btn-lg dropdown-toggle" data-bs-toggle="dropdown">大きめ</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
大きめの分離ボタン<div class="btn-group">
<button type="button" class="btn btn-secondary btn-lg">大きめの分離ボタン</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">ドロップダウンの切替</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
小さめのボタン<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">小さめ</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
小さめの分離ボタン<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">小さめの分離ボタン</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">ドロップダウンの切替</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
【設定】
.btn.btn-{themecolor}.dropdown-toggle
に.btn-{size}
(上記の「サイズの種類」から選択)を追加- 分離ボタンの場合は、通常のボタン部分と切替ボタン部分に追加の必要がある
ダークドロップダウン(Dark dropdowns)v5.0.0-alpha2新設
暗めのナビゲーションバーや任意のスタイルに合わせるために、既存の .dropdown-menu
に .dropdown-menu-dark
を追加すれば、暗めのドロップダウンになる。ドロップダウンアイテムを変更する必要はない。
見本
設定例
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">ボタン</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#" aria-current="true">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
【設定】
.dropdown-menu
に.dropdown-menu-dark
を追加
ドロップの方向(Directions)
RTL
RTL(右書き)でBootstrapを使用すると、方向が反転する。つまり、.dropstart
は右側に表示される。
中央揃え(Centered)v5.2.0新設
親要素の .dropdown-center
を使用して、切替ボタンの下の中央にドロップダウンメニューを作成。
見本
設定例
<div class="dropdown-center">
...
</div>
【設定】
div.dropdown
の代わりにdiv.dropdown-center
を使用/li>
ドロップアップ(Dropup)
親要素に .dropup
を追加して、要素の上側にドロップメニューを表示させる。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
ボタン単独の場合<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">ボタン</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
...
</ul>
</div>
分離ボタンの場合<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
分離ボタン
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">ドロップアップの切替</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
...
</ul>
</div>
【設定】
.btn-group
に.dropup
を追加
ドロップアップの中央揃え(Dropup centered)v5.2.0新設
親要素に .dropup-center
を使用して、起動ボタンの上にドロップアップメニューを中央に配置。
見本
設定例
<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenterBtn" data-bs-toggle="dropdown" aria-expanded="false">
中央揃えのドロップアップ
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenterBtn">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
...
</ul>
</div>
【設定】
.dropup
に.dropup-center
を追加
ドロップエンド(Dropend)v5.0.0-beta1クラス名変更、v5.2.0「ドロップライト」から変更
親要素に .dropend
を追加して、要素の行末側にドロップメニューを表示させる。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
通常のボタン<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
ドロップエンド
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
...
</ul>
</div>
分離ボタン<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
分離ドロップエンド
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">ドロップエンドの切替</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
...
</ul>
</div>
【設定】
.btn-group
に.dropend
を追加
【変更履歴】
- 【v5.0.0-beta1】
.dropright
⇒.dropend
(RTL(右書き)の設定追加に伴いクラス名変更)
ドロップスタート(Dropstart)v5.0.0-beta1クラス名変更、v5.2.0「ドロップレフト」から変更と一部設定変更
親要素に .dropstart
を追加して、要素の行頭側にドロップメニューを表示させる。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
通常のボタン
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
ドロップスタート
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Bootstrap5.2.0の設定例 緑背景が変更箇所
分離ボタン<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">ドロップスタートの切替</span>
</button>
<ul class="dropdown-menu">
...
</ul>
<button type="button" class="btn btn-secondary">
分離ドロップスタート
</button>
</div>
※Bootstrap5.1.3の設定例 赤背景がv5.2.0での変更箇所
分離ボタン<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">ドロップスタートの切替</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<button type="button" class="btn btn-secondary">
分離ドロップスタート
</button>
</div>
【設定】
.btn-group
に.dropstart
を追加- 分離ボタンの場合は、《ドロップスタートボタン》⇒《通常ボタン》の順に設定
【変更履歴】
- 【v5.0.0-beta1】
.dropleft
⇒.dropstart
(RTL(右書き)の設定追加に伴いクラス名変更)
- 【v5.2.0】
- 分離ボタンの設定:全体を
div.btn-group
で囲む必要がなくなり、.btn-group.dropstart
のrole="group"
も不要に
- 分離ボタンの設定:全体を
ドロップメニューアイテム(Menu items)
<button>
によるドロップメニュー
ドロップダウンアイテムとして <a>
か <button>
要素を使用できる。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウン
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li><button type="button" class="dropdown-item">メニュー1</a></li>
<li><button type="button" class="dropdown-item">メニュー2</a></li>
<li><button type="button" class="dropdown-item">メニュー3</a></li>
</ul>
</div>
【設定】
a.dropdown-item
の代わりにbutton.dropdown-item
を使用
非対話型のドロップダウン
.dropdown-item-text
で非対話型のドロップダウンアイテムが作成できる。カスタムCSSやテキストユーティリティを使用してさらにスタイル設定ができる。
見本 メニューを開いた状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">ドロップダウンアイテムのテキスト</span></li>
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
</ul>
アクティブ化(Active)v5.0.0-alpha1設定変更
ドロップダウンアイテムに .active
を追加して、アクティブ化のスタイルにする。アクティブな状態を支援技術に伝えるには、aria-current
属性を使用-現在のページを示す page
値かセット内の現在のアイテムを示す true
値を使用。
見本 メニューを開いた状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">メニュー2(アクティブ化)</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
</ul>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item active" href="#">メニュー2(アクティブ化)</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
【設定】
- アクティブ化したいリンクメニュー(
a.dropdown-item
)に.active
を追加
【アクセシビリティの設定】
.active
と同じ要素にaria-current="true"
(支援技術に現在のアイテムであることを伝える)を入れる
【変更履歴】
- 【v5.0.0-alpha1】
- アクセシビリティの設定を追加
無効化(Disabled)v5.1.1設定変更
ドロップダウンアイテムに .disabled
を追加して、無効のスタイルにする。
見本 メニューを開いた状態で表示
Bootstrap5.1.1~の設定例 緑背景はv5.0.0-alpha1での変更箇所
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item disabled">メニュー2(無効)</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
</ul>
※Bootstrap5.1.0の設定例 赤背景が変更箇所
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">メニュー2(無効)</a></li>
<li><a class="dropdown-item" href="#">メニュー3
</ul>
【設定】
- 無効化したいリンクメニュー(
a.dropdown-item
)に.disabled
を追加
【変更履歴】
- 【v5.1.1】
href
属性、tabindex="-1"
(リンクにキーボードフォーカスを受け取らないようにする)、aria-disabled="true"
(支援技術に要素が無効の状態であることを伝える)の設定が不要に(参考、v4.6.1でバックポート)
ドロップメニューの配置(Menu alignment)v5.0.0クラス名変更
デフォルトでは、ドロップダウンメニューは、親の上部から左側に沿って100%自動的に配置される。これは、方向性のある .drop*
クラスで変更できるが、追加の修飾子クラスで制御もできる。
.dropdown-menu-end
を .dropdown-menu
に追加すると、ドロップメニューが行末(右)揃えになる。RTLでBootstrapを使用すると、方向が反転する。つまり、.dropdown-menu-end
が行末(左)側に表示される。
見本
ドロップメニューのみ行末揃え
ドロップダウン全体を行末揃え(参考)
Bootstrap5.xの設定例 緑背景が変更箇所
ドロップメニューを行末揃え<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
ココを押すとボタンの右下にメニューが表示されます
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
ドロップダウン全体を行末揃え<div class="dropdown float-end">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
ココを押すとボタンの左下にメニューが表示されます
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他リンク</a></li>
</ul>
</div>
【設定】
- 行頭揃え:
ul.dropdown-menu
に.dropdown-menu-start
を追加 - 行末揃え:
ul.dropdown-menu
に.dropdown-menu-end
を追加 - ボタンの行末下に表示させるためには、
div.dropdown
ではなく、div.btn-group
に設定
【注意】
- ドロップダウン全体を行末揃えするには、
div.dropdown
に.float-end
を追加
【変更履歴】
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴いドロップメニューのクラス名変更
- 行頭揃え:
.dropdown-menu-left
⇒.dropdown-menu-start
- 行末揃え:
.dropdown-menu-right
⇒.dropdown-menu-end
- 行頭揃え:
- RTL(右書き)の設定追加に伴いドロップメニューのクラス名変更
レスポンシブな配置(Responsive alignment)
レスポンシブな配置を使用する場合は、data-bs-display="static"
属性を追加してダイナミックなポジショニングを無効にし、レスポンス変数クラスを使用。
ドロップメニューを指定されたブレークポイント以上で行末揃えに配置するには、.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
を追加する。
1. 大のブレークポイント以上で行末揃え
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
通常メニューは行頭揃えだが大画面のときは行末揃え
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
</ul>
</div>
ドロップメニューを指定したブレークポイント以上で行頭揃えに配置するには、.dropdown-menu-end
と .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
を追加する。
2. 大のブレークポイント以上で行頭揃え
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
通常メニューは行末揃えだが大画面のときは行頭揃え
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button type="button" class="dropdown-item">メニュー1</button></li>
<li><button type="button" class="dropdown-item">メニュー2</button></li>
<li><button type="button" class="dropdown-item">メニュー3</button></li>
</ul>
</div>
注:Popperはナビゲーションバーでは使用されないので、ナビゲーションバーのドロップダウンボタンに data-bs-display="static"
属性を追加する必要はない。
【設定】
- 通常メニューは行頭揃えだが指定されたブレークポイント以上で行末揃え:
ul.dropdown-menu
に.dropdown-menu-{breakpoint}-end
を追加 - 通常メニューは行末揃えだが指定されたブレークポイント以上で行頭揃え:
ul.dropdown-menu.dropdown-menu-end
に.dropdown-menu-{breakpoint}-start
を追加 - いずれの場合も
button.dropdown-toggle
に[data-bs-display="static"]
(Popperの動的配置使用を無効にする)を追加すること
【変更履歴】
- 【v5.0.0-alpha1】
.dropdown-menu-xxl-right
,.dropdown-menu-xxl-left
が追加
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-display="static"]
⇒[data-bs-display="static"]
- RTL(右書き)の設定追加に伴いドロップメニューのクラス名変更
- 行頭揃え:
.dropdown-menu(-{breakpoint})-left
⇒.dropdown-menu(-{breakpoint})-start
- 行末揃え:
.dropdown-menu(-{breakpoint})-right
⇒.dropdown-menu(-{breakpoint})-end
- 行頭揃え:
配置オプション(Alignment options)v5.0.0-beta2追加
上記のオプションのほとんどを使用して、さまざまなドロップダウン配置オプションの小さなキッチンシンクのデモを1か所にまとめた。
見本
設定例
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
下にドロップ
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
...
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
メニューの行末揃え
</button>
<ul class="dropdown-menu dropdown-menu-end">
...
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
通常は行頭揃え、lgで行末揃え
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
...
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
通常は行末揃え、lgで行頭揃え
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
...
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
行頭側にドロップ
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
行末側にドロップ
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
上にドロップ
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
ドロップメニューのコンテンツ(Menu content)
見出し(Headers)
任意のドロップメニューのアクションのセクションにラベルを付けるヘッダーを追加。
見本 メニューを開いた状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<ul class="dropdown-menu">
<h6 class="dropdown-header">ドロップダウンの見出し</h6>
<li><a class="dropdown-item" href="#">メニュー1</a></li>
...
</ul>
【設定】
- 見出しをつけたい箇所に
h6.dropdown-header
を入れる(<h5>
とかに変えても字の大きさは変わらず)
横仕切り線(Dividers)
関連するメニューアイテムのグループを仕切りで区切る。
見本 メニューを開いた状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
...
<li><hr class="dropdown-divider"></li>
...
</ul>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー1</a>
...
<div class="dropdown-divider"></div>
...
</div>
【設定】
- 横仕切り線を入れたい箇所に
<li>
>hr.dropdown-divider
を入れる
【変更履歴】
- 【v5.0.0-alpha1】
div.dropdown-divider
⇒<li>
>hr.dropdown-divider
テキスト(Text)
空白ユーティリティを使用してフリーフォームのテキストをテキスト付きドロップメニューに配置。メニュー幅を制限するには、サイズスタイルを追加する必要あり。
見本 メニューを開いた状態で表示
設定例
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
プルダウンメニュー内で自由に流れるテキストの例文。
</p>
<p class="mb-0">
そしてこれはもう1つの例文。
</p>
</div>
【設定】
.dropdown-menu
に別のユーティリティクラスを追加- 折り返し幅を決めたい場合は、
.dropdown-menu
にmax-width
スタイルを入れる
フォーム(Forms)v5.2.0設定変更
ドロップメニュー内にフォームを挿入して、それをドロップメニューにし、空白ユーティリティを使用して必要な余白を付ける。
1. 基本の設定
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">ドロップダウン</button>
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Eメールアドレス</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">パスワード</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="パスワード">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label for="dropdownCheck" class="form-check-label">
記憶する
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">サインイン</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">新規の方はこちらから登録</a>
<a class="dropdown-item" href="#">パスワードを忘れた方はこちら</a>
</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">ドロップダウン</button>
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Eメールアドレス</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">パスワード</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="パスワード">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label for="dropdownCheck" class="form-check-label">
記憶する
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">サインイン</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">新規の方はこちらから登録</a>
<a class="dropdown-item" href="#">パスワードを忘れた方はこちら</a>
</div>
</div>
2. <form>
に .dropdown-menu
等を設定
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">ドロップダウン</button>
<form class="dropdown-menu p-4">
<div class="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label>Eメールアドレス</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label>パスワード</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label for="dropdownCheck2" class="form-check-label">
記憶する
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">サインイン</button>
</form>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">ドロップダウン</button>
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Eメールアドレス</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">パスワード</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label for="dropdownCheck2" class="form-check-label">
記憶する
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">サインイン</button>
</form>
</div>
【設定】
div.dropdown-menu
内に<form>
を入れるか、メニューをform.dropdown-menu
にする
【注意】
button.btn.dropdown-toggle
《ドロップダウンの切替ボタン》に[data-bs-auto-close="outside"]
(メニューの外側をクリックするとメニューを閉じる)を入れる (ラベルをクリックするとドロップダウンメニューが閉じるのを防ぐ)
【変更履歴】
- 【v5.0.0-alpha1】
- フォームの設定の変更
div.form-group
⇒div.mb-3
<label>
に.form-label
を入れる
- フォームの設定の変更
- 【v5.2.0】
button.btn.dropdown-toggle
に[data-bs-auto-close="outside"]
を入れる
ドロップダウンのオプション(Dropdown options)
data-bs-offset
や data-bs-reference
を使用して、ドロップダウンの位置を変更。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
オフセット<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
オフセット
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
</ul>
</div>
リファレンス<div class="btn-group">
<button type="button" class="btn btn-secondary">リファレンス</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">ドロップダウンの切替</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><a class="dropdown-item" href="#">メニュー3</a></li>
</ul>
</div>
【設定】
data-bs-offset
でドロップメニューの表示位置をずらすことができるdata-bs-reference="parent"
で分離ボタンのドロップメニューの表示位置を親ボタンの位置にできる
自動で閉じる動作(Auto close behavior)v5.0.0新設
デフォルトでは、ドロップダウンメニューの内側か外側をクリックすると、ドロップダウンメニューは閉じられるが、autoClose
オプションを使用して、ドロップダウンのこの動作が変更できる。
見本
設定例
メニューの内側のクリックのみで閉じる<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
外側をクリック
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="#">メニューアイテム</a></li>
<li><a class="dropdown-item" href="#">メニューアイテム</a></li>
<li><a class="dropdown-item" href="#">メニューアイテム</a></li>
</ul>
</div>
メニューの外側のクリックのみで閉じる<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
内側をクリック
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">メニューアイテム</a></li>
<li><a class="dropdown-item" href="#">メニューアイテム</a></li>
<li><a class="dropdown-item" href="#">メニューアイテム</a></li>
</ul>
</div>
ボタンのクリックのみで閉じる<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
手動で閉じる
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">メニューアイテム</a></li>
<li><a class="dropdown-item" href="#">メニューアイテム</a></li>
<li><a class="dropdown-item" href="#">メニューアイテム</a></li>
</ul>
</div>
【設定】
- ドロップダウンメニューの内側のクリックのみで閉じる:
.dropdown-toggle
にdata-bs-auto-close="inside"
を入れる - メニューの外側のクリックのみで閉じる:
.dropdown-toggle
にdata-bs-auto-close="outside"
を入れる - ボタンのクリックのみで閉じる(esc キーを押しても閉じない):
.dropdown-toggle
にdata-bs-auto-close="false"
を入れる
CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更
CSS変数(Variables)v5.2.0設定移行
Bootstrapの進化するCSS変数アプローチの一環として、ドロップダウンは、リアルタイムのカスタマイズを強化するために、.dropdown-menu
でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。
デフォルトの設定
scss/_dropdown.scss 内 dropdown-css-vars の設定--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
CSS変数によるカスタマイズは、重複するCSSセレクタを追加せずに特定の値を再定義する .dropdown-menu-dark
クラスで確認できる。
デフォルトの設定
scss/_dropdown.scss 内 dropdown-dark-css-vars の設定--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
Sass変数(Sass variables)v5.2.0変数から名称変更
すべてのドロップダウンの変数:
デフォルトの設定
scss/_variables.scss 内 dropdown-variables の設定$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: var(--#{$prefix}border-color-translucent);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding-x: $dropdown-item-padding-x;
$dropdown-header-padding-y: $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x; // v5.2.0で非推奨
// fusv-enable
ダークドロップダウンの変数:
デフォルトの設定
scss/_variables.scss 内 dropdown-dark-variables の設定$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
ドロップダウンの対話性を示すCSSベースのキャレット()の変数:
デフォルトの設定
scss/_variables.scss 内 caret-variables の設定$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
mixin(Mixins)
scss/mixins/_caret.scss
にあるmixinは、CSSベースのキャレット(, , , )を生成するために使用。
デフォルトの設定
scss/mixins/_caret.scss 内 caret-mixins の設定@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
使用方法(Usage)
データ属性かJavaScript経由で、ドロップダウンプラグインは、親要素の .dropdown-menu
の .show
クラスを切り替えることによって、非表示のコンテンツ(ドロップメニュー)を切り替える。data-bs-toggle="dropdown"
属性は、アプリケーションレベルでドロップメニューを閉じるために使用されるので、常に使用することを推奨。
mouseover
ハンドラが <body>
要素の直下の子要素に追加される。この明らかに見苦しいハックは、ドロップダウンの外側の任意の場所でタップするとドロップダウンを閉じるコードが起動されることを防ぐiOSのイベント委任の奇妙な癖を回避するために必要。ドロップダウンが閉じられると、これらの追加の空の mouseover
ハンドラーは削除される。
データ属性経由で(Via data attributes)
data-bs-toggle="dropdown"
をリンクかボタンに追加すると、ドロップダウンが切り替わる。
<div class="dropdown">
<button type="button" id="dLabel" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンの切替
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
JavaScript経由で(Via JavaScript)v5.2.0設定変更
JavaScriptを使用してドロップダウンを呼び出す。
Bootstrap5.2.0の設定例 緑背景がv5.2.0での変更箇所
JavaScriptconst dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
※Bootstrap5.1.3の設定例 赤背景がv5.2.0での変更箇所
JavaScriptvar dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
※Bootstrap4.xの設定例
JavaScript$('.dropdown-toggle').dropdown()
【変更履歴】
- 【v5.0.0-alpha1】
- JavaScriptの記述をjQueryに依存しない方法に変更
- 【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更
data-bs-toggle="dropdown"
は依然として必要
JavaScriptを使用してドロップダウンを呼び出すかどうか、data-apiを使用するかどうかにかかわらず、data-bs-toggle="dropdown"
は、常にドロップダウンの起動要素にある必要がある。
オプション(Options)v5.0.0オプション追加
オプションは、データ属性かJavaScriptを使用して渡される。データ属性の場合、data-bs-animation=""
のように、data-bs-
にオプション名を追加する。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース(単語の先頭を大文字にする)からケバブケース(単語をハイフンでつなぐ)に変更して下さい。例:data-bs-customClass="beautifier"
ではなく、data-bs-custom-class="beautifier"
を使用する。
Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config
をサポート。要素に data-bs-config='{"delay":0, "title":123}'
と data-bs-title="456"
属性がある場合、最終的な title
値は 456
になり、個別のデータ属性は data-bs-config
で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}'
のようなJSON値を格納できる。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
autoClose v5.0.0追加 |
boolean | string | true |
ドロップダウンの自動で閉じる動作を構成:
ドロップダウンは、ESC キーでいつでも閉じることができる。 |
boundary v5.0.0-beta2変更 |
string | element | 'clippingParents' |
ドロップメニューのオーバーフローを制約する境界(PopperのpreventOverflow修飾子にのみ適用)。デフォルトでは 'clippingParents' とHTMLElementリファレンス(JavaScript経由のみ)の値を受け入れる。詳細については、PopperのpreventOverflowドキュメントに記載。 |
display |
string | 'dynamic' |
デフォルトでは、Popperを動的配置に使用。static でこれを無効にする。 |
offset v5.0.0-beta2復活 |
array | string | function | [0, 2] |
ターゲットに対するドロップダウンのオフセット値。 関数を使用してオフセットを決定する場合、Popperの配置、参照とPopperの四角形を最初の引数として含むオブジェクトを使用して呼び出される。トリガー要素のDOMノードが2番目の引数として渡される。関数は、2つの数値を持つ配列を返す必要がある:[スキッド, 距離] 詳細については、Popper.jsのoffsetドキュメントに記載。 |
popperConfig v5.0.0-beta2変更 |
null | object | function | null |
BootstrapのデフォルトのPopperの構成を変更。詳細は、Popperの構成に記載。 関数を使用してPopper構成を作成すると、BootstrapのデフォルトのPopper構成を含むオブジェクトで呼び出される。これは、デフォルトを使用して独自の構成とマージするのに役立つ。この関数は、Popperの構成オブジェクトを返す必要がある。 |
reference v5.0.0-beta2変更 |
string | element| object | 'toggle' |
ドロップダウンメニューのリファレンス要素。'toggle' , 'parent' 、HTMLElementリファレンス、getBoundingClientRect を提供するオブジェクトの値を受け入れる。詳細については、Popperのconstructorドキュメントと仮想要素のドキュメントに記載。 |
popperConfig
でfunctionを使用 v5.0.0-beta2追加、v5.2.0設定変更
Bootstrap5.2.0の設定例 緑背景がv5.2.0での変更箇所
JavaScriptconst dropdown = new bootstrap.Dropdown(element, {
popperConfig(defaultBsPopperConfig) {
// const newPopperConfig = {...}
// 必要に応じてdefaultBsPopperConfigを使用...
// newPopperConfigを返す
}
})
※Bootstrap5.1.3の設定例 赤背景がv5.2.0での変更箇所
JavaScriptvar dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// 必要に応じてdefaultBsPopperConfigを使用...
// newPopperConfigを返す
}
})
【変更履歴】
- 【v5.0.0-beta1】
- Popper v2対応により、
offset
は廃止
- Popper v2対応により、
- 【v5.0.0-beta2】
boundary
のデフォルトの設定がscrollParent
からclippingParent
に変更reference
のタイプにobject
を追加offset
を復活popperConfig
のタイプにfunction
を追加
- 【v5.0.0-beta3】
flip
を廃止(ネイティブなpopperの構成を採用し、Popper.jsのfallbackPlacements
オプションに空の配列を渡すことで、フリップ動作の無効が可能に)
- 【v5.0.0】
autoClose
を追加
- 【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更
メソッド(Methods)v5.0.0-alpha1設定変更、v5.0.2メソッド追加
メソッド | 説明 |
---|---|
dispose |
要素のドロップダウンを破棄(DOM要素に保存されているデータを削除)。 |
getInstance v5.0.0-alpha1追加 |
DOM要素に関連付けられたドロップダウン・インスタンスを取得できる静的メソッドで、次のように使用可能:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance v5.0.2追加 |
DOM要素に関連付けられたドロップダウン・インスタンスを取得か初期化されていない場合は新しいインスタンスを作成する静的メソッド。次のように使用可能:bootstrap.Dropdown.getOrCreateInstance(element) |
hide |
特定のナビゲーションバーやタブ付きナビゲーションのドロップメニューを非表示にする。 |
show |
特定のナビゲーションバーやタブ付きナビゲーションのドロップメニューを表示。 |
toggle |
指定されたナビゲーションバーやタブ付きナビゲーションのドロップメニューを切り替える。 |
update |
要素のドロップダウンの位置を更新。 |
【変更履歴】
- 【v5.0.0-alpha1】
$().dropdown('xxx')
⇒dropdown.xxx()
- 【v5.0.2】
getOrCreateInstance
メソッドが追加
イベント(Events)
すべてのドロップダウンイベントは、切替要素で発生し、その後バブルアップする。したがって、.dropdown-menu
の親要素にイベントリスナーが追加可能。hide.bs.dropdown
と hidden.bs.dropdown
イベントには、クリックイベントのイベントオブジェクトを含む clickEvent
プロパティ(元のイベントタイプが click
のときのみ)がある。
イベントタイプ | 説明 |
---|---|
hide.bs.dropdown |
非表示のインスタンス・メソッドが呼び出されると直ちに発動。 |
hidden.bs.dropdown |
ドロップダウンがユーザーから非表示になったときに発動(完全にCSS遷移が完了するまで待機)。 |
show.bs.dropdown |
表示のインスタンス・メソッドが呼び出されると直ちに発動。 |
shown.bs.dropdown |
ユーザーにドロップダウンが表示されたときに発動(完全にCSS遷移が完了するまで待機)。 |
使用例 v5.2.0設定変更
JavaScriptconst myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
// 何かをする...
})