ドロップダウン Dropdowns

Bootstrap dropdown プラグインを使用して、リンクなどのリストを表示するためのコンテキストオーバーレイを切り替えます。

On this page

概要

Dropdowns は、リンクなどのリストを表示するための切り替え可能なコンテキストオーバーレイです。これらは、含まれている Bootstrap dropdown JavaScript プラグインによってインタラクティブになります。ホバーではなくクリックによって切り替えられます。これは意図的な設計上の決定です。

Dropdowns は、動的な配置とビューポート検出を提供するサードパーティライブラリ Popper の上に構築されています。Bootstrap の JavaScript の前に popper.min.js を含めるか、Popper を含む bootstrap.bundle.min.js / bootstrap.bundle.js を使用してください。ただし、動的な配置が不要なため、Popper は navbar 内のドロップダウンの配置には使用されません。

アクセシビリティ

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

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

ただし、Bootstrap は、カーソルキーを使用して個々の .dropdown-item 要素を移動したり、Esc キーでメニューを閉じたりするなど、ほとんどの標準的なキーボードメニューの操作に対する組み込みサポートを追加します。

例

ドロップダウンのトグル(ボタンまたはリンク)とドロップダウンメニューを .dropdown 内、または position: relative; を宣言する別の要素内にラップします。理想的には、ドロップダウントリガーとして <button> 要素を使用する必要がありますが、プラグインは <a> 要素でも動作します。ここに示す例では、適切な場合にセマンティックな <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">
    Danger
  </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">Danger</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 を追加することで、ダークな navbar やカスタムスタイルに合わせてより暗いドロップダウンを選択できます。ドロップダウン項目に変更は必要ありません。

注意！ コンポーネントのダークバリアントは、カラーモードの導入により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>

そして、navbar で使用する場合:

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

親要素に .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 中央揃え

親要素に .dropup-center を使用して、トグルの上に dropup メニューを中央揃えにします。

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

親要素に .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

親要素に .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>

.dropdown-item-text を使用して、非インタラクティブなドロップダウン項目を作成することもできます。カスタム CSS またはテキストユーティリティを使用して、さらにスタイルを設定してください。

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" aria-disabled="true">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 は左側に表示されます。

注意! ドロップダウンは、navbar に含まれている場合を除き、Popper のおかげで配置されます。

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-end と .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start を追加します。

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 は navbar で使用されないため、navbar のドロップダウンボタンに data-bs-display="static" 属性を追加する必要はありません。

配置オプション

上記のほとんどのオプションを使用して、さまざまなドロップダウン配置オプションの小さなキッチンシンクデモを 1 か所にまとめました。

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>

フォーム

ドロップダウンメニュー内にフォームを配置するか、ドロップダウンメニューにして、margin または padding ユーティリティを使用して必要な余白を与えます。

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 変数によるカスタマイズは、重複する CSS セレクターを追加せずに特定の値をオーバーライドする .dropdown-menu-dark クラスで確認できます。

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 ミックスイン

ミックスインは、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" 属性は、アプリケーションレベルでドロップダウンメニューを閉じるために依存されているため、常に使用することをお勧めします。

タッチ対応デバイスでは、ドロップダウンを開くと、<body> 要素の直接の子に空の mouseover ハンドラーが追加されます。この確かに醜いハックは、iOS のイベント委任の癖を回避するために必要です。そうしないと、ドロップダウンの外側のどこかをタップしてもドロップダウンを閉じるコードがトリガーされません。ドロップダウンが閉じられると、これらの追加の空の 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>

JavaScript 経由

JavaScript 経由でドロップダウンを呼び出すか、data-api を使用するかに関係なく、ドロップダウンはトリガー要素に data-bs-toggle="dropdown" を持っている必要があります。

JavaScript 経由でドロップダウンを呼び出します。

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

オプション

オプションはdata属性またはJavaScriptを介して渡すことができます。data-bs-にオプション名を追加できます。例: data-bs-animation="{value}"。data属性を介してオプションを渡す場合は、オプション名の大文字小文字を"camelCase"から"kebab-case"に変更してください。例えば、data-bs-customClass="beautifier"の代わりにdata-bs-custom-class="beautifier"を使用します。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント設定を格納できる実験的な予約済みdata属性data-bs-configをサポートしています。要素にdata-bs-config='{"delay":0, "title":123}'とdata-bs-title="456"属性がある場合、最終的なtitle値は456になり、個別のdata属性はdata-bs-configで指定された値を上書きします。さらに、既存のdata属性は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`または`toggle`メソッドを手動で呼び出すことでドロップダウンが閉じられます。(`Esc`キーを押しても閉じられません) `'inside'` - ドロップダウンメニューの内側をクリックすることで(のみ)ドロップダウンが閉じられます。 `'outside'` - ドロップダウンメニューの外側をクリックすることで(のみ)ドロップダウンが閉じられます。注意: ドロップダウンは常に`Esc`キーで閉じることができます。
`boundary`	string, element	`'clippingParents'`	ドロップダウンメニューのオーバーフロー制約境界(PopperのpreventOverflow修飾子にのみ適用されます)。デフォルトは`clippingParents`で、HTMLElement参照を受け入れることができます(JavaScriptのみ)。詳細については、PopperのdetectOverflowドキュメントを参照してください。
`display`	string	`'dynamic'`	デフォルトでは、動的な配置にPopperを使用します。`static`でこれを無効にします。
`offset`	array, string, function	`[0, 2]`	ターゲットに対するドロップダウンのオフセット。データ属性で`data-bs-offset="10,20"`のようにカンマ区切りの値を持つ文字列を渡すことができます。関数を使用してオフセットを決定する場合、最初の引数としてpopperの配置、参照、およびpopperの矩形を含むオブジェクトで呼び出されます。トリガー要素のDOMノードが2番目の引数として渡されます。関数は2つの数値を含む配列を返す必要があります: skidding、distance。詳細については、Popperのoffsetドキュメントを参照してください。
`popperConfig`	null, object, function	`null`	BootstrapのデフォルトPopper設定を変更するには、Popperの設定を参照してください。関数を使用してPopper設定を作成する場合、BootstrapのデフォルトPopper設定を含むオブジェクトで呼び出されます。これにより、デフォルトを使用して独自の設定とマージすることができます。関数はPopperの設定オブジェクトを返す必要があります。
`reference`	string, element, object	`'toggle'`	ドロップダウンメニューの参照要素。`'toggle'`、`'parent'`の値、HTMLElement参照、または`getBoundingClientRect`を提供するオブジェクトを受け入れます。詳細については、Popperのconstructorドキュメントおよびvirtual elementドキュメントを参照してください。

Using function with `popperConfig`

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

メソッド

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

イベント

すべてのドロップダウンイベントは、トグル要素で発生し、バブルアップされます。そのため、.dropdown-menu の親要素にイベントリスナーを追加することもできます。hide.bs.dropdown および hidden.bs.dropdown イベントには、クリックイベントの Event オブジェクトを含む clickEvent プロパティ(元の Event タイプが 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

概要

アクセシビリティ

例

単一ボタン

分割ボタン

サイズ

ダークドロップダウン

方向

中央揃え

Dropup

Dropup 中央揃え

Dropend

Dropstart

メニュー項目

アクティブ

無効化

メニュー配置

レスポンシブ配置

配置オプション

メニューコンテンツ

ヘッダー

Dropdown header

区切り線

テキスト

フォーム

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

自動クローズ動作

CSS

変数

Sass 変数

Sass ミックスイン

使用方法

データ属性経由

JavaScript 経由

オプション

Using function with popperConfig

メソッド

イベント

Using function with `popperConfig`