Bootstrap ボタンのドロップダウン メニュー

Bootstrap ボタン ドロップダウンメニュー

この記事では、Bootstrap を使用してボタン ドロップダウンメニューを作成する方法について説明します。基本的なドロップダウンメニュー、上方向に展開するメニュー、メニューの配置、メニューヘッダー、セパレーター、メニュー項目の無効化とアクティブ化などについて説明します。

概述：ドロップダウンメニューの機能と実装

ドロップダウンメニューは、クリックで表示されるコンテキストメニューで、リンクやその他の内容をリスト形式で表示します。これにより、ユーザーが特定のアクションや選択肢に素早くアクセスできます。

Bootstrapでは、ドロップダウンメニューの実装にJavaScriptプラグインを使用しており、標準ではクリックでトリガーされます。Popper.js というライブラリに依存しており、これはメニューの位置決めやウィンドウ内での表示を調整するために使用されます。

アクセシビリティ：WAI-ARIAとの違い

WAI-ARIAの role="menu" は、スクリーンリーダーでの読み上げ時にメニューであることを示します。しかし、Bootstrapのドロップダウンメニューは、WAI-ARIAの厳密なメニュー機能に依存せず、一般的な用途に柔軟に対応するため設計されています。

Bootstrapのドロップダウンはキーボード操作をサポートしており、上下の矢印キーでメニューをナビゲートしたり、ESCキーでメニューを閉じることが可能です。

基本的な例：ドロップダウンメニューの作成

.dropdown クラスと data-bs-toggle="dropdown" 属性を使用して、ドロップダウンメニューを簡単に作成できます。トリガーは <button> または <a> タグを使用して指定します。<a> タグを使用する場合は、アクセシビリティのため role="button" 属性を追加するのが推奨されます。

コード例：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップダウン
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
    <li><a class="dropdown-item" href="#">アクション2</a></li>
    <li><a class="dropdown-item" href="#">アクション3</a></li>
  </ul>
</div>

 

4. 分割ボタンドロップダウンメニュー：ボタンとメニューの分離

.dropdown-toggle-split クラスを使用することで、ボタンとドロップダウンのトリガー部分を分離することができます。このクラスを使用すると、メニュー部分とアクションボタンを明確に分けられます。

コード例：

<div class="btn-group">
  <button type="button" class="btn btn-primary">アクション</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">ドロップダウンメニューを切り替え</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    <li><a class="dropdown-item" href="#">メニュー2</a></li>
  </ul>
</div>

サイズ調整：異なるボタンサイズへの適応

Bootstrapのドロップダウンメニューは、ボタンのサイズに応じて簡単に調整できます。.btn-lg や .btn-sm クラスを使用して、ドロップダウンボタンのサイズを変更できます。

コード例：

<div class="dropdown">
  <button class="btn btn-lg btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    大きなボタン
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
    <li><a class="dropdown-item" href="#">アクション2</a></li>
  </ul>
</div>

<div class="dropdown mt-3">
  <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    小さなボタン
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
    <li><a class="dropdown-item" href="#">アクション2</a></li>
  </ul>
</div>

 

ダークテーマのドロップダウンメニュー：ダークモード対応

Bootstrap v5.3.0から、.dropdown-menu-dark クラスを使用して、ダークテーマに合わせたドロップダウンメニューを作成できます。深色テーマには data-bs-theme="dark" を使用することも推奨されています。

コード例：

<div class="dropdown" data-bs-theme="dark">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    ダークテーマ
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
    <li><a class="dropdown-item" href="#">アクション2</a></li>
  </ul>
</div>

 

方向制御：レイアウトの柔軟な対応

Bootstrapでは、5つの方向制御クラスを使用してドロップダウンメニューの表示方向を制御できます。

  • .dropdown-center: 水平中央に表示
  • .dropup: 上に表示
  • .dropup-center: 水平中央で上に表示
  • .dropend: 右に表示
  • .dropstart: 左に表示

コード例：

<!-- dropup の例 -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    上にドロップダウン
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
  </ul>
</div>

 

メニュー項目：インタラクティブと非インタラクティブ

メニュー項目には <a> や <button> タグを使用してインタラクティブなリンクやボタンを作成できます。さらに、.dropdown-item-text クラスを使用すると、非インタラクティブなメニュー項目を作成可能です。

コード例：

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">非インタラクティブな項目</span></li>
  <li><a class="dropdown-item" href="#">アクション項目</a></li>
</ul>

 

状態制御：アクティブと無効

.active クラスを使用して、現在選択されている（アクティブな）メニュー項目を表示できます。また、.disabled クラスを使ってメニュー項目を無効化し、選択できない状態にすることが可能です。

コード例：

<ul class="dropdown-menu">
  <li><a class="dropdown-item active" aria-current="true" href="#">アクティブな項目</a></li>
  <li><a class="dropdown-item disabled" href="#">無効な項目</a></li>
</ul>

 

メニューの位置制御：柔軟な配置

ドロップダウンメニューは、デフォルトではトリガーボタンの下に配置されますが、.dropdown-menu-end クラスを使用して右寄せの配置が可能です。また、data-bs-display="static" を使用すると、クリックでなくとも表示されるメニューを作成できます。

メニュー内容：多様な要素

  • タイトル: .dropdown-header を使用してメニューにタイトルを追加できます。
  • 区切り線: .dropdown-divider を使用して項目間に区切り線を挿入可能です。
  • テキスト: 自由なテキストやフォームも追加できます。

コード例：

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">メニューのタイトル</h6></li>
  <li><a class="dropdown-item" href="#">アクション1</a></li>
  <li><div class="dropdown-divider"></div></li>
  <li><a class="dropdown-item" href="#">アクション2</a></li>
</ul>

 

ドロップダウンメニューオプション：動作の詳細設定

data-bs-offset や data-bs-reference を使用して、メニューの位置や基準点を細かく調整できます。また、data-bs-auto-close で自動クローズの動作もカスタマイズ可能です。

CSS変数：リアルタイムでメニューのスタイルをカスタマイズ

--bs-dropdown-zindex や --bs-dropdown-min-width などのCSS変数を使って、ドロップダウンメニューのスタイルをリアルタイムで調整できます。

Sass変数、Mixin、使い方：ドロップダウンメニューの深いカスタマイズ

BootstrapのSass変数とMixinを使用して、メニューのスタイルや動作を柔軟にカスタマイズ可能です。例えば、$dropdown-min-width や $dropdown-padding-x などの変数を利用して、メニューの幅やパディングを調整できます。また、caret-down などのMixinを使ってメニューの矢印もカスタマイズできます。

ボタン ドロップダウンメニュー

ボタン ドロップダウンメニューを作成するには、.dropdown クラスを使用します。ボタンは <button> 要素で作成し、.dropdown-toggle クラスと data-toggle="dropdown" 属性を追加します。ドロップダウンメニューのリストは <ul> 要素と .dropdown-menu クラスを使用して作成します。メニュー項目は <li> 要素と <a> 要素を使用して作成します。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウン
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
    <li><a class="dropdown-item" href="#">アクション2</a></li>
    <li><a class="dropdown-item" href="#">アクション3</a></li>
  </ul>
</div>

上方向に展開するメニュー

.dropdown クラスの代わりに .dropup クラスを使用すると、上方向に展開するメニューを作成できます。

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップアップ
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
    <li><a class="dropdown-item" href="#">アクション2</a></li>
    <li><a class="dropdown-item" href="#">アクション3</a></li>
  </ul>
</div>

メニューの配置

.dropdown-menu-right クラスを使用すると、ドロップダウンメニューを右側に配置できます。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRightButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    右側に配置
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuRightButton">
    <li><a class="dropdown-item" href="#">アクション1</a></li>
    <li><a class="dropdown-item" href="#">アクション2</a></li>
    <li><a class="dropdown-item" href="#">アクション3</a></li>
  </ul>
</div>

メニューヘッダー

<li> 要素に .dropdown-header クラスを追加すると、メニューヘッダーを作成できます。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <li class="dropdown-header">ヘッダー</li>
  <li><a class="dropdown-item" href="#">アクション1</a></li>
  <li><a class="dropdown-item" href="#">アクション2</a></li>
</ul>

セパレーター

<li> 要素に .divider クラスを追加すると、メニュー項目間にセパレーターを作成できます。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <li><a class="dropdown-item" href="#">アクション1</a></li>
  <li class="divider"></li>
  <li><a class="dropdown-item" href="#">アクション2</a></li>
</ul>

メニュー項目の無効化とアクティブ化

.disabled クラスを使用すると、メニュー項目を無効にできます。.active クラスを使用すると、メニュー項目をアクティブにできます。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <li><a class="dropdown-item disabled" href="#">無効なアクション</a></li>
  <li><a class="dropdown-item active" href="#">アクティブなアクション</a></li>
  <li><a class="dropdown-item" href="#">アクション3</a></li>
</ul>

関連QA

  1. Q: ドロップダウンメニューの色を変更するにはどうすればよいですか？

    A: ボタンのクラスを変更することでドロップダウンメニューの色を変更できます。例えば、赤いドロップダウンメニューを作成するには、btn-secondary クラスの代わりに btn-danger クラスを使用します。

  2. Q: ドロップダウンメニューのサイズを変更するにはどうすればよいですか？

    A: btn-lg、btn-sm、btn-xs クラスを使用して、ボタンとドロップダウンメニューのサイズを変更できます。

  3. Q: ドロップダウンメニューをJavaScriptで開いたり閉じたりするにはどうすればよいですか？

    A: jQuery を使用して、dropdown('toggle') メソッドを使用してドロップダウンメニューを開いたり閉じたりできます。例えば、ID が myDropdown のドロップダウンメニューを開くには、次のコードを使用します。

    $('#myDropdown').dropdown('toggle');

この記事が、Bootstrap のボタン ドロップダウンメニューの実装に役立つことを願っています。詳細については、Bootstrap ドキュメントを参照してください。