ドロップダウン～Bootstrap4移行ガイド

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

概要（Overview）

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

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

ソースファイルからJavaScriptを構築する場合は、util.js が必要。

アクセシビリティ（Accessibility）

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

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

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

ドロップダウンの設定（Example）v4.6.2設定変更

ドロップダウンの切替（ボタンまたはリンク）とドロップメニューを .dropdown または position: relative; を宣言する別の要素（.btn-group など）で囲む。<a> または <button> 要素からドロップダウンを起動させて、潜在的なニーズに合わせることが可能。

見本メニューのみを表示

Bootstrap3.xの設定例赤背景が変更箇所

<div class="dropdown open">
	<ul class="dropdown-menu">
		<li class="active"><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
		<li role="separator" class="divider"></li><!-- 横仕切り線 -->
		<li><a href="#">その他リンク</a></li>
	</ul>
</div><!-- /.dropdown -->

Bootstrap4.xの設定例緑背景が変更箇所

<div class="dropdown show">
	<div class="dropdown-menu">
		<a class="active 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 -->

ボタンドロップダウンの設定（Single button）v4.6.2設定変更

1. `<button>` 要素を使用する場合

任意の単独の .btn を、マークアップの変更によってドロップダウンの切替にすることが可能。<button> 要素で動作させる方法は次のとおり：

Bootstrap3.xの設定例赤背景が変更箇所

<div class="dropdown">
	<!-- 切替ボタンの設定 -->
	<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ドロップダウンボタン
		<span class="caret"></span>
	</button>
	<!-- ドロップメニューの設定 -->
	<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<li><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="#">その他リンク</a></li>
	</ul>
</div><!-- /.dropdown -->

Bootstrap4.6.2～の設定例緑背景が変更箇所

<div class="dropdown">
	<!-- 切替ボタンの設定 -->
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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><!-- /.dropdown -->

2. `<a>` 要素を使用する場合

Bootstrap4.6.1の設定例赤背景が変更箇所

<div class="dropdown">
	<!-- 切替ボタンの設定 -->
	<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" 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 -->

Bootstrap4.6.2の設定例緑背景が変更箇所

<div class="dropdown">
	<!-- 切替ボタンの設定 -->
	<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
		ドロップダウンリンク
	</a>
	<!-- ドロップメニューの設定 -->
	<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><!-- /.dropdown-menu -->
</div><!-- /.dropdown -->

3. ボタングループでの設定

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

Bootstrap3.xの設定例赤背景が変更箇所

<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ボタン
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
		<li class="divider"></li>
		<li><a 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-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-toggle="dropdown"]]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
<a> 要素を使用する場合：div.dropdown > {[a.btn.btn-{themecolor}.dropdown-toggle[data-toggle="dropdown"]]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
ボタングループでの設定：div.btn-group > {button.btn.btn-{themecolor}.dropdown-toggle[data-toggle="dropdown"]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
dropdownプラグインを使ってメニューを開くために .dropdown-toggle と同じ要素に data-toggle="dropdown" を入れる
アンカーリンクでそのままURLを維持するには、href="#" の代わりに data-target 属性を使用
.dropdown に .show を追加すると、メニューが開いた状態で表示される
アクティブ化しておきたいメニューがあれば、a.dropdown-item.active にする

【アクセシビリティの設定】

.dropdown-toggle と同じ要素に、aria-expanded="false" 属性（要素の開閉の状態を示す）を入れる
※メニューが開いた状態で表示する場合は、false ではなく true にする

【変更履歴】

【v4.0.0】
- キャレット（▼）：<span class="caret"></span> の設定は不要
- ドロップメニュー：ul.dropdown-menu > li > a ⇒ div.dropdown-menu > a.dropdown-item
- メニューが開いた状態：.dropdown.open ⇒ .dropdown.show
【v4.6.1】
- ドロップダウンボタンの設定で aria-haspopup="true" 属性（ポップアップメニューが存在するかどうかを示す）が不要に
【v4.6.2】
- ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggle の id="ID" と div.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に

分離ボタンドロップダウン（Split button）v4.6.1設定変更

同じく、単一ボタンドロップダウンとほぼ同じマークアップで、ドロップダウンボタンのドロップダウンを作成するが、ドロップダウンキャレットの周りに適切な間隔を置くために .dropdown-toggle-split を追加。

この追加クラスを使用すると、キャレットの両側の横方向のパディングを25％減らし、通常のボタンドロップダウンに追加される空白は削除。これらの追加変更は、キャレットをスプリットボタンの中央に保ち、メインボタンの隣に適切なサイズのヒット領域を提供。

見本

Bootstrap3.xの設定例赤背景が変更箇所

<div class="btn-group">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="caret"></span>
		<span class="sr-only">ドロップダウンの切替</span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">メニュー1</a></li>
		...
	</ul>
</div>

Bootstrap4（4.6.1～）の設定例緑背景が変更箇所

<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-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-toggle="dropdown"] > span.sr-only]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
※通常のボタンとは別に、ドロップメニュー表示用のボタンを入れる

【アクセシビリティの設定】

ドロップダウンボタンにはユーザー補助用に span.sr-only を入れてドロップダウンの切替であることを示すこと
.dropdown-toggle と同じ要素に、aria-expanded="false" 属性（要素の開閉の状態を示す）を入れる
※メニューが開いた状態で表示する場合は、false ではなく true にする

【変更履歴】

【v4.0.0】
- button.btn.btn-{themecolor}.dropdown-toggle に .dropdown-toggle-split を追加（ドロップダウンキャレットの周りに適切な空白を設定するため）して、キャレット（▼）<span class="caret"></span> の設定は不要に
- ドロップメニュー：ul.dropdown-menu > li > a ⇒ div.dropdown-menu > a.dropdown-item
【v4.6.1】
- ドロップダウンボタンの設定で aria-haspopup="true" 属性（ポップアップメニューが存在するかどうかを示す）が不要に

ボタンドロップダウンのサイズ（Sizing）v4.0.0一部変更

デフォルトおよび分離ドロップダウンボタンを含むボタンのドロップダウンですべてのサイズのボタンが機能する。

サイズの種類

●大きめ .btn-lg

●小さめ .btn-sm

※デフォルト（参考）

設定例

大きめのボタン<div class="btn-group">
	<button type="button" class="btn btn-secondary btn-lg dropdown-toggle" data-toggle="dropdown" 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>

大きめの分離ボタン<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-toggle="dropdown" aria-expanded="false"><span class="sr-only">ドロップダウンの切替</span></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>

小さめのボタン<div class="btn-group">
	<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" 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>

小さめの分離ボタン<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-toggle="dropdown" aria-expanded="false"><span class="sr-only">ドロップダウンの切替</span></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>

【設定】

.btn.btn-{themecolor}.dropdown-toggle に .btn-{size}（上記の「サイズの種類」から選択）を追加
分離ボタンの場合は、通常のボタン部分と切替ボタン部分に追加の必要がある

【変更履歴】

【v4.0.0】
- 極小： .btn-xs は廃止
- 小さめ：.btn-sm はv3のものよりさらに小さめに

ドロップの方向（Directions）

ドロップアップ（Dropup）

親要素に .dropup を追加して、要素の上側にドロップメニューを表示させる。

見本

設定例

ボタン単独の場合<div class="btn-group dropup">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">ボタン</button>
	<div class="dropdown-menu">
		...
	</div>
</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-toggle="dropdown" aria-expanded="false">
		<span class="sr-only">ドロップアップの切替</span>
	</button>
	<div class="dropdown-menu">
		...
	</div>
</div>

【設定】

.btn-group に .dropup を追加

ドロップライト（Dropright）v4.0.0新設

親要素に .dropright を追加して、要素の右側にドロップメニューを表示させる。

見本

設定例

通常のボタン<div class="btn-group dropright">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		ドロップライト
	</button>
	<div class="dropdown-menu">
		...
	</div>
</div>

分離ボタン<div class="btn-group dropright">
	<button type="button" class="btn btn-secondary">
		分離ドロップライト
	</button>
	<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
		<span class="sr-only">ドロップライトの切替</span>
	</button>
	<div class="dropdown-menu">
		...
	</div>
</div>

【設定】

.btn-group に .dropright を追加

ドロップレフト（Dropleft）v4.0.0新設、v4.6.2設定変更

親要素に .dropleft を追加して、要素の左側にドロップメニューを表示させる。

見本

通常のボタン<div class="btn-group dropleft">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		ドロップレフト
	</button>
	<div class="dropdown-menu">
		...
	</div>
</div>

Bootstrap4.6.1の設定例赤背景が変更箇所

分離ボタン<div class="btn-group">
	<div class="btn-group dropleft" role="group">
		<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
			<span class="sr-only">ドロップレフトの切替</span>
		</button>
		<div class="dropdown-menu">
			...
		</div>
	</div>
	<button type="button" class="btn btn-secondary">
		分離ドロップレフト
	</button>
</div>

Bootstrap4.6.2～の設定例緑背景が変更箇所

分離ボタン<div class="btn-group">
	<div class="btn-group dropleft">
		<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
			<span class="sr-only">ドロップレフトの切替</span>
		</button>
		<div class="dropdown-menu">
			...
		</div>
	</div>
	<button type="button" class="btn btn-secondary">
		分離ドロップレフト
	</button>
</div>

【設定】

.btn-group に .dropleft を追加
分離ボタンの場合は、《ドロップレフトボタン》⇒《通常ボタン》の順に設定し、さらに全体を div.btn-group で囲む

【変更履歴】

【v4.6.2】
- 分離ボタンの設定：.btn-group.dropleft の role="group" が不要に

`<button>` によるドロップダウンメニュー v4.0.0新設、v4.7.0設定変更

従来は、ドロップメニューの内容はリンクでなければならなかったが、v4ではそれがなくなった。これでオプションで <a> の代わりにドロップメニューに <button> 要素の使用が可能。

見本

Bootstrap4.6.1の設定例赤背景が変更箇所

<div class="dropdown">
	<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-expanded="false">
	 ドロップダウン
	</button>
	<div class="dropdown-menu" aria-labelledby="dropdownMenu">
		<button class="dropdown-item" type="button">メニュー1</a>
		<button class="dropdown-item" type="button">メニュー2</a>
		<button class="dropdown-item" type="button">メニュー3</a>
	</div>
</div>

Bootstrap4.6.2～の設定例緑背景が変更箇所

<div class="dropdown">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
	 ドロップダウン
	</button>
	<div class="dropdown-menu">
		<button class="dropdown-item" type="button">メニュー1</a>
		<button class="dropdown-item" type="button">メニュー2</a>
		<button class="dropdown-item" type="button">メニュー3</a>
	</div>
</div>

【設定】

a.dropdown-item の代わりに button.dropdown-item を使用

【変更履歴】

【v4.6.2】
- ボタンとドロップダウンを関連付けるための button.btn.dropdown-toggle の id="ID" と div.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に

.dropdown-item-text で非対話的なドロップダウンアイテムが作成可能。カスタムCSSやテキストユーティリティを使用してさらにスタイル設定が可能。

見本メニューのみを表示

設定例

<div class="dropdown-menu">
	<span class="dropdown-item-text">ドロップダウンアイテムのテキスト</span>
	<a class="dropdown-item" href="#">メニュー1</a>
	<a class="dropdown-item" href="#">メニュー2</a>
	<a class="dropdown-item" href="#">メニュー3</a>
</div>

アクティブ化（Active）4.0.0設定変更

ドロップダウンのアイテムに .active を追加して、アクティブ化のスタイルにする。

見本メニューを開いた状態で表示

Bootstrap3.xの設定例赤背景が変更箇所

<ul class="dropdown-menu">
	<li><a href="#">メニュー1</a></li>
	<li class="active"><a href="#">メニュー2（アクティブ化）</a></li>
	<li><a 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 を追加

【変更履歴】

【v4.0.0】
- li.active ⇒ a.dropdown-item.active

無効化（Disabled）4.6.1設定変更

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

見本メニューを開いた状態で表示

Bootstrap3.xの設定例赤背景が変更箇所

<ul class="dropdown-menu">
	<li><a href="#">メニュー1</a></li>
	<li class="disabled"><a href="#">メニュー2（無効）</a></li>
	<li><a href="#">メニュー3</a></li>
</ul>

Bootstrap4.6.1の設定例緑背景が変更箇所

<div class="dropdown-menu">
	<a class="dropdown-item" href="#">メニュー1</a>
	<a class="dropdown-item disabled">メニュー2（無効）</a>
	<a class="dropdown-item" href="#">メニュー3</a>
</div>

【設定】

無効化したいリンクメニュー（a.dropdown-item）に .disabled を追加

【変更履歴】

【v4.0.0】
- li.disabled ⇒ a.dropdown-item.disabled
- メニューにカーソルを合わせた際に、無効化カーソル（＝cursor: not-allowed;）に変化しなくなった
【v4.2.1】
- .disabled 関連のアクセシビリティの設定を追加（v4.6.1で削除）
【v4.6.1】
- href 属性、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）、aria-disabled="true"（支援技術に要素が無効の状態であることを伝える）の設定が不要に（参考）

デフォルトでは、ドロップメニューは、親要素の左側から100％の位置に自動的に配置される。.dropdown-menu-right を .dropdown-menu に追加すると、ドロップメニューが右寄せになる。

注意喚起！　Popperのおかげでドロップダウンが配置される（ナビゲーションバーに含まれている場合を除く）。

見本

●ドロップメニューのみ右寄せ

※ドロップダウン全体を右寄せ（参考）

設定例

ドロップメニューを右寄せ<div class="btn-group">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		ココを押すとボタンの右下にメニューが表示されます
	</button>
	<div class="dropdown-menu dropdown-menu-right">
		<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 class="dropdown float-right">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>

【設定】

左寄せ：div.dropdown-menu に .dropdown-menu-left を追加
右寄せ：div.dropdown-menu に .dropdown-menu-right を追加
ボタンの右下に表示させるためには、div.dropdown ではなく、div.btn-group に設定すること

【注意】

ドロップダウン全体を右寄せするには、div.dropdown に .float-right を追加

レスポンシブな配置（Responsive alignment）v4.2.1新設

レスポンシブな配置を使用する場合は、data-display="static" 属性を追加してダイナミックなポジショニングを無効にし、レスポンス変数クラスを使用。

ドロップダウンメニューを指定されたブレークポイント以上で右寄せに配置するには、.dropdown-menu{-sm|-md|-lg|-xl}-right を追加する。

見本

設定例

<div class="btn-group">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
		通常メニューは左寄せだが大画面のときは右寄せ
	</button>
	<div class="dropdown-menu dropdown-menu-lg-right">
		<button type="button" class="dropdown-item">メニュー1</button>
		<button type="button" class="dropdown-item">メニュー2</button>
		<button type="button" class="dropdown-item">メニュー3</button>
	</div>
</div>

ドロップダウンメニューを指定したブレークポイント以上で左寄せに配置するには、.dropdown-menu-right と .dropdown-menu{-sm|-md|-lg|-xl}-left を追加する。

見本

設定例

<div class="btn-group">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
		通常メニューは右寄せだが大画面のときは左寄せ
	</button>
	<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
		<button type="button" class="dropdown-item">メニュー1</button>
		<button type="button" class="dropdown-item">メニュー2</button>
		<button type="button" class="dropdown-item">メニュー3</button>
	</div>
</div>

注：Popperはナビゲーションバーでは使用されないので、ナビゲーションバーのドロップダウンボタンに data-display="static" 属性を追加する必要はない。

見出し（Headers）

任意のドロップメニューのアクションのセクションにラベルを付けるヘッダーを追加。

見本メニューを開いた状態で表示

Bootstrap3.xの設定例赤背景が変更箇所

<ul class="dropdown-menu">
	<li class="dropdown-header">ドロップダウンの見出し</li><!-- ドロップダウンの見出し -->
	<li><a href="#">メニュー1</a></li>
	...
</ul>

Bootstrap4.xの設定例緑背景が変更箇所

<div class="dropdown-menu">
	<h6 class="dropdown-header">ドロップダウンの見出し</h6><!-- ドロップダウンの見出し -->
	<a class="dropdown-item" href="#">メニュー1</a>
	...
</div>

【設定】

見出しをつけたい箇所に h6.dropdown-header を入れる（<h5> とかに変えても字の大きさは変わらず）

【変更履歴】

【v4.0.0】
- li.dropdown-header ⇒ h6.dropdown-header

横仕切り線（Dividers）

関連するメニューアイテムのグループを仕切りで区切る。

見本メニューを開いた状態で表示

Bootstrap3.xの設定例赤背景が変更箇所

<ul class="dropdown-menu">
	<li><a href="#">メニュー1</a></li>
	...
	<li role="separator" class="divider"></li>
	...
</ul>

Bootstrap4.xの設定例緑背景が変更箇所

<div class="dropdown-menu">
	<a class="dropdown-item" href="#">メニュー1</a>
	...
	<div class="dropdown-divider"></div>
	...
</div>

【設定】

横仕切り線を入れたい箇所に div.dropdown-divider を入れる

【変更履歴】

【v4.0.0】
- li.divider ⇒ div.dropdown-divider

テキスト（Text）v4.1.0新設

空白ユーティリティを使用してフリーフォームのテキストをテキスト付きドロップダウンメニューに配置。メニュー幅を制限するには、サイズスタイルを追加する必要あり。

見本1 メニューを開いた状態で表示

設定例

<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）v4.0.0新設、v4.2.1設定変更

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

見本1 メニューを開いた状態で表示

設定例

<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 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 にする

【変更履歴】

【v4.2.1】
- div.form-check の部分も div.form-group で囲む

ドロップメニューをホバー表示する方法 ※裏技（非推奨）

本来、リンクまたはボタンをクリックしてドロップメニューが表示されるが、あえてホバーして表示したい場合の方法。
参考：Bootstrap3.0のドロップダウンをマウスオーバーで使用する方法（Designup）

見本

設定例

CSS.dropdown:hover .dropdown-menu {
		display: block;
}

data-offset や data-reference を使用して、ドロップダウンの位置を変更。

見本

設定例

<div class="d-flex">
	<div class="dropdown mr-1">
		<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
			オフセット
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item">メニュー1</a>
			<a class="dropdown-item">メニュー2</a>
			<a class="dropdown-item">メニュー3</a>
		</div>
	</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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
		<span class="sr-only">ドロップダウンの切替</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item">メニュー1</a>
			<a class="dropdown-item">メニュー2</a>
			<a class="dropdown-item">メニュー3</a>
		</div>
	</div>
</div>

※詳しいオプションの設定方法についてはJSサンプル集に記載。

使用方法（Usage）

データ属性またはJavaScript経由で、ドロップダウンプラグインは、親要素の .dropdown-menuの .show クラスを切り替えることによって、非表示のコンテンツ（ドロップメニュー）を切り替える。data-toggle="dropdown" 属性は、アプリケーションレベルでドロップメニューを閉じるために使用されるので、常に使用することを推奨。

タッチ対応デバイスでは、ドロップダウンを開くと、空の（$.noop）mouseover ハンドラが <body> 要素の直下の子要素に追加される。この明らかに見苦しいハックは、ドロップダウンの外側の任意の場所でタップするとドロップダウンを閉じるコードが起動されることを防ぐiOSのイベント委任の奇妙な癖を回避するために必要。ドロップダウンが閉じられると、これらの追加の空の mouseover ハンドラーは削除される。

データ属性経由で（Via data attributes）

data-toggle="dropdown" をリンクまたはボタンに追加すると、ドロップダウンが切り替わる。

<div class="dropdown">
	<button type="button" data-toggle="dropdown" aria-expanded="false">
		ドロップダウンの切替
	</button>
	<div class="dropdown-menu">
		...
	</div>
</div>

JavaScript経由で（Via JavaScript）

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

JavaScript$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"` は依然として必要

JavaScriptを使用してドロップダウンを呼び出すかどうか、data-apiを使用するかどうかにかかわらず、data-toggle="dropdown" は、常にドロップダウンの起動要素に存在する必要がある。

オプション（Options）v4.0.0新設、v4.4.0一部追加

オプションは、データ属性またはJavaScriptを使用して渡すことが可能。データ属性の場合、data-offset="" のように data- にオプション名を追加する。

名前	タイプ	デフォルト	説明
offset v4.0.0タイプ追加	number \| string \| function	0	ターゲットに対するドロップダウンのオフセット値。オフセットを決定するために関数を使用する場合は、最初の引数としてオフセットデータを含むオブジェクトで呼び出される。関数は同じ構造を持つオブジェクトを返さなければならない。切替要素のDOMノードは、2番目の引数として渡される。詳細については、Popperのoffsetドキュメントに記載。
flip	boolean	true	参照する要素が重なる場合にはドロップダウンを反転させる（ドロップダウンメニューを表示する下へのスペースが足りない場合はドロップアップするなど）。詳細については、Popperのflipドキュメントに記載。
boundary v4.0.0追加	string \| element	'scrollParent'	ドロップダウンメニューのオーバーフローを制約する境界。`'viewport'`, `'window'`, `'scrollParent'` またはHTMLElementリファレンス（JavaScriptのみ）の値を受け入れる。詳細については、PopperのpreventOverflowドキュメントに記載。
reference v4.1.0追加	string \| element	'toggle'	ドロップダウンメニューのリファレンス要素。`'toggle'`, `'parent'` またはHTMLElementリファレンスの値を受け入れる。詳細については、PopperのreferenceObjectドキュメントに記載。
display v4.1.0追加	string	'dynamic'	デフォルトでは、Popperを動的配置に使用。`static` でこれを無効にする。
popperConfig v4.4.0追加	null \| object	null	BootstrapのデフォルトのPopperの構成を変更。詳細は、Popperの構成を参照。

boundary が 'scrollParent' 以外の値に設定されている場合、position: static スタイルが .dropdown のコンテナに適用される。

【変更履歴】

【v4.0.0】
- placement は廃止、boundary が追加
- offset のタイプに function が追加
【v4.1.0】
- reference, display が追加
【v4.4.0】
- popperConfig が追加

メソッド（Methods）

メソッド	説明
`$().dropdown('toggle')`	指定されたナビゲーションバーやタブ付きナビゲーションのドロップメニューを切り替える。
`$().dropdown('show')` v4.2.1追加	特定のナビゲーションバーまたはタブ付きナビゲーションのドロップダウンメニューを表示。
`$().dropdown('hide')` v4.2.1追加	特定のナビゲーションバーまたはタブ付きナビゲーションのドロップダウンメニューを非表示にする。
`$().dropdown('update')` v4.0.0追加	要素のドロップダウンの位置を更新。
`$().dropdown('dispose')` v4.0.0追加	要素のドロップダウンを破棄。

イベント（Events）

すべてのドロップダウンイベントは、.dropdown-menu の親要素で発動し、値は切替アンカー要素である relatedTarget プロパティを持つ。hide.bs.dropdownと hidden.bs.dropdown イベントには、クリックイベントのイベントオブジェクトを含む clickEvent プロパティ（元のイベントタイプが click のときのみ）がある。

イベントタイプ	説明
`show.bs.dropdown`	このイベントは、表示のインスタンス・メソッドが呼び出されると直ちに発動。
`shown.bs.dropdown`	このイベントは、ユーザーにドロップダウンが表示されたときに発動（完全にCSS遷移が完了するまで待機）。
`hide.bs.dropdown`	このイベントは、非表示のインスタンス・メソッドが呼び出されると直ちに発動。
`hidden.bs.dropdown`	このイベントは、ドロップダウンがユーザーから非表示になったときに発動（完全にCSS遷移が完了するまで待機）。

使用例

JavaScript$('#myDropdown').on('show.bs.dropdown', function () {
	// 何かをする...
})

ドロップダウン（Dropdowns） v4.6.2設定変更v4.2.1追加

概要（Overview）

アクセシビリティ（Accessibility）

ドロップダウンの設定（Example）v4.6.2設定変更

ドロップメニュー

見本 メニューのみを表示

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

ボタンドロップダウンの設定（Single button）v4.6.2設定変更

1. <button> 要素を使用する場合

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.6.2～の設定例 緑背景が変更箇所

2. <a> 要素を使用する場合

Bootstrap4.6.1の設定例 赤背景が変更箇所

Bootstrap4.6.2の設定例 緑背景が変更箇所

3. ボタングループでの設定

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

分離ボタンドロップダウン（Split button）v4.6.1設定変更

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4（4.6.1～）の設定例 緑背景が変更箇所

ボタンドロップダウンのサイズ（Sizing）v4.0.0一部変更

サイズの種類

設定例

ドロップの方向（Directions）

ドロップアップ（Dropup）

見本

設定例

ドロップライト（Dropright）v4.0.0新設

見本

設定例

ドロップレフト（Dropleft）v4.0.0新設、v4.6.2設定変更

見本

Bootstrap4.6.1の設定例 赤背景が変更箇所

Bootstrap4.6.2～の設定例 緑背景が変更箇所

ドロップメニューアイテム（Menu items）

<button> によるドロップダウンメニュー v4.0.0新設、v4.7.0設定変更

見本

Bootstrap4.6.1の設定例 赤背景が変更箇所

Bootstrap4.6.2～の設定例 緑背景が変更箇所

非対話的なドロップダウン v4.1.0新設

見本 メニューのみを表示

設定例

アクティブ化（Active）4.0.0設定変更

見本 メニューを開いた状態で表示

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

無効化（Disabled）4.6.1設定変更

見本 メニューを開いた状態で表示

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.6.1の設定例 緑背景が変更箇所

ドロップメニューの配置（Alignment）

見本

設定例

レスポンシブな配置（Responsive alignment）v4.2.1新設

見本

設定例

見本

設定例

ドロップメニューのコンテンツ（Menu content）

見出し（Headers）

見本 メニューを開いた状態で表示

ドロップダウンの見出し

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

横仕切り線（Dividers）

見本 メニューを開いた状態で表示

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

テキスト（Text）v4.1.0新設

見本1 メニューを開いた状態で表示

設定例

フォーム（Forms）v4.0.0新設、v4.2.1設定変更

見本1 メニューを開いた状態で表示

設定例

見本2 メニューを開いた状態で表示

設定例

ドロップメニューをホバー表示する方法 ※裏技（非推奨）

見本

見本メニューのみを表示

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

1. `<button>` 要素を使用する場合

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.6.2～の設定例緑背景が変更箇所

2. `<a>` 要素を使用する場合

Bootstrap4.6.1の設定例赤背景が変更箇所

Bootstrap4.6.2の設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4（4.6.1～）の設定例緑背景が変更箇所

Bootstrap4.6.1の設定例赤背景が変更箇所

Bootstrap4.6.2～の設定例緑背景が変更箇所

`<button>` によるドロップダウンメニュー v4.0.0新設、v4.7.0設定変更

Bootstrap4.6.1の設定例赤背景が変更箇所

Bootstrap4.6.2～の設定例緑背景が変更箇所

見本メニューのみを表示

見本メニューを開いた状態で表示

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

見本メニューを開いた状態で表示

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.6.1の設定例緑背景が変更箇所

見本メニューを開いた状態で表示

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

見本メニューを開いた状態で表示

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

`data-toggle="dropdown"` は依然として必要