GitHubで表示

ドロップダウン

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

概要

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

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

ソースからJavaScriptをビルドする場合、util.jsが必要です。

アクセシビリティ

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

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

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

サンプル

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

単一ボタン

単一の.btnは、いくつかのマークアップ変更によりドロップダウントグルに変えることができます。次に、<button>要素でそれらを機能させる方法を示します。

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

そして、<a>要素で

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

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

分割ボタン

同様に、単一ボタンのドロップダウンとほぼ同じマークアップで、分割ボタンドロップダウンを作成しますが、ドロップダウンキャレットの周りの適切な間隔のために.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>
  <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>

サイズ

ボタンドロップダウンは、デフォルトおよび分割ドロップダウンボタンを含む、すべてのサイズのボタンで機能します。

<!-- 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>
  <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-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-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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

方向

ドロップアップ

親要素に.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>
  <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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ドロップライト

親要素に.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>
  <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-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ドロップレフト

親要素に.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>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft">
    <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>
    <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" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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を追加して、アクティブとしてスタイル設定します。

<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を追加して、無効としてスタイル設定します。

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

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

ご注意ください！ドロップダウンは、Popperのおかげで配置されます（ナビバーに含まれている場合を除く）。

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>

レスポンシブな配置

レスポンシブな配置を使用する場合は、data-display="static"属性を追加して動的なポジショニングを無効にし、レスポンシブバリエーションクラスを使用します。

指定されたブレークポイント以上でドロップダウンメニューを右に揃えるには、.dropdown-menu{-sm|-md|-lg|-xl}-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>
  <div class="dropdown-menu dropdown-menu-lg-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>

指定されたブレークポイント以上でドロップダウンメニューを左に揃えるには、.dropdown-menu-rightと.dropdown-menu{-sm|-md|-lg|-xl}-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>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

Popperはナビバーでは使用されないため、ナビバーのドロップダウンボタンにdata-display="static"属性を追加する必要がないことに注意してください。

ヘッダー

ドロップダウンメニューのアクションのセクションをラベル付けするためのヘッダーを追加します。

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

区切り線

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

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

フォーム

ドロップダウンメニュー内にフォームを配置するか、ドロップダウンメニューにして、マージンまたはパディングユーティリティを使用して、必要なネガティブスペースを提供します。

<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-group">
      <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="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-group">
    <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" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

使い方

data属性またはJavaScriptを介して、ドロップダウンプラグインは、親.dropdown-menuの.showクラスを切り替えることにより、非表示のコンテンツ（ドロップダウンメニュー）を切り替えます。data-toggle="dropdown"属性は、アプリケーションレベルでドロップダウンメニューを閉じるために使用されるため、常に使用することをお勧めします。

タッチ対応デバイスでは、ドロップダウンを開くと、<body>要素の直下の子に空の（$.noop）mouseoverハンドラーが追加されます。この、確かに見栄えの悪いハックは、iOSのイベント委任の癖を回避するために必要であり、そうでなければ、ドロップダウンの外側のどこかをタップするとドロップダウンを閉じるコードのトリガーが防止されます。ドロップダウンが閉じられると、これらの追加の空のmouseoverハンドラーが削除されます。

data属性による

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

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

JavaScriptによる

JavaScriptを介してドロップダウンを呼び出す

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

`data-toggle="dropdown"`はまだ必要です

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

オプション

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

名前	タイプ	デフォルト	説明
オフセット	数値 \| 文字列 \| 関数	0	ドロップダウンのターゲットに対する相対オフセット。オフセットを決定するために関数が使用される場合、オフセットデータを含むオブジェクトが最初の引数として渡されて呼び出されます。関数は、同じ構造のオブジェクトを返す必要があります。トリガー要素のDOMノードが2番目の引数として渡されます。詳細については、Popperのオフセットに関するドキュメントを参照してください。
反転	ブール値	true	参照要素で重なる場合に、ドロップダウンを反転させることができます。詳細については、Popperの反転に関するドキュメントを参照してください。
境界	文字列 \| 要素	'scrollParent'	ドロップダウンメニューのオーバーフロー制約境界。`'viewport'`、`'window'`、`'scrollParent'`の値、またはHTMLElement参照（JavaScriptのみ）を受け入れます。詳細については、PopperのpreventOverflowドキュメントを参照してください。
参照	文字列 \| 要素	'toggle'	ドロップダウンメニューの参照要素。`'toggle'`、`'parent'`、または HTMLElement 参照の値を受け入れます。詳細については、Popper のreferenceObject ドキュメントを参照してください。
display	string	'dynamic'	デフォルトでは、動的な位置決めに Popper を使用します。`static` でこれを無効にします。
popperConfig	null \| object	null	Bootstrap のデフォルトの Popper 設定を変更するには、Popper の設定を参照してください。

boundary が 'scrollParent' 以外の値に設定されている場合、.dropdown コンテナにスタイル position: static が適用されることに注意してください。

メソッド

メソッド	説明
`$().dropdown('toggle')`	指定されたナビゲーションバーまたはタブ付きナビゲーションのドロップダウンメニューを切り替えます。
`$().dropdown('show')`	指定されたナビゲーションバーまたはタブ付きナビゲーションのドロップダウンメニューを表示します。
`$().dropdown('hide')`	指定されたナビゲーションバーまたはタブ付きナビゲーションのドロップダウンメニューを非表示にします。
`$().dropdown('update')`	要素のドロップダウンの位置を更新します。
`$().dropdown('dispose')`	要素のドロップダウンを破棄します。

イベント

すべてのドロップダウンイベントは、.dropdown-menu の親要素で発生し、値が切り替えアンカー要素である relatedTarget プロパティを持ちます。hide.bs.dropdown および hidden.bs.dropdown イベントは、クリックイベントの Event オブジェクトを含む clickEvent プロパティを持ちます（元のイベントタイプが click の場合のみ）。

イベント	説明
`show.bs.dropdown`	このイベントは、show インスタンスメソッドが呼び出されるとすぐに発生します。
`shown.bs.dropdown`	このイベントは、ドロップダウンがユーザーに表示されたときに発生します（CSS トランジションが完了するのを待ちます）。
`hide.bs.dropdown`	このイベントは、hide インスタンスメソッドが呼び出されるとすぐに発生します。
`hidden.bs.dropdown`	このイベントは、ドロップダウンがユーザーから非表示になる処理が完了したときに発生します（CSS トランジションが完了するのを待ちます）。

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

ドロップダウン

概要

アクセシビリティ

サンプル

単一ボタン

分割ボタン

サイズ

方向

ドロップアップ

ドロップライト

ドロップレフト

メニュー項目

アクティブ

無効

メニューの配置

レスポンシブな配置

メニューコンテンツ

ヘッダー

区切り線

テキスト

フォーム

使い方

data属性による

JavaScriptによる

`data-toggle="dropdown"`はまだ必要です

オプション

メソッド

イベント

ドロップダウン

概要

アクセシビリティ

サンプル

単一ボタン

分割ボタン

サイズ

方向

ドロップアップ

ドロップライト

ドロップレフト

メニュー項目

アクティブ

無効

メニューの配置

レスポンシブな配置

メニューコンテンツ

ヘッダー

ドロップダウンヘッダー

区切り線

テキスト

フォーム