切り替え可能な、リンク一覧を表示するためのメニューです。 ドロップダウンのJavaScriptプラグインを使用して処理を実装します。

• 例
• 右寄せ・左寄せ
• メニュー内の見出し
• メニュー内の仕切り
• メニュー項目の無効化

例

ドロップダウンのトリガーとメニューを.dropdownの要素、 または別のposition: relative;が宣言されている要素で囲みます。 次にメニューのHTMLを追加します。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

親要素に.dropupを追加することで、ドロップダウンメニューを上方向へ(下方向の代わりに)展開させることが可能です。

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

右寄せ・左寄せ

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

手動による位置調整が必要なケースがあります
ドロップダウンは、documentの標準フロー内でCSSを通して自動的に配置されます。 これは、ドロップダウンが特定のoverflowを持つ親要素によって見切れてしまったり、 ビューポートの境界の外に表示されてしまう可能性があることを意味します。 これらが起こす問題については、開発者自身が別途対処する必要があります。

非推奨の.pull-right
v3.1.0でドロップダウン上の.pull-rightは非推奨になりました。 メニューを右寄せするには、.dropdown-menu-rightを使用してください。 navbar内の右寄せされたナビゲーション(nav)コンポーネントは、自動的にメニューを寄せるために、このクラスのmixin版を使用します。 これを上書きするには、.dropdown-menu-leftを使用します。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

メニュー内の見出し

ドロップダウンメニュー内のラベルセクションに、見出しを追加します。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

メニュー内の仕切り

ドロップダウンメニュー内の一連のリンクを分離するための仕切りを追加します。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

メニュー項目の無効化

ドロップダウンの<li>に.disabledを追加することで、リンクを無効化します。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

 Back to top