Dropdowns

Dropdowns(ドロップダウン)はプラグインを使用して, リンクのリストなどを表示するコンテキストオーバーレイを切り替えます。ドロップダウンの使い方の例を示します。

Overview

ドロップダウンはトグルが可能で, リンクのリストなどを表示するためのコンテキストオーバーレイです。ドロップダウンJavaScriptプラグインとインタラクティブになっています。ホバリングではなく, クリックすることでトグルされます。 an intentional design decision.
ドロップダウンはサードパーティのライブラリ ( Popper.js ) に構築され, 動的な位置決めと viewport の検出が可能です。 bootstrap.min.js や bootstrap.js などのブートストラップのJavascriptの前に popper.min.js を組み込むか, 代わりにPopper.jsを内部に含む bootstrap.bundle.min.js や bootstrap.bundle.js を使用する。 Popper.jsは, 動的位置決めが必要ないので, ナビゲーションバーのドロップダウンの位置を決めるためには使用されません。

Accessibility

WAI ARIA 標準は実際の role="menu" widget を定義しますが,アクションや機能をトリガするアプリケーションのようなメニューに特有のものです。ARIA メニューには, チェックボックス, ラジオボタン, ラジオボタングループ, サブメニューしか含めることができません。

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

しかし, Bootstrapは, カーソルキーを使用して個々の .dropdown-item 要素を移動し, ESC キーを使用してメニューを閉じる機能など, ほとんどの標準的なキーボードメニューのやり取りの組み込みのサポートを追加します。

Examples

ドロップダウンのトグル（あなたのボタンまたはリンク）と .dropdown 内のドロップダウンメニュー, または ` position：relative; ` を宣言する別の要素を囲みます。ドロップダウンは, 潜在的なニーズに合わせて, <a> または <button> 要素からトリガーできます。

Single button

.btn はマークアップの変更によってドロップダウントグルに変換できます。<button>要素を使ってそれらを動作させる方法は次のとおりです：

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

<a> 要素の場合は

<div class="dropdown">
  <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>

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

Directions

Dropup

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

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

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

ドロップダウンメニューの内容はリンクになっていましたが, これは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>

.dropdown-item-text で非対話的なドロップダウン項目を作成することもできます。カスタムCSSやテキストユーティリティを使用してさらにスタイルを設定できます。

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

Active

ドロップダウン内の項目に .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

ドロップダウンリストの項目に .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>

デフォルトではドロップダウンメニューは親の左側から100％の位置に自動的に配置されます。 .dropdown-menu-right を .dropdown-menu に加えてドロップダウンメニューを右揃えにします。

注意！ Dropdown は Popper.js を利用しています（navbar の内部にある時を除く）

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

Headers

.dropdown-header を適用するとヘッダーを作成する事ができます。

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

Dividers

.dropdown-divider を適用すると関連する項目のグループ化ができます。

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

Text

テキストをドロップダウンメニューに配置しspacing utilities を使用します。メニュー幅をカスタマイズするには, sizing スタイルを追加する必要があります。

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

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-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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="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-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>
</div>

Usage

データ属性やJavaScript経由で,ドロップダウンプラグインは親リストアイテムの .show クラスをトグルすると, 非表示のコンテンツ（ドロップダウン・メニュー）をトグルします。 data-toggle =" dropdown "属性は, アプリケーションレベルでドロップダウンメニューを閉じるために使用されるので, 常に使用することをお勧めします。

タッチ対応デバイスではドロップダウンを開くと空の（ $ .noop） 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-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Via JavaScript

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

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

`data-toggle="dropdown"` still required

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

Options

オプションはデータ属性またはJavaScriptを使用して渡すことができます。データ属性の場合, オプション名を data- に data-offset =" " のように付加します。

Name	Type	Default	Description
offset	number \| string \| function	0	対象との相対的なオフセットを指定します。詳細は Popper.js の offset docs を参照してください。
flip	boolean	true	リファレンス要素と被ってしまう際にフリップすることを許可するかを設定します。詳細は Popper.js の flip docs を参照してください。
boundary	string \| element	'scrollParent'	ドロップダウンメニューがオーバーフローした際に許容する境界を指定します。`'viewport'`, `'window'`, `'scrollParent'`, または HTML要素のリファレンス（JavaScriptのみ）を指定できます。詳細は Popper.js の preventOverflow docs を参照してください。
reference	string \| element	'toggle'	ドロップダウンメニューのリファレンス要素です。`'toggle'`, `'parent'`, または HTML要素のリファレンスを指定できます。詳細は Popper.js の referenceObject docs を参照してください。
display	string	'dynamic'	デフォルトでは動的な配置に Popper.js を使用しています。これを無効化するには, `'static'` を指定してください。

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

Methods

Method	Description
`$().dropdown('toggle')`	指定された navbar 及びタブナビゲーションのドロップダウンメニューをトグルします。
`$().dropdown('update')`	その要素のドロップダウンメニューの位置を更新します。
`$().dropdown('dispose')`	その要素のドロップダウンメニューを削除します。

Events

ドロップダウンイベントは .dropdown-menu の親要素で起動され, relatedTarget プロパティを持ちます。その値はトグルアンカー要素です。 hide.bs.dropdown と hidden.bs.dropdown イベントにはクリックのイベントオブジェクトを含む clickEvent プロパティ（元のイベントタイプが　click のときのみ）があります。

Event	Description
`show.bs.dropdown`	このイベントは show インスタンスメソッドが呼ばれてすぐに発生します。
`shown.bs.dropdown`	このイベントはドロップダウンメニューが表示された時に発生します（CSS による遷移を待機します）。
`hide.bs.dropdown`	このイベントは hide インスタンスメソッドが呼ばれてすぐに発生します。
`hidden.bs.dropdown`	このイベントはドロップダウンメニューが非表示になった時に発生します（CSSによる遷移を待機します）。

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

v4.3

Dropdowns

Overview

Accessibility

Examples

Single button

Split button

Sizing

Directions

Dropup

Dropright

Dropleft

Menu items

Active

Disabled

Menu alignment

Menu content

Headers

Dividers

Text

Forms

Usage

Via data attributes

Via JavaScript

`data-toggle="dropdown"` still required

Options

Methods

Events

Dropdowns

Overview

Accessibility

Examples

Single button

Split button

Sizing

Directions

Dropup

Dropright

Dropleft

Menu items

Active

Disabled

Menu alignment

Menu content

Headers

Dropdown header

Dividers

Text

Forms

Dropdown options

Usage

Via data attributes

Via JavaScript

data-toggle="dropdown" still required

Options

Methods

Events

`data-toggle="dropdown"` still required