メインコンテンツへスキップ

ドロップダウン(Dropdowns) v5.0.0-beta1設定変更

Bootstrapドロップダウンプラグインで、リンクのリストなどを表示するためのコンテキストオーバーレイを切り替える。

概要(Overview)

ドロップダウンは、リンクのリストなどを表示するための切替表示できるコンテキストオーバーレイ機能であり、付属のBootstrapのドロップダウンJavaScriptプラグインと相互作用している。意図的な設計上の決定で、ホバーではなくクリックで切替表示する。

ドロップダウンは、動的な位置決めとビューポートの検出を提供するサードパーティのライブラリであるPopper上に構築されており、BootstrapのJavaScript(bootstrap.jsbootstrap.min.jsなど)の前にpopper.min.jsを組み込むか、代わりにPopperを内部に含む bootstrap.bundle.jsbootstrap.bundle.min.js を使用する。ナビゲーションバーではドロップダウンの位置を決めるためには動的な位置決めは必要ないので、Popperは使用されない。

 

アクセシビリティ(Accessibility)

WAI-ARIA標準は実際の role="menu" ウィジェットを定義するが、これはアクションや関数を切り替えるアプリケーションのようなメニューに特有のものである。ARIAのメニューには、メニュー項目、チェックボックスメニュー項目、ラジオボタンメニュー項目、ラジオボタングループ、サブメニューしか含めることができない。

一方、Bootstrapのドロップダウンは汎用的で、さまざまな状況やマークアップ構造に適用できるように設計されている。例えば、検索フィールドやログインフォームなどの追加の入力とフォームコントロールを含むドロップダウンが作成できる。このため、Bootstrapは本当のARIAメニューに必要な rolearia- 属性のいずれも要求していない(自動的に追加しない)。作成者は、これらのより具体的な属性自体を含める必要がある。

しかし、Bootstrapは、カーソルキーを使用して個々の .dropdown-item 要素を動かし、Esc を使用してメニューを閉じる機能など、ほとんどの標準的なキーボードメニューのやり取りに内蔵されているサポートを追加している。

 

ドロップダウンの設定(Example)v5.0.0-beta1設定変更

ドロップダウンの切替(ボタンやリンク)とドロップメニューを .dropdownposition: relative; を宣言する別の要素(例:.btn-group)で囲む。潜在的なニーズにより適合させるために、<a><button> 要素からドロップダウンが起動できる。ここでの見本では、必要に応じてセマンティックな <ul> 要素を使用しているが、任意のマークアップにも対応している。

ドロップメニュー

見本 メニューのみを表示
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><!-- /.dropdown-menu -->
</div><!-- /.dropdown -->
【設定】
  • div.dropdown > ul.dropdown-menu > <li> > a.dropdown-item
【変更履歴】
  • 【v5.0.0-alpha1】
    • div.dropdown-menu > a.dropdown-itemul.dropdown-menu > <li> > a.dropdown-item

ボタンドロップダウンの設定(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><!-- /.dropdown -->
※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><!-- /.dropdown-menu -->
</div><!-- /.dropdown -->
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><!-- /.dropdown -->
※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><!-- /.dropdown-menu -->
</div><!-- /.dropdown -->

最も良い点は、任意のボタンの変形でもこれを行うことができること。

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><!-- /.btn-group -->
※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><!-- /.dropdown-menu -->
</div><!-- /.btn-group -->
【設定】
  • <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-onlyspan.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 class="btn btn-secondary dropdown-toggle" type="button" 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)

ドロップアップ(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 を追加

 

ドロップライト(Dropright)v5.0.0-beta1クラス名変更

親要素に .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(右書き)の設定追加に伴いクラス名変更)

 

ドロップレフト(Dropleft)v5.0.0-beta1クラス名変更

親要素に .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>
分離ボタン<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">
			<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>
	<button type="button" class="btn btn-secondary">
		分離ドロップレフト
	</button>
</div>
【設定】
  • .btn-group.dropstart を追加
  • 分離ボタンの場合は、《ドロップレフトボタン》⇒《通常ボタン》の順に設定し、さらに全体を div.btn-group で囲む
【変更履歴】
  • 【v5.0.0-beta1】
    • .dropleft.dropstart(RTL(右書き)の設定追加に伴いクラス名変更)

 

<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 class="dropdown-item" type="button">メニュー1</a></li>
		<li><button class="dropdown-item" type="button">メニュー2</a></li>
		<li><button class="dropdown-item" type="button">メニュー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)

ドロップダウンアイテムに .disabled を追加して、無効のスタイルにする

見本 メニューを開いた状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<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</a></li>
</ul>
【設定】
  • 無効化したいリンクメニュー(a.dropdown-item)に .disabled を追加
アクセシビリティの設定】
  • a.dropdown-item.disabled と同じ要素に、tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)と aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)を入れる

 

デフォルトでは、ドロップダウンメニューは、親の上部から左側に沿って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

レスポンシブな配置(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か所にまとめた。

見本

 

見出し(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-menumax-width スタイルを入れる

フォーム(Forms)v5.0.0-alpha1設定変更

ドロップメニュー内にフォームを挿入して、それをドロップメニューにし、空白ユーティリティを使用して必要な余白を付ける。

1. 基本の設定

見本 メニューを開いた状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<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 class="form-check-label" for="dropdownCheck">
					記憶する
				</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>
※Bootstrap4.xの設定例 赤背景が変更箇所
<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 class="form-check-label" for="dropdownCheck">
					記憶する
				</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>

2. <form>.dropdown-menu 等を設定

見本 メニューを開いた状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<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 class="form-check-label" for="dropdownCheck2">
				記憶する
			</label>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">サインイン</button>
</form>
※Bootstrap4.xの設定例 赤背景が変更箇所
<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 class="form-check-label" for="dropdownCheck2">
				記憶する
			</label>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">サインイン</button>
</form>
【設定】
  • div.dropdown-menu 内に <form> を入れるか、メニューを form.dropdown-menu にする
【変更履歴】
  • 【v5.0.0-alpha1】
    • フォームの設定の変更
      • div.form-groupdiv.mb-3
      • <label>.form-label を入れる

 

data-bs-offsetdata-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 class="btn btn-secondary dropdown-toggle" type="button" 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 class="btn btn-secondary dropdown-toggle" type="button" 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 class="btn btn-secondary dropdown-toggle" type="button" 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-toggledata-bs-auto-close="inside" を入れる
  • メニューの外側のクリックのみで閉じる:.dropdown-toggledata-bs-auto-close="outside" を入れる
  • ボタンのクリックのみで閉じる(esc キーを押しても閉じない):.dropdown-toggledata-bs-auto-close="false" を入れる

 

Sass v5.0.0-beta3追加

変数(Variables)

すべてのドロップダウンの変数:

デフォルトの設定
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:             rgba($black, .15);
$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 / 2;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($gray-900, 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 / 4;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

ダークドロップダウンの変数:

デフォルトの設定
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)

mixinはCSSベースのキャレットを生成するために使用し、scss/mixins/_caret.scss にある。

デフォルトの設定
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" 属性は、アプリケーションレベルでドロップメニューを閉じるために使用されるので、常に使用することを推奨。

データ属性経由で(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.0.0-alpha1設定変更

JavaScriptを使用してドロップダウンを呼び出す。

Bootstrap5.xの設定例
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に依存しない方法に変更

オプション(Options)v5.0.0オプション追加

オプションは、データ属性かJavaScriptを使用して渡される。データ属性の場合、data-bs-offset="" のように data-bs- にオプション名を追加。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース(単語の先頭を大文字にする)からケバブケース(単語をハイフンでつなぐ)に変更すること。例:data-bs-autoClose="false" を使用する代わりに、data-bs-auto-close="false" を使用する。

名前 タイプ デフォルト 説明
boundary
v5.0.0-beta2変更
string | element 'clippingParents' ドロップメニューのオーバーフローを制約する境界(PopperのpreventOverflow修飾子にのみ適用)。デフォルトでは 'clippingParents' とHTMLElementリファレンス(JavaScript経由のみ)の値を受け入れる。詳細については、PopperのpreventOverflowドキュメントに記載。
reference
v5.0.0-beta2変更
string | element| object 'toggle' ドロップダウンメニューのリファレンス要素。'toggle', 'parent'、HTMLElementリファレンス、getBoundingClientRect を提供するオブジェクトの値を受け入れる。詳細については、Popperのconstructorドキュメント仮想要素のドキュメントに記載。
display string 'dynamic' デフォルトでは、Popperを動的配置に使用。static でこれを無効にする。
offset
v5.0.0-beta2復活
array | string | function [0, 2]

ターゲットに対するドロップダウンのオフセット値。data-bs-offset="10,20" のように、カンマ区切りの値を使用してデータ属性に文字列を渡される。

関数を使用してオフセットを決定する場合、Popperの配置、参照とPopperの四角形を最初の引数として含むオブジェクトを使用して呼び出される。トリガー要素のDOMノードが2番目の引数として渡される。関数は、2つの数値を持つ配列を返す必要がある:[スキッド, 距離]

詳細については、Popper.jsのoffsetドキュメントに記載。

autoClose
v5.0.0追加
boolean | string true

ドロップダウンの自動で閉じる動作を構成:

  • true - ドロップダウンメニューの外側か内側をクリックすると、ドロップダウンが閉じる。
  • false - 切替ボタンをクリックすると、手動で hidetoggle メソッドを呼び出してドロップダウンが閉じる(esc キーを押しても閉じない)。
  • 'inside' - ドロップダウンメニューの内側をクリックした場合のみ、ドロップダウンが閉じる。
  • 'outside' - ドロップダウンメニューの外側をクリックした場合のみ、ドロップダウンが閉じる。
popperConfig
v5.0.0-beta2変更
null | object | function null

BootstrapのデフォルトのPopperの構成を変更。詳細は、Popperの構成に記載。

関数を使用してPopper構成を作成すると、BootstrapのデフォルトのPopper構成を含むオブジェクトで呼び出される。これは、デフォルトを使用して独自の構成とマージするのに役立つ。この関数は、Popperの構成オブジェクトを返す必要がある。

popperConfig でfunctionを使用 v5.0.0-beta2追加

var dropdown = new bootstrap.Dropdown(element, {
	popperConfig: function (defaultBsPopperConfig) {
		// var newPopperConfig = {...}
		// 必要に応じてdefaultBsPopperConfigを使用...
		// newPopperConfigを返す
	}
})

【変更履歴】

  • 【v5.0.0-beta1】
    • Popper v2対応により、offset は廃止
  • 【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 を追加

メソッド(Methods)v5.0.0-alpha1設定変更、v5.0.2メソッド追加

メソッド 説明
toggle 指定されたナビゲーションバーやタブ付きナビゲーションのドロップメニューを切り替える。
show 特定のナビゲーションバーやタブ付きナビゲーションのドロップメニューを表示。
hide 特定のナビゲーションバーやタブ付きナビゲーションのドロップメニューを非表示にする。
update 要素のドロップダウンの位置を更新。
dispose 要素のドロップダウンを破棄(DOM要素に保存されているデータを削除)。
getInstance
v5.0.0-alpha1追加
DOM要素に関連付けられたドロップダウン・インスタンスを取得できる静的メソッドで、次のように使用可能:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance
v5.0.2追加
DOM要素に関連付けられたドロップダウン・インスタンスを取得か初期化されていない場合は新しいインスタンスを作成する静的メソッド。次のように使用可能:bootstrap.Dropdown.getOrCreateInstance(element)
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().dropdown('xxx')dropdown.xxx()
  • 【v5.0.2】
    • getOrCreateInstance メソッドが追加

イベント(Events)

すべてのドロップダウンイベントは、切替要素で発生し、その後バブルアップする。したがって、.dropdown-menu の親要素にイベントリスナーが追加可能。hide.bs.dropdownhidden.bs.dropdown イベントには、クリックイベントのイベントオブジェクトを含む clickEvent プロパティ(元のイベントタイプが click のときのみ)がある。

イベントタイプ 説明
show.bs.dropdown 表示のインスタンス・メソッドが呼び出されると直ちに発動。
shown.bs.dropdown ユーザーにドロップダウンが表示されたときに発動(完全にCSS遷移が完了するまで待機)。
hide.bs.dropdown 非表示のインスタンス・メソッドが呼び出されると直ちに発動。
hidden.bs.dropdown ドロップダウンがユーザーから非表示になったときに発動(完全にCSS遷移が完了するまで待機)。
使用例 v5.0.0-alpha1設定変更
JavaScriptvar myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
	// 何かをする...
})