ドロップダウン（Dropdowns） v5.2.0設定変更

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

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。

このページの項目 v5.2.0設定変更

概要（Overview）

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

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

アクセシビリティ（Accessibility）

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

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

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

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

ドロップダウンの切替（ボタンやリンク）とドロップメニューを .dropdown や position: relative を宣言する別の要素（例：.btn-group）で囲む。理想的には、ドロップダウンのトリガーとして <button> 要素を使用すべきだが、このプラグインは <a> 要素でも動作する。ここに示す見本では、適切な場所でセマンティックな <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>
</div>

【設定】

div.dropdown > ul.dropdown-menu > <li> > a.dropdown-item

【変更履歴】

【v5.0.0-alpha1】
- div.dropdown-menu > a.dropdown-item ⇒ ul.dropdown-menu > <li> > a.dropdown-item
【v5.2.0】
- border-radius の値を調整したので、若干丸みを帯びたデザインに変更

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

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

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

Bootstrap5.2.0～の設定例緑背景が変更箇所

<div class="dropdown">
  <!-- 切替ボタンの設定 -->
  <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>

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

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

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

ドロップダウン切替のコントロールは <button> が推奨されているが、<a> 要素を使用しなければならない状況もある。その場合、スクリーン・リーダーのような支援技術にコントロールの目的を適切に伝えるために、role="button" 属性を追加することを推奨。

Bootstrap5.2.0～の設定例緑背景が変更箇所

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

※Bootstrap4.6.xの設定例赤背景が変更箇所

<div class="dropdown">
  <!-- 切替ボタンの設定 -->
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウンリンク
  </a>
  <!-- ドロップメニューの設定 -->
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">メニュー1</a>
    <a class="dropdown-item" href="#">メニュー2</a>
    <a class="dropdown-item" href="#">メニュー3</a>
  </div>
</div>

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

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

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

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
   ボタン
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
    <li><a class="dropdown-item" href="#">メニュー3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">その他リンク</a></li>
  </ul>
</div>

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

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   ボタン
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">メニュー1</a>
    <a class="dropdown-item" href="#">メニュー2</a>
    <a class="dropdown-item" href="#">メニュー3</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">その他リンク</a>
  </div>
</div>

【設定】

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

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

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

【変更履歴】

【v5.0.0-alpha1】
- ドロップダウンボタンのアクセシビリティの設定で aria-haspopup="true" 属性（ポップアップメニューがあるかどうかを示す）が不要に（v4.6.1でバックポート）
- ドロップメニュー部分の設定を変更
【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-toggle="dropdown"] ⇒ [data-bs-toggle="dropdown"]
【v5.2.0】
- ボタンとドロップダウンを関連付けるための button.btn.btn-{themecolor}.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）

分離ボタンドロップダウン（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.6.0の設定例赤背景が変更箇所

<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】
- ドロップダウンボタンのアクセシビリティの設定で aria-haspopup="true" 属性（ポップアップメニューがあるかどうかを示す）が不要に（v4.6.1でバックポート）
- ドロップメニュー部分の設定を変更
【v5.0.0-alpha2】
- span.sr-only ⇒ span.visually-hidden
【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-toggle="dropdown"] ⇒ [data-bs-toggle="dropdown"]

ボタンドロップダウンのサイズ（Sizing）

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

サイズの種類

大きめ .btn-lg

小さめ .btn-sm

デフォルト（参考）

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

大きめのボタン<div class="btn-group">
  <button type="button" class="btn btn-secondary btn-lg dropdown-toggle" data-bs-toggle="dropdown">大きめ</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
    <li><a class="dropdown-item" href="#">メニュー3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">その他リンク</a></li>
  </ul>
</div>

大きめの分離ボタン<div class="btn-group">
  <button type="button" class="btn btn-secondary btn-lg">大きめの分離ボタン</button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">ドロップダウンの切替</span></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
    <li><a class="dropdown-item" href="#">メニュー3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">その他リンク</a></li>
  </ul>
</div>

小さめのボタン<div class="btn-group">
  <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">小さめ</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
    <li><a class="dropdown-item" href="#">メニュー3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">その他リンク</a></li>
  </ul>
</div>

小さめの分離ボタン<div class="btn-group">
  <button type="button" class="btn btn-secondary btn-sm">小さめの分離ボタン</button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">ドロップダウンの切替</span></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
    <li><a class="dropdown-item" href="#">メニュー3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">その他リンク</a></li>
  </ul>
</div>

【設定】

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

ダークドロップダウン（Dark dropdowns）v5.0.0-alpha2新設、v5.2.0設定変更 v5.3.0非推奨

暗めのナビゲーションバーや任意のスタイルに合わせるために、既存の .dropdown-menu に .dropdown-menu-dark を追加すれば、暗めのドロップダウンになる。ドロップダウンアイテムを変更する必要はない。

注意！コンポーネントのダーク・バージョンは、カラーモードの導入に伴い v5.3.0で非推奨になった。.dropdown-menu-dark を追加する代わりにルート要素、親要素のラッパー、コンポーネント自体に data-bs-theme="dark" を設定すること。

見本

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">ボタン</button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">ボタン</button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#" aria-current="true">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
    <li><a class="dropdown-item" href="#">メニュー3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">その他リンク</a></li>
  </ul>
</div>

ナビゲーションバーで使用する場合：v5.2.3追加

見本

設定例

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ナビバー</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            ドロップダウン
          </button>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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>
        </li>
      </ul>
    </div>
  </div>
</nav>

【設定】

.dropdown-menu に .dropdown-menu-dark を追加

【変更履歴】

【v5.2.0】
- ボタンとドロップダウンを関連付けるための button.btn.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）

【変更履歴】

【v5.3.0】
- カラーモードの新設に伴い .dropdown-menu-dark は非推奨に（v5.3.0～でも使用できるがv6で廃止予定）

ドロップの方向（Directions）

RTL

RTL（右書き）でBootstrapを使用すると、方向が反転する。つまり、.dropstart は右側に表示される。

中央揃え（Centered）v5.2.0新設

親要素の .dropdown-center を使用して、切替ボタンの下の中央にドロップダウンメニューを作成。

見本

設定例

<div class="dropdown-center">
  ...
</div>

【設定】

div.dropdown の代わりに div.dropdown-center を使用/li>

ドロップアップ（Dropup）

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

見本

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

ボタン単独の場合<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">ボタン</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    ...
  </ul>
</div>

分離ボタンの場合<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    分離ボタン
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">ドロップアップの切替</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    ...
  </ul>
</div>

【設定】

.btn-group に .dropup を追加

ドロップアップの中央揃え（Dropup centered）v5.2.0新設

親要素に .dropup-center を使用して、起動ボタンの上にドロップアップメニューを中央に配置。

見本

設定例

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    中央揃えのドロップアップ
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    ...
  </ul>
</div>

【設定】

.dropup に .dropup-center を追加

ドロップエンド（Dropend）v5.0.0-beta1クラス名変更、v5.2.0「ドロップライト」から変更

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

見本

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

通常のボタン<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップエンド
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    ...
  </ul>
</div>

分離ボタン<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    分離ドロップエンド
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">ドロップエンドの切替</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    ...
  </ul>
</div>

【設定】

.btn-group に .dropend を追加

【変更履歴】

【v5.0.0-beta1】
- .dropright ⇒ .dropend（RTL（右書き）の設定追加に伴いクラス名変更）

ドロップスタート（Dropstart）v5.0.0-beta1クラス名変更、v5.2.0「ドロップレフト」から変更と一部設定変更

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

見本

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

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

分離ボタン（5.2.0～）<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">ドロップスタートの切替</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
  <button type="button" class="btn btn-secondary">
    分離ドロップスタート
  </button>
</div>

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

分離ボタン<div class="btn-group">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">ドロップスタートの切替</span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    分離ドロップスタート
  </button>
</div>

【設定】

.btn-group に .dropstart を追加
分離ボタンの場合は、《ドロップスタートボタン》⇒《通常ボタン》の順に設定

【変更履歴】

【v5.0.0-beta1】
- .dropleft ⇒ .dropstart（RTL（右書き）の設定追加に伴いクラス名変更）
【v5.2.0】
- 分離ボタンの設定：全体を div.btn-group で囲む必要がなくなり、.btn-group.dropstart の role="group" も不要に

`<button>` によるドロップメニュー v5.2.0設定変更

ドロップダウンアイテムとして <a> か <button> 要素を使用できる。

見本

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

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

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

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

【設定】

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

【変更履歴】

【v5.2.0】
- ボタンとドロップダウンを関連付けるための button.btn.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）

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

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

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

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

アクティブ化（Active）v5.0.0-alpha1設定変更

ドロップダウンアイテムに .active を追加して、アクティブ化のスタイルにする。アクティブな状態を支援技術に伝えるには、aria-current 属性を使用－現在のページを示す page 値かセット内の現在のアイテムを示す true 値を使用。

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

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

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">メニュー1</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">メニュー2（アクティブ化）</a></li>
  <li><a class="dropdown-item" href="#">メニュー3</a></li>
</ul>

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">メニュー1</a>
  <a class="dropdown-item active" href="#">メニュー2（アクティブ化）</a>
  <a class="dropdown-item" href="#">メニュー3</a>
</div>

【設定】

アクティブ化したいリンクメニュー（a.dropdown-item）に .active を追加

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

.active と同じ要素に aria-current="true"（支援技術に現在のアイテムだと伝える）を入れる

【変更履歴】

【v5.0.0-alpha1】
- アクセシビリティの設定を追加

無効化（Disabled）v5.1.1設定変更

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

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

Bootstrap5.1.1～の設定例緑背景はv5.0.0-alpha1での変更箇所

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

※Bootstrap5.1.0の設定例赤背景が変更箇所

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

【設定】

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

【変更履歴】

【v5.1.1】
- href 属性、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）、aria-disabled="true"（支援技術に要素が無効の状態だと伝える）の設定が不要に（参考、v4.6.1でバックポート）

デフォルトでは、ドロップダウンメニューは、親の上部から左側に沿って100%自動的に配置される。これは、方向性のある .drop* クラスで変更できるが、追加の修飾子クラスで制御もできる。

.dropdown-menu-end を .dropdown-menu に追加すると、ドロップメニューが行末（右）揃えになる。RTLでBootstrapを使用すると、方向が反転する。つまり、.dropdown-menu-end が行末（左）側に表示される。

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

見本

ドロップメニューのみ行末揃え

ドロップダウン全体を行末揃え（参考）

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か所にまとめた。

見本

設定例

<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">
    ...
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    メニューの行末揃え
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    ...
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    通常は行頭揃え、lgで行末揃え
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    ...
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    通常は行末揃え、lgで行頭揃え
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    ...
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    行頭側にドロップ
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    行末側にドロップ
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    上にドロップ
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

見出し（Headers）

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

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

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

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

【設定】

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

横仕切り線（Dividers）

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

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

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

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

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

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

【設定】

横仕切り線を入れたい箇所に <li> > hr.dropdown-divider を入れる

【変更履歴】

【v5.0.0-alpha1】
- div.dropdown-divider ⇒ <li> > hr.dropdown-divider

テキスト（Text）

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

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

設定例

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    プルダウンメニュー内で自由に流れるテキストの例文。
  </p>
  <p class="mb-0">
    そしてこれはもう1つの例文。
  </p>
</div>

【設定】

.dropdown-menu に別のユーティリティクラスを追加
折り返し幅を決めたい場合は、.dropdown-menu に max-width スタイルを入れる

フォーム（Forms）v5.2.0設定変更

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

1. 基本の設定

見本

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

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">ドロップダウン</button>
  <div class="dropdown-menu">
    <form class="px-4 py-3">
      <div class="mb-3">
        <label for="exampleDropdownFormEmail1" class="form-label">Eメールアドレス</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="mb-3">
        <label for="exampleDropdownFormPassword1" class="form-label">パスワード</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="パスワード">
      </div>
      <div class="mb-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="dropdownCheck">
          <label for="dropdownCheck" class="form-check-label">
            記憶する
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">サインイン</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">新規の方はこちらから登録</a>
    <a class="dropdown-item" href="#">パスワードを忘れた方はこちら</a>
  </div>
</div>

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

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">ドロップダウン</button>
  <div class="dropdown-menu">
    <form class="px-4 py-3">
      <div class="form-group">
        <label for="exampleDropdownFormEmail1">Eメールアドレス</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword1">パスワード</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="パスワード">
      </div>
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="dropdownCheck">
          <label for="dropdownCheck" class="form-check-label">
            記憶する
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">サインイン</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">新規の方はこちらから登録</a>
    <a class="dropdown-item" href="#">パスワードを忘れた方はこちら</a>
  </div>
</div>

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

見本

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

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">ドロップダウン</button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label>Eメールアドレス</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label>パスワード</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label for="dropdownCheck2" class="form-check-label">
          記憶する
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">サインイン</button>
  </form>
</div>

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

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">ドロップダウン</button>
  <form class="dropdown-menu p-4">
    <div class="form-group">
      <label for="exampleDropdownFormEmail2">Eメールアドレス</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword2">パスワード</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label for="dropdownCheck2" class="form-check-label">
          記憶する
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">サインイン</button>
  </form>
</div>

【設定】

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

【注意】

button.btn.dropdown-toggle《ドロップダウンの切替ボタン》に [data-bs-auto-close="outside"]（メニューの外側をクリックするとメニューを閉じる）を入れる（ラベルをクリックするとドロップダウンメニューが閉じるのを防ぐ）

【変更履歴】

【v5.0.0-alpha1】
- フォームの設定の変更
  - div.form-group ⇒ div.mb-3
  - <label> に .form-label を入れる
【v5.2.0】
- button.btn.dropdown-toggle に [data-bs-auto-close="outside"] を入れる

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

見本

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

オフセット<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
    オフセット
  </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>
  </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
  <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>
  </ul>
</div>

【設定】

data-bs-offset でドロップメニューの表示位置をずらすことができる
data-bs-reference="parent" で分離ボタンのドロップメニューの表示位置を親ボタンの位置にできる

【変更履歴】

【v5.2.0】
- ボタンとドロップダウンを関連付けるための button.btn.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）

自動で閉じる動作（Auto close behavior）v5.0.0新設

デフォルトでは、ドロップダウンメニューの内側か外側をクリックすると、ドロップダウンメニューは閉じられるが、autoClose オプションを使用して、ドロップダウンのこの動作が変更できる。

見本

設定例

メニューの内側のクリックのみで閉じる<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    内側をクリック
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニューアイテム</a></li>
    <li><a class="dropdown-item" href="#">メニューアイテム</a></li>
    <li><a class="dropdown-item" href="#">メニューアイテム</a></li>
  </ul>
</div>

メニューの外側のクリックのみで閉じる<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    外側をクリック
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニューアイテム</a></li>
    <li><a class="dropdown-item" href="#">メニューアイテム</a></li>
    <li><a class="dropdown-item" href="#">メニューアイテム</a></li>
  </ul>
</div>

ボタンのクリックのみで閉じる<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    手動で閉じる
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニューアイテム</a></li>
    <li><a class="dropdown-item" href="#">メニューアイテム</a></li>
    <li><a class="dropdown-item" href="#">メニューアイテム</a></li>
  </ul>
</div>

【設定】

ドロップダウンメニューの内側のクリックのみで閉じる：.dropdown-toggle に data-bs-auto-close="inside" を入れる
メニューの外側のクリックのみで閉じる：.dropdown-toggle に data-bs-auto-close="outside" を入れる
ボタンのクリックのみで閉じる（Esc キーを押しても閉じない）：.dropdown-toggle に data-bs-auto-close="false" を入れる

【変更履歴】

【v5.2.0】
- ボタンとドロップダウンを関連付けるための button.btn.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に（v4.6.2でバックポート）

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、ドロップダウンは、リアルタイムのカスタマイズを強化するために、.dropdown-menu でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_dropdown.scss 内 dropdown-css-vars の設定--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

ドロップダウン・アイテムは、.dropdown で設定されない変数を少なくとも1つ含む。これによりBootstrapがデフォルトでフォールバック値を設定する間に、新しい値を提供できる。

-bs-dropdown-item-border-radius

CSS変数によるカスタマイズは、重複するCSSセレクタを追加せずに特定の値を再定義する .dropdown-menu-dark クラスで確認できる。

デフォルトの設定

scss/_dropdown.scss 内 dropdown-dark-css-vars の設定--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Sass変数（Sass variables）v5.2.0変数から名称変更

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

デフォルトの設定

scss/_variables.scss 内 dropdown-variables の設定$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    var(--#{$prefix}body-color);
$dropdown-bg:                       var(--#{$prefix}body-bg);
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             var(--#{$prefix}border-width);
$dropdown-inner-border-radius:      calc($dropdown-border-radius - $dropdown-border-width); // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               var(--#{$prefix}body-color);
$dropdown-link-hover-color:         $dropdown-link-color;
$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg);

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // v5.2.0で非推奨
// fusv-enable

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

デフォルトの設定

scss/_variables.scss 内 dropdown-dark-variables の設定$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

ドロップダウンの対話性を示すCSSベースのキャレット()の変数：

デフォルトの設定

scss/_variables.scss 内 caret-variables の設定$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

mixin（Mixins）

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

デフォルトの設定

scss/mixins/_caret.scss 内 caret-mixins の設定@mixin caret-down($width: $caret-width) {
  border-top: $width solid;
  border-right: $width solid transparent;
  border-bottom: 0;
  border-left: $width solid transparent;
}

@mixin caret-up($width: $caret-width) {
  border-top: 0;
  border-right: $width solid transparent;
  border-bottom: $width solid;
  border-left: $width solid transparent;
}

@mixin caret-end($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: 0;
  border-bottom: $width solid transparent;
  border-left: $width solid;
}

@mixin caret-start($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: $width solid;
  border-bottom: $width solid transparent;
}

@mixin caret(
  $direction: down,
  $width: $caret-width,
  $spacing: $caret-spacing,
  $vertical-align: $caret-vertical-align
) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $spacing;
      vertical-align: $vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down($width);
      } @else if $direction == up {
        @include caret-up($width);
      } @else if $direction == end {
        @include caret-end($width);
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $spacing;
        vertical-align: $vertical-align;
        content: "";
        @include caret-start($width);
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

使用方法（Usage）

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

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

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

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

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

JavaScript経由で（Via JavaScript）v5.2.0設定変更

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

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

JavaScriptconst dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

JavaScriptvar dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

※Bootstrap4.xの設定例

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

【変更履歴】

【v5.0.0-alpha1】
- JavaScriptの記述をjQueryに依存しない方法に変更
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

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

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

オプション（Options）v5.0.0オプション追加

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース（単語の先頭を大文字にする）からケバブケース（単語をハイフンでつなぐ）にご変更下さい。例：data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config をサポート。要素に data-bs-config='{"delay":0, "title":123}' と data-bs-title="456" 属性がある場合、最終的な title 値は 456 になり、個別のデータ属性は data-bs-config で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

名前	タイプ	デフォルト	説明
`autoClose` v5.0.0追加	boolean \| string	`true`	ドロップダウンの自動で閉じる動作を構成： `true` - ドロップダウンメニューの外側か内側をクリックすると、ドロップダウンが閉じる。 `false` - 切替ボタンをクリックすると、手動で `hide` か `toggle` メソッドを呼び出してドロップダウンが閉じる。 `'inside'` - ドロップダウンメニューの内側をクリックした場合のみ、ドロップダウンが閉じる。 `'outside'` - ドロップダウンメニューの外側をクリックした場合のみ、ドロップダウンが閉じる。ドロップダウンは、`Esc` キーでいつでも閉じることができる。
`boundary` v5.0.0-beta2変更	string \| element	`'clippingParents'`	ドロップメニューのオーバーフローを制約する境界（PopperのpreventOverflow修飾子にのみ適用）。デフォルトでは `'clippingParents'` とHTMLElementリファレンス（JavaScript経由のみ）の値を受け入れる。詳細については、PopperのpreventOverflowドキュメントに記載。
`display`	string	`'dynamic'`	デフォルトでは、Popperを動的配置に使用。`static` でこれを無効にする。
`offset` v5.0.0-beta2復活	array \| string \| function	`[0, 2]`	ターゲットに対するドロップダウンのオフセット値。`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の構成オブジェクトを返す必要がある。
`reference` v5.0.0-beta2変更	string \| element \| object	`'toggle'`	ドロップダウンメニューのリファレンス要素。`'toggle'`, `'parent'`、HTMLElementリファレンス、`getBoundingClientRect` を提供するオブジェクトの値を受け入れる。詳細については、Popperのconstructorドキュメントと仮想要素のドキュメントに記載。

`popperConfig` でfunctionを使用 v5.0.0-beta2追加、v5.2.0設定変更

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

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

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

JavaScriptvar 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 を追加
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

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

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

【変更履歴】

【v5.0.0-alpha1】
- $().dropdown('xxx') ⇒ dropdown.xxx()
【v5.0.2】
- getOrCreateInstance メソッドが追加

イベント（Events）

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

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

使用例 v5.2.0設定変更

JavaScriptconst myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // 何かをする...
})

前のページ
折り畳み

次のページ
※ジャンボトロン

ドロップダウン（Dropdowns） v5.2.0設定変更

概要（Overview）

アクセシビリティ（Accessibility）

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

ドロップメニュー v5.2.0デザイン変更

見本 メニューのみを表示

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

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

【設定】

【変更履歴】

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

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

Bootstrap5.2.0～の設定例 緑背景が変更箇所

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

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

Bootstrap5.2.0～の設定例 緑背景が変更箇所

※Bootstrap4.6.xの設定例 赤背景が変更箇所

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

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

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

【設定】

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

【変更履歴】

分離ボタンドロップダウン（Split button）v5.0.0-beta1設定変更

見本

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

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

【設定】

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

【変更履歴】

ボタンドロップダウンのサイズ（Sizing）

サイズの種類

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

【設定】

ダークドロップダウン（Dark dropdowns）v5.0.0-alpha2新設、v5.2.0設定変更 v5.3.0非推奨

見本

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

見本

設定例

【設定】

【変更履歴】

【変更履歴】

ドロップの方向（Directions）

RTL

中央揃え（Centered）v5.2.0新設

見本

設定例

【設定】

ドロップアップ（Dropup）

見本

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

【設定】

ドロップアップの中央揃え（Dropup centered）v5.2.0新設

見本

設定例

【設定】

ドロップエンド（Dropend）v5.0.0-beta1クラス名変更、v5.2.0「ドロップライト」から変更

見本

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

【設定】

【変更履歴】

ドロップスタート（Dropstart）v5.0.0-beta1クラス名変更、v5.2.0「ドロップレフト」から変更と一部設定変更

見本

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

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

【設定】

【変更履歴】

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

<button> によるドロップメニュー v5.2.0設定変更

見本

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

【設定】

【変更履歴】

非対話型のドロップダウン

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

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

アクティブ化（Active）v5.0.0-alpha1設定変更

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

見本メニューのみを表示

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

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

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

Bootstrap5.2.0～の設定例緑背景が変更箇所

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

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

Bootstrap5.2.0～の設定例緑背景が変更箇所

※Bootstrap4.6.xの設定例赤背景が変更箇所

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

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

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

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

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

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

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

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

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

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

`<button>` によるドロップメニュー v5.2.0設定変更

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

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

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

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

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

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

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

Bootstrap5.1.1～の設定例緑背景はv5.0.0-alpha1での変更箇所

※Bootstrap5.1.0の設定例赤背景が変更箇所

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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