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

ドロップダウン(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> によるドロップメニュー

従来は、ドロップメニューの内容はリンクでなければならなかったが、v4ではそれがなくなった。これでオプションで <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 を入れる

 

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

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

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

 

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

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex">
	<div class="dropdown me-1">
		<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>
</div>

 

使用方法(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-beta2変更

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

名前 タイプ デフォルト 説明
flip boolean true 参照する要素が重なる場合にはドロップダウンを反転させる(例:ドロップメニューを表示する下へのスペースが足りない場合はドロップアップする)。詳細については、Popperのflipドキュメントに記載。
boundary
v5.0.0-beta2変更
string | element 'clippingParents' ドロップメニューのオーバーフローを制約する境界。デフォルトでは '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ドキュメントに記載。

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

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

メソッド 説明
toggle 指定されたナビゲーションバーやタブ付きナビゲーションのドロップメニューを切り替える。
show 特定のナビゲーションバーやタブ付きナビゲーションのドロップメニューを表示。
hide 特定のナビゲーションバーやタブ付きナビゲーションのドロップメニューを非表示にする。
update 要素のドロップダウンの位置を更新。
dispose 要素のドロップダウンを破棄(DOM要素に保存されているデータを削除)。
getInstance
v5.0.0-alpha1追加
DOM要素に関連付けられたドロップダウン・インスタンスを取得することを可能にする静的メソッド。
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().dropdown('xxx')dropdown.xxx()

イベント(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 () {
	// 何かをする...
})