Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Dropdowns (ドロップダウン)

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

目次

Overview

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

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

Accessibility

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

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

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

Examples

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

Single button

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

<a>の要素の場合

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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-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>

Split button

同様に、単一ボタンのドロップダウンと実質的に同じマークアップで分割ボタンのドロップダウンを作成しますが、.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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">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>

Sizing

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

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

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

Directions

Dropup

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

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropright

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

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

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropleft

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

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

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

歴史的にドロップダウンメニューの内容はリンクでなければなりませんでしたが、v4ではそうではなくなりました。ドロップダウンでは、<a> の代わりに <button> 要素を使用することができるようになりました。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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やテキストユーティリティを使用して、さらに自由にスタイルを設定してください。

<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

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

<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

ドロップダウンの項目に.disabledを追加して、無効化のスタイルにできます。

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

デフォルトでは、ドロップダウンメニューは自動的に上から100%の位置と親の左側に沿って配置されます。ドロップダウンメニューを右寄せにするには、.dropdown-menu-right.dropdown-menu に追加します。

Heads up! ドロップダウンはPopper.jsによって配置されています(ナビバーに含まれている場合を除く)。
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <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>

Responsive alignment

レスポンシブアライメントを使用したい場合は、data-display="static"属性を追加して動的な位置合わせを無効にし、レスポンシブバリエーションクラスを使用します。 ドロップダウンメニューをに配置するには、.dropdown-menu{sm|md|-lg|-xl|-xxl}-rightを追加します。

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-right">
    <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 を追加します。

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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-display="static" 属性を追加する必要はありません。

Headers

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

<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>

Dividers

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

<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>

Text

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

<div class="dropdown-menu p-4 text-muted" 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>

Forms

ドロップダウンメニューの中にフォームを入れたり、ドロップダウンメニューにして、margin or padding utilitiesを使って、必要なネガティブスペースを与えます。

<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>
<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>

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

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>

Usage

データ属性やJavaScriptを介して、dropdownプラグインは、親リスト項目の.show クラスをトグルすることで、隠しコンテンツ(ドロップダウンメニュー)をトグルします。data-toggle="dropdown"属性はアプリケーションレベルでドロップダウンメニューを閉じることができます。

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

Via data attributes

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

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

Via JavaScript

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

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

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

Options

オプションは、データ属性かJavaScriptで渡すことができます。データ属性の場合は、data-にオプション名を追加します。

Name Type Default Description
offset number | string | function 0

ターゲットに対するドロップダウンのオフセットです。

オフセットを決定するために関数を使用する場合、オフセットデータを含むオブジェクトを第一引数として呼び出します。この関数は、同じ構造のオブジェクトを返さなければなりません。2番目の引数には、トリガとなる要素 DOM ノードが渡されます。

詳細は Popper.js's offset docsを参考にしてください。

flip boolean true 参照要素に重なった場合に、Dropdownが反転するようにします。詳細は Popper.js's flip docs参考にしてください。
boundary string | element 'scrollParent' ドロップダウンメニューがオーバーフローした際に許容する境界を指定します。Accepts the values of 'viewport', 'window', 'scrollParent', または HTML要素のリファレンス(JavaScriptのみ)を指定できます。 詳細は Popper.js's preventOverflow docsを参考にしてください。
reference string | element 'toggle' ドロップダウンメニューのリファレンス要素です。'toggle', 'parent'または HTML要素のリファレンスを指定できます。 詳細は Popper.js's referenceObject docsを参考にしてください。
display string 'dynamic' デフォルトでは、動的な位置合わせにPopper.jsを使用しています。これを無効にするには、staticを指定して下さい。
popperConfig null | object null BootstrapのデフォルトのPopper.jsの設定を変更するには Popper.js's configurationを参考にしてください。

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

Methods

Method Description
toggle 指定したナビバーまたはタブ付きナビゲーションのドロップダウンメニューをトグルします。
show 指定されたナビバーまたはタブ付きナビゲーションのドロップダウンメニューを表示します。
hide 指定されたナビバーまたはタブ付きナビゲーションのドロップダウンメニューを非表示にします。
update 要素のドロップダウンの位置を更新します。
dispose ドロップダウン要素を破棄します。
getInstance OM 要素に関連付けられたドロップダウンのインスタンスを取得する静的メソッドです。

Events

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

Method Description
show.bs.dropdown このイベントは show インスタンスメソッドが呼ばれてすぐに発生します
shown.bs.dropdown このイベントはドロップダウンメニューが表示された時に発生します(CSS による遷移を待機します)。
hide.bs.dropdown このイベントは hide インスタンスメソッドが呼ばれてすぐに発生します。
hidden.bs.dropdown このイベントはドロップダウンメニューが非表示になった時に発生します(CSSによる遷移を待機します)。
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})