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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

ドロップダウン(Dropdowns) v4.0.0設定変更v4.1.0追加

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

概要(Overview)

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

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

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

 

アクセシビリティ(Accessibility)

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

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

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

 

ドロップダウンの設定(Example)

ドロップダウンの切替(ボタンまたはリンク)とドロップメニューを .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)

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

1. <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.xの設定例 緑背景が変更箇所
コピー<div class="dropdown">
	<!-- 切替ボタンの設定 -->
	<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ドロップダウンボタン
	</button>
	<!-- ドロップメニューの設定 -->
	<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<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 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. ボタングループでの設定

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-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-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 属性を使用
  • ボタンとドロップダウンを関連付けるため、button.btn.btn-{themecolor}.dropdown-toggle にはid="ID"div.dropdown-menu には aria-labelledby="ID" 属性を入れる
  • .dropdown.show を追加すると、メニューが開いた状態で表示される
  • アクティブ化しておきたいメニューがあれば、a.dropdown-item.activeにする

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

  • .dropdown-toggle と同じ要素に
    • aria-haspopup="true" 属性(ポップアップメニューが存在するかどうかを示す)
    • aria-expanded="false" 属性(要素の開閉の状態を示す)
      ※メニューが開いた状態で表示する場合は、false ではなく true にする
    を入れる

【Bootstrap3.xとの変更箇所】

  • キャレット(▼):<span class="caret"></span> の設定は不要
  • ドロップメニュー:ul.dropdown-menu > li > adiv.dropdown-menu > a.dropdown-item
  • メニューが開いた状態:.dropdown.open.dropdown.show

 

分離ボタンドロップダウン(Split button)

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

この追加クラスを使用すると、キャレットの両側の横方向のpaddingを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.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-toggle="dropdown"] > span.sr-only]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
    ※通常のボタンとは別に、ドロップメニュー表示用のボタンを入れる

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

  • ドロップダウンボタンにはユーザー補助用に span.sr-only を入れてドロップダウンの切替であることを示すこと

【Bootstrap3.xとの変更箇所】

  • button.btn.btn-{themecolor}.dropdown-toggle.dropdown-toggle-split を追加(ドロップダウンキャレットの周りに適切な空白を設定するため)して、キャレット(▼) <span class="caret"></span> の設定は不要に
  • ドロップメニュー:ul.dropdown-menu > li > adiv.dropdown-menu > a.dropdown-item

 

ボタンドロップダウンのサイズ(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">大きめ</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0)">メニュー1</a>
		<a class="dropdown-item" href="javascript:void(0)">メニュー2</a>
		<a class="dropdown-item" href="javascript:void(0)">メニュー3</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0)">その他リンク</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-haspopup="true" aria-expanded="false"><span class="sr-only">ドロップダウンの切替</span></button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0)">メニュー1</a>
		<a class="dropdown-item" href="javascript:void(0)">メニュー2</a>
		<a class="dropdown-item" href="javascript:void(0)">メニュー3</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0)">その他リンク</a>
	</div>
</div>
小さめのボタンコピー<div class="btn-group">
	<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">小さめ</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0)">メニュー1</a>
		<a class="dropdown-item" href="javascript:void(0)">メニュー2</a>
		<a class="dropdown-item" href="javascript:void(0)">メニュー3</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0)">その他リンク</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-haspopup="true" aria-expanded="false"><span class="sr-only">ドロップダウンの切替</span></button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0)">メニュー1</a>
		<a class="dropdown-item" href="javascript:void(0)">メニュー2</a>
		<a class="dropdown-item" href="javascript:void(0)">メニュー3</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0)">その他リンク</a>
	</div>
</div>

【設定】

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

【Bootstrap3.xとの変更箇所】

  • 極小: .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-haspopup="true" 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-haspopup="true" aria-expanded="false">
		<span class="sr-only">ドロップアップの切替</span>
	</button>
	<div class="dropdown-menu">
		...
	</div>
</div>

【設定】

  • .btn-group.dropup を追加

 

ドロップライト(Dropright)v4.0.0-beta.3新設

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

見本
設定例
通常のボタンコピー<div class="btn-group dropright">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" aria-expanded="false">
		<span class="sr-only">ドロップライトの切替</span>
	</button>
	<div class="dropdown-menu">
		...
	</div>
</div>

【設定】

  • .btn-group.btn-group を追加

 

ドロップレフト(Dropleft)v4.0.0-beta.3新設

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

見本
設定例
通常のボタンコピー<div class="btn-group dropleft">
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ドロップレフト
	</button>
	<div class="dropdown-menu">
		...
	</div>
</div>
設定例
分離ボタンコピー<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-haspopup="true" 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 で囲む

 

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

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

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

【設定】

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

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

.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 を追加

【Bootstrap3.xとの変更箇所】

  • li.activea.dropdown-item.active

無効化(Disabled)4.0.0設定変更

ドロップダウンのアイテムに .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.xの設定例 緑背景が変更箇所
コピー<div class="dropdown-menu">
	<a class="dropdown-item" href="#">メニュー1</a>
	<a class="dropdown-item disabled" href="#">メニュー2(無効)</a>
	<a class="dropdown-item" href="#">メニュー3</a>
</div>

【設定】

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

【Bootstrap3.xとの変更箇所】

  • li.disableda.dropdown-item.disabled
  • メニューにカーソルを合わせた際に、無効化カーソル(cursor: not-allowed;)に変化しなくなった

 

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

見本

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

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

設定例
コピードロップメニューを右寄せ<div class="btn-group">
	<button type="button class="btn btn-secondary dropdown-toggle"" data-toggle="dropdown" aria-haspopup="true" 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-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>

【設定】

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

【注意】

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

 

見出し(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> とかに変えても字の大きさは変わらず)

【Bootstrap3.xとの変更箇所】

  • li.dropdown-headerh6.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 を入れる

【Bootstrap3.xとの変更箇所】

  • li.dividerdiv.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-menumax-width スタイルを入れる

フォーム(Forms)v4.0.0-beta.2新設

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

見本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-check">
			<input type="checkbox" class="form-check-input" id="dropdownCheck">
			<label class="form-check-label" for="dropdownCheck">
				記憶する
			</label>
		</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-check">
		<input type="checkbox" class="form-check-input" id="dropdownCheck2">
		<label class="form-check-label" for="dropdownCheck2">
			記憶する
		</label>
	</div>
	<button type="submit" class="btn btn-primary">サインイン</button>
</form>

【設定】

  • div.dropdown-menu 内に <form> を入れるか、メニューを form.dropdown-menu にする

 

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

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

見本
CSSの設定例
コピー.dropdown:hover .dropdown-menu {
		display: block;
}

 

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

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

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

 

使用方法(Usage)

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

データ属性経由で(Via data attributes)

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

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

JavaScript経由で(Via JavaScript)

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

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

オプション(Options)v4.0.0新設、v4.1.0一部追加

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

名前 タイプ デフォルト 説明
offset
v4.0.0-beta.2一部追加
number | string | function 0 ターゲットに対するドロップダウンのオフセット値。詳細については、Popper.jsのoffsetドキュメントに記載。
flip boolean true 参照する要素が重なる場合にはドロップダウンを反転させる(例:ドロップダウンメニューを表示する下へのスペースが足りない場合はドロップアップする)。詳細については、Popper.jsのflipドキュメントに記載。
boundary
v4.0.0-beta.3追加
string | element 'scrollParent' ドロップダウンメニューのオーバーフローを制約する境界。'viewport', 'window', 'scrollParent' またはHTMLElementリファレンス(JavaScriptのみ)の値を受け入れる。詳細については、Popper.jsのpreventOverflowドキュメントに記載。
reference
v4.1.0追加
string | element 'toggle' ドロップダウンメニューのリファレンス要素。'toggle', 'parent' またはHTMLElementリファレンスの値を受け入れる。詳細については、Popper.jsのreferenceObjectドキュメントに記載。
display
v4.1.0追加
string 'dynamic' デフォルトでは、Popper.jsを動的配置に使用。static でこれを無効にする。

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

【変更履歴】

  • 【v4.0.0-beta.2】placement は廃止

    offset のタイプに function が追加

  • 【v4.0.0-beta.3】boundary が追加
  • 【v4.1.0】reference, display が追加

メソッド(Methods)

メソッド 説明
$().dropdown('toggle') 指定されたナビゲーションバーやタブ付きナビゲーションのドロップメニューを切り替える。
$().dropdown('update') v4.0.0新設 要素のドロップダウンの位置を更新。
$().dropdown('dispose')
v4.0.0-beta.2新設
要素のドロップダウンを破棄。

イベント(Events)

すべてのドロップダウンイベントは、.dropdown-menu の親要素で発動し、値は切替アンカー要素である relatedTarget プロパティを持つ。

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