Bootstrap5 ドロップダウンメニュー

この記事では、Bootstrap5 フレームワークのドロップダウンメニューコンポーネントについて説明します。基本的なドロップダウンメニュー、ドロップダウン区切り線、ドロップダウンメニューのタイトル、ドロップダウンメニュー項目のアクティブ状態、ドロップダウンメニューの無効化、ドロップダウンメニューの配置、ドロップダウンメニューボタングループ、ドロップダウンメニューのサイズ、ドロップダウンメニューの色、ドロップダウンメニューのテーマなどについて説明します。

1. 基本的なドロップダウンメニュー

基本的なドロップダウンメニューは、<div>タグと<a>タグを使用して作成します。

dropdownクラス: ドロップダウンコンテナとして機能します。
dropdown-toggleクラスとdata-bs-toggle="dropdown"属性: ドロップダウントグルとして機能し、クリックするとドロップダウンメニューを表示/非表示にします。
dropdown-menuクラス: ドロップダウンメニューを定義します。
dropdown-itemクラス: ドロップダウンメニュー内の項目を定義します。


<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップダウンメニュー
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>

2. ドロップダウン区切り線

ドロップダウンメニューの項目間に区切り線を追加するには、<hr>タグとdropdown-dividerクラスを使用します。


<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  <li><a class="dropdown-item" href="#">項目 1</a></li>
  <li><hr class="dropdown-divider" /></li>
  <li><a class="dropdown-item" href="#">項目 2</a></li>
</ul>

3. ドロップダウンメニューのタイトル

ドロップダウンメニューにタイトルを追加するには、<h6>タグとdropdown-headerクラスを使用します。


<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  <li><h6 class="dropdown-header">見出し</h6></li>
  <li><a class="dropdown-item" href="#">項目 1</a></li>
</ul>

4. ドロップダウンメニュー項目のアクティブ状態

ドロップダウンメニューの項目にアクティブ状態を設定するには、activeクラスを使用します。


<li><a class="dropdown-item active" href="#">アクティブな項目</a></li>

5. ドロップダウンメニューの無効化

ドロップダウンメニューを無効にするには、<a>タグにdisabled属性を追加します。ドロップダウンボタンを無効にするには、disabledクラスを使用します。


<a class="btn btn-secondary dropdown-toggle disabled" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
  無効なドロップダウン
</a>

6. ドロップダウンメニューの配置

ドロップダウンメニューの配置は、以下のクラスを使用して変更できます。

クラス	説明
`.dropdown-menu-start`	ドロップダウンメニューを左側に配置します。
`.dropdown-menu-end`	ドロップダウンメニューを右側に配置します。

7. ドロップダウンメニューボタングループ

ドロップダウンメニューをボタングループに配置するには、.btn-groupクラスと.dropdownクラスを使用します。


<div class="btn-group">
  <button type="button" class="btn btn-secondary">ボタン</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>
    </ul>
  </div>
</div>

8. ドロップダウンメニューのサイズ

ドロップダウンメニューのサイズは、以下のクラスを使用して変更できます。

クラス	説明
`.btn-group-lg`	大きなドロップダウンメニューを作成します。
`.btn-group-sm`	小さなドロップダウンメニューを作成します。

9. ドロップダウンメニューの色

ドロップダウンメニューの色は、Bootstrap5 が提供するボタンの色クラスを使用して設定できます。


<div class="dropdown">
  <button class="btn btn-primary 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>
  </ul>
</div>

10. ドロップダウンメニューのテーマ

ドロップダウンメニューのテーマは、.dropdown-menu-darkクラスを使用して変更できます。


<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 dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">項目 1</a></li>
  </ul>
</div>