ドロップダウン

Overview

ドロップダウンは、リンクなどのリストを表示するための切替可能なコンテキストのオーバレイです。それらは、付属のBootstrapドロップダウンのJavaScriptプラグインで対話的で作成されます。ホバリングではなく、クリックすることで切り換えます;これは意図的な設計上の決定です。

ドロップダウンは、サードパーティ製のライブラリ、動的な位置決めとビューポートの検出を提供するPopper.jsでビルドされます。必ず、BootstrapのJavaScriptの前に、popper.min.jsを含めるか、Popper.jsが含まれるbootstrap.bundle.min.js / bootstrap.bundle.jsを使用して下さい。Popper.jsは、ナビゲーション・バーが動的な位置決めを必要としないため、ドロップダウンを配置するためには、使用しません。

あなたが、ソースから、私たちのJavaScriptをビルドしている場合、util.jsを必要とします。

Accessibility

WAI Aria標準は、実際のrole="menu"ウィジェットを定義します。しかし、これは、動作や関数を起動するアプリケーションのようなメニューに固有のものです。Ariaメニューは、メニュー項目、チェックボックスのメニュー項目、ラジオボタンのメニュー項目、ラジオボタン・グループとサブメニューだけを含めることができます。

一方、Bootstrapのドロップダウンは、一般的で、いろいろな状況とマークアップ構造に適用されるように設計されています。例えば、検索フィールドやログイン・フォ－ムのような、追加の入力と書式制御が含まれているドロップダウンを作成できます。この理由のため、Bootstrapは、本当のAriaメニューのために必要なaria-属性に、どんな役割も何も期待しません（あるいは、自動的に、追加しません）。製作者は、これらのより具体的な属性自体を含める必要があります。

しかしながら、Bootstrapには、カーソル・キーを使用して、それぞれの.dropdown-item要素を移動する能力のような、ほとんどの標準的なキーボードメニューの対話処理のための組み込みのサポートが追加されています。そして、[Esc] キーでメニューを閉じます。

Examples

.dropdownの中に、ドロップダウンのトグルスイッチ（あなたのボタンやリンク）とドロップダウン・メニューをラップします。 あるいは、他の要素は、position: relative;を宣言します。ドロップダウンは、あなたの潜在的な必要性をよりよく収まるために、<a>または<button>要素から起動されることができます。

1つのボタンのドロップダウン

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

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

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

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

分離したボタンのドロップダウン

<!-- 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Dropup variation

.dropupを親要素に加えることによって、要素の上にあるドロップダウン・メニューを起動します。

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

Dropright variation

.droprightを親要素に加えることによって、要素の右で、ドロップダウン・メニューを起動します。

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

Dropleft variation

.dropleftを親要素に加えることによって、要素の左で、ドロップダウン・メニューを起動します。

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

Menu items

歴史的に、ドロップダウン・メニュー・コンテンツは、リンクである必要がありましたが、もはや、v4では、そうではありません。現在、あなたは、まさに、<a>の代わりに、ドロップダウンで<button>要素を使用することができます。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Menu alignment

既定では、ドロップダウン・メニューは、その親の左側から100％の位置に自動的に配置されます。右揃えでドロップダウン・メニューを整列させるために、.dropdown-menuに.dropdown-menu-rightを追加します。

注意喚起！

ドロップダウンは、Popper.jsのおかげで配置されます。（ナビゲーション・バーに含まれている場合を除く）。

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Menu headers

どんなドロップダウン・メニューでも、動作のラベル・セクションに、ヘッダを追加します。

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

Menu dividers

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

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

Menu forms

ドロップダウン・メニューの中に、フォ－ムを配置します。あるいは、ドロップダウン・メニューに、それを作成します。そして、あなたが、それに必要とする負の空間を与えるために、マージンやパディング・ユーティリティを使用します。

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Active menu items

アクティブとして、それらのスタイルを整えるために、ドロップダウンの項目に、.activeを追加します。

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Disabled menu items

ドロップダウンの項目に.disabledを追加して、無効にします。

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

Usage

データ属性やJavaScriptを通して、ドロップダウン・プラグインは、親リスト項目で.showクラスを切り換えることで、隠れたコンテンツ（ドロップダウン・メニュー）を切り換えます。data-toggle="dropdown" 属性は、アプリケーション・レベルで、ドロップダウン・メニューを閉じるために、依存しています。それで、常に、それを使用することをお勧めします。

タッチ対応デバイスで、ドロップダウンを開くと、要素の直下の子供たちに、空の（$.noop）マウスオーバー・ハンドラを追加します。この明らかに醜いハックは、iOSのイベント・デリゲートの気まぐれを回避するために必要です。それは、それ以外の場合、ドロップダウンの外側のどこでもドロップダウンを閉じるコードを起動するタップを防ぎます。一旦、ドロップダウンが閉じると、これらの追加の空のマウスオーバー・ハンドラは、削除されます。

データ属性を通して

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

JavaScriptを通して

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

オプション

メソッド

イベント

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})