ドロップダウン

Dropdowns

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

項目

概要

ドロップダウンは、トグル可能で、リンクのリストなどを表示するためのコンテキストオーバーレイです。これらは、含まれているBootstrapのドロップダウンJavaScriptプラグインでインタラクティブになります。これらは、ホバリングではなく、クリックで切り替えられます。参考 an intentional design decision.

ドロップダウンはサードパーティのライブラリであるPopper.jsを使って構築されており、動的なポジショニングとビューポート検出を提供しています。必ずBootstrapのJavaScriptの前にpopper.min.jsをインクルードするか、Popper.jsを含むbootstrap.bundle.min.js / bootstrap.bundle.jsを使用してください。Popper.jsは動的な配置は必要ないので、ナビゲーションバーのドロップダウンの配置には使いませんが。

アクセシビリティ

WAI ARIAでは実際のrole="menu"widgetが定義されていますが、これはアクションや機能をトリガーとするアプリケーションライクなメニューに特化したものです。 ARIAメニューは、メニュー項目、チェックボックスメニュー項目、ラジオボタンメニュー項目、ラジオボタングループ、サブメニューのみを含むことができます。

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

しかし、カーソルキーを使って個々の.dropdown-item要素を移動したり、ESCキーでメニューを閉じたりする機能など、ほとんどの標準的なキーボードメニューのインタラクションのための組み込みサポートを追加しています。

例

ドロップダウンのトグル（ボタンやリンク）とドロップダウンメニューを.dropdownやposition: relative;を宣言する別の要素で囲みます。ドロップダウンは<a>や<button>要素からトリガーすることができます。ここで示した例では、必要に応じて<ul>要素を使用していますが、カスタムマークアップもサポートしています。

シングルボタン

マークアップを変更するだけで、任意の単一の.btnをドロップダウントグルに変えることができます。ここでは、<button>要素のいずれかで動作するようにする方法を説明します。

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

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

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

一番いいのは、どんなボタンのバリエーションでもこれができることです。:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

スプリットボタン

同様に、単一ボタンのドロップダウンと実質的に同じマークアップで分割ボタンのドロップダウンを作成しますが、.dropdown-toggle-splitを追加して、ドロップダウンのキャレットの周りの適切な間隔を確保します。

この追加クラスを使って、キャレットの両側の水平方向のpaddingを 25% 削減し、通常のボタンのドロップダウンに追加される`margin-leftを削除します。これらの追加の変更により、キャレットはスプリットボタンの中央に配置され、メインボタンの横のヒットエリアのサイズがより適切になります。

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

サイズ調整

ボタンのドロップダウンは、デフォルトのドロップダウンボタンや分割されたドロップダウンボタンなど、あらゆるサイズのボタンで動作します。

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </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">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </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">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ダークドロップダウン

Deprecated in v5.3.0

既存の.dropdown-menuに.dropdown-menu-darkを追加することで、暗いナビゲーションバーやカスタムスタイルにマッチする暗いドロップダウンを選択できます。ドロップダウン項目に変更は必要ありません。

気をつけてください! v5.3.0でカラーモードが導入されたことに伴い、コンポーネントのダークバリアントは非推奨となりました。.dropdown-menu-darkを追加する代わりに、ルート要素、親ラッパー、またはコンポーネント自体にdata-bs-theme="dark"を設定してください。

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

ダークドロップダウンをナビゲーションバーに使う：

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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">
            Dropdown
          </button>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

方向

RTLモードでは方向が反転する。　そのため、.dropstartは右側に表示されます。

中央揃え

親要素に.dropdown-centerを追加することで、ドロップダウンメニューをトグルの下の中央に配置することができます。

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

上向き

親要素に.dropupを追加することで、上向きに表示できます。

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

中央揃えの上向き

親要素に.dropup-centerを指定して、ドロップアップメニューをトグルの中央に配置します。

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

右向き

親要素に.dropendを追加することで、右向きに表示できます。

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

左向き

親要素に.dropstartを追加することで、左向きにできます。

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<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">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

メニューアイテム

ドロップダウン項目として、<a>要素または<button>要素を使用することができます。

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

You can also create non-interactive dropdown items with .dropdown-item-text. Feel free to style further with custom CSS or text utilities.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

アクティブ

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

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

無効化

.disabledをドロップダウンのアイテムに追加して無効化します。

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

メニューの配置

デフォルトでは、ドロップダウンメニューは自動的に上から100%、親の左側に沿って配置されます。これを変更するには方向指定クラスの.drop*を使用しますが、さらに修飾クラスを追加してコントロールすることもできます。

.dropdown-menuに.dropdown-menu-endを追加すると、ドロップダウンメニューが右寄せになります。BootstrapをRTLで使用する場合、方向はミラーされます。つまり、.dropdown-menu-endは左側に表示されます。

気をつけてください! ドロップダウンはPopper.jsによって配置されています（ナビゲーションバーに含まれている場合を除く）。

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

レスポンシブの配置

レスポンシブアライメントを使用したい場合は、data-bs-display="static"属性を追加して動的な位置合わせを無効にし、レスポンシブバリエーションクラスを使用します。

ドロップダウンメニューを右に配置するには、.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-endを追加します。

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

左のドロップダウンメニューを指定されたブレークポイント以上の大きさに揃えるには、.dropdown-menu-rightと.dropdown-menu{sm|md|-lg|-xl|-xxl}-leftを追加します。

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

なお、Popper.jsはナビゲーションバーでは使わないので、ナビゲーションバーのドロップダウンボタンにdata-bs-display="static"属性を追加する必要はありません。

配置オプション

上記のオプションのほとんどを利用して、様々なドロップダウンの配置オプションを一箇所に集めたデモを紹介します。

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </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">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </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">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

メニューコンテンツ

ヘッダー

任意のドロップダウンメニューのアクションのセクションのラベルにヘッダーを追加します。

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

仕切り

関連するメニュー項目のグループを仕切りで区切ることができます。

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

テキスト

フリーフォームのテキストをドロップダウンメニュー内にテキストで配置し余白ユーティリティを使用します。メニューの幅を制限するために、追加のサイジングスタイルが必要になる可能性がもあります。

html

<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

フォーム

ドロップダウンメニューの中にフォームを入れたり、ドロップダウンメニューにして、マージンとパディングのユーティリティを使って、必要なネガティブスペースを与えます。

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </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">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</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">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

ドロップダウンオプション

ドロップダウンの位置を変更するには、data-bs-offsetまたはdata-bs-referenceを使用します。

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</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">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

自動で閉じる

デフォルトでは、ドロップダウンメニューの内側または外側をクリックすると、ドロップダウンメニューが閉じます。autoCloseを使って、このドロップダウンの動作を変更することができます。

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

変数

Added in v5.2.0

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

scss/_dropdown.scss

--#{$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変数によるカスタマイズは.dropdown-menu-darkクラスで確認でき、重複したCSSセレクタを追加することなく特定の値を上書きすることができます。

scss/_dropdown.scss

--#{$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変数

全てのドロップダウンのための変数:

scss/_variables.scss

$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:            var(--#{$prefix}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:      var(--#{$prefix}tertiary-color);

$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; // Deprecated in v5.2.0
// fusv-enable

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

scss/_variables.scss

$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-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Sass mixins

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

scss/mixins/_caret.scss

@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;
    }
  }
}

使い方

ドロップダウンプラグインは、データ属性またはJavaScriptを介して、親である.dropdown-menuの.showクラスをトグルすることで、非表示のコンテンツ（ドロップダウン・メニュー）を表示します。data-bs-toggle="dropdown"属性は、アプリケーションレベルでドロップダウンメニューを閉じる際に頼りになるので、常に使用しておくとよいでしょう。

タッチ対応デバイスでは、ドロップダウンを開くと、空のmouseoverハンドラが<body>要素の直後の子要素に追加されます。このハックはquirk in iOS’ event delegationを回避するために必要なもので、そうしないとドロップダウンの外側の任意の場所をタップしても、ドロップダウンを閉じるコードをトリガーすることができません。ドロップダウンが閉じられると、これらの追加の空のmouseoverハンドラは削除されます。

データ属性

リンクやボタンにdata-bs-toggle="dropdown"を追加して、ドロップダウンを切り替えるようにします。

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Via JavaScript

JavaScriptでドロップダウンを呼び出すか, data-apiを使用するかに関わらず,data-bs-toggle="dropdown"は常にドロップダウンのトリガー要素に存在する必要があります。

JavaScriptでドロップダウンを呼び出す場合:

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

オプション

オプションはデータ属性やJavaScriptで渡すことができるので、data-bs-animation="{value}"のように、data-bs-にオプション名を付加することができる。データ属性でオプションを渡す場合は、オプション名の大文字と小文字を"camelCase“から”kebab-case“に変更することを忘れないようにしましょう。例えば、data-bs-customClass="beautifier"の代わりに data-bs-custom-class="beautifier"を使用します。

Bootstrap 5.2.0では、全てのコンポーネントが 実験的 予約データ属性 data-bs-config をサポートしており、JSON文字列として簡単なコンポーネント設定を収容することができます。要素に data-bs-config='{"delay":0, "title":123}'とdata-bs-title="456"属性がある場合、 titleの最終値は 456で、別々のデータ属性は data-bs-configで与えられた値を上書きする。また、既存のデータ属性にはdata-bs-delay='{"show":0, "hide":150}'のようなJSON値を格納することができるようになっています。

最終的なコンフィギュレーションオブジェクトは data-bs-config、data-bs-、js objectのマージ結果であり、最新のキー値が他の値を上書きする。

Name	Type	Default	Description
`autoClose`	boolean, string	`true`	ドロップダウンのオートクローズビヘイビアを設定します。: `true`をクリックすると、ドロップダウンメニューが閉じます。 `false`- ドロップダウンを閉じるには、トグルボタンをクリックし、手動で`hide`or`toggle`メソッドを使用します.(`esc` keyを押しても閉じられません。) `'inside'`- ドロップダウンメニューの内側をクリックした時のみ、ドロップダウンを閉じることができます。 `'outside'`- ドロップダウンメニューの外側をクリックした時のみ、ドロップダウンを閉じることができます。注：ドロップダウンは、`Esc`キーでいつでも閉じることができます。
`boundary`	string, element	`'clippingParents'`	ドロップダウンメニューのオーバーフロー制約境界（PopperのpreventOverflowモディファイアにのみ適用されます）です。デフォルトでは`clippingParents`で、HTML要素の参照を受け付けます（JavaScript経由のみ）。詳しくはPopperのdetectOverflow docsを参照して下さい。
`display`	string	`'dynamic'`	デフォルトでは、動的な位置合わせにPopper.jsを使用しています。これを無効にするには、`staticを指定して下さい。
`offset`	array, string, function	`[0, 2]`	ドロップダウンのオフセットを設定する際は`data-bs-offset="10,20"`のように、データ属性にカンマ区切りの文字列を渡すことができます。オフセットを決定するために関数を使用する場合、popper placement, the reference, and popper rects　を第1引数として呼び出します。トリガーとなる要素のDOMノードは、第2引数として渡されます。この関数は、2つの数値を含む配列を返す必要があります。:skidding,distance詳しくはPopper’s offset docs。
`popperConfig`	null, object, function	`null`	BootstrapのデフォルトのPopper.jsの設定を変更するにはPopper’s configurationを参考にしてください。Popper構成を作成するために関数を使用するとき、BootstrapのデフォルトのPopper構成を含むオブジェクトで呼び出されます。それは、あなたがデフォルトを使用して、あなた自身の構成と統合するのを助けます。関数は、Popperの構成オブジェクトを返さなければなりません。
`reference`	string, element, object	`'toggle'`	ドロップダウン・メニューの参照要素。`toggle'`,`parent'`, HTMLElement reference, または`getBoundingClientRect`を提供するオブジェクトの値を受け付けます。詳しくはPopperのconstructor docsとvirtual element docsを参照してください。

Using function with `popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Methods

Method	Description
`dispose`	ドロップダウン要素を破棄します。(Removes stored data on the DOM element)
`getInstance`	DOM要素に関連付けられたドロップダウンのインスタンスを取得することができる静的メソッドで、次のように使用することができます。:`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	DOM要素に関連付けられたドロップダウンのインスタンスを返すか、初期化されていない場合は新しいインスタンスを作成する静的メソッドです。次のように使うことができます。:`bootstrap.Dropdown.getOrCreateInstance(element)`
`hide`	指定されたナビゲーションバーまたはタブ付きナビゲーションのドロップダウンメニューを非表示にします。
`show`	指定されたナビゲーションバーまたはタブ付きナビゲーションのドロップダウンメニューを表示します。
`toggle`	指定したナビゲーションバーまたはタブ付きナビゲーションのドロップダウンメニューをトグルします。
`update`	要素のドロップダウンの位置を更新します。

イベント

ドロップダウンイベントは.dropdown-menuの親要素で発生し、relatedTargetプロパティを持ちます。hide.bs.dropdownとhidden.bs.dropdownイベントはclickEventプロパティを持ちます(元のイベントタイプがclickの場合のみ)。

Event type	Description
`hide.bs.dropdown`	このイベントは`hide`インスタンスメソッドが呼ばれてすぐに発生します。
`hidden.bs.dropdown`	ドロップダウンがユーザーから隠され終わり、CSSの遷移が完了したときに発生します。
`show.bs.dropdown`	`show`インスタンスメソッドが呼び出されると、直ちに発生する。
`shown.bs.dropdown`	ドロップダウンがユーザーに見えるようになり、CSSの遷移が完了したときに発生します。

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

ドロップダウン

Dropdowns

概要

アクセシビリティ

例

シングルボタン

スプリットボタン

サイズ調整

ダークドロップダウン

方向

中央揃え

上向き

中央揃えの上向き

右向き

左向き

メニューアイテム

アクティブ

無効化

メニューの配置

レスポンシブの配置

配置オプション

メニューコンテンツ

ヘッダー

Dropdown header

仕切り

テキスト

フォーム

ドロップダウンオプション

自動で閉じる

CSS

変数

Sass変数

Sass mixins

使い方

データ属性

Via JavaScript

オプション

Using function with popperConfig

Methods

イベント

Using function with `popperConfig`