Bootstrap 5を使用したドロップダウンの実装方法

まず最初に、Bootstrap 5のCDNリンクをHTMLファイルのセクションに追加します。次に、ドロップダウンメニューを実装したい場所に、以下のようなHTMLコードを追加します:

<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>
    <li><a class="dropdown-item" href="#">オプション2</a></li>
    <li><a class="dropdown-item" href="#">オプション3</a></li>
  </ul>
</div>

上記のコードでは、<div class="dropdown">要素でドロップダウンメニューを囲み、<button>要素がドロップダウンのトリガーとなるボタンです。<ul class="dropdown-menu">要素内にはドロップダウンメニューのオプションが含まれています。

<script>
  var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
  var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
    return new bootstrap.Dropdown(dropdownToggleEl)
  })
</script>

このコードは、ドロップダウンメニューを動作させるために必要なJavaScriptの初期化を行います。

以上で、Bootstrap 5を使用したドロップダウンメニューの実装が完了です。この方法を使えば、簡単にドロップダウンメニューを作成することができます。

この記事では、基本的なドロップダウンメニューの実装方法を紹介しましたが、さらに高度なオプションやカスタマイズ方法もあります。公式のBootstrapドキュメントやデモページを参照することで、さまざまなドロップダウンメニューのスタイルや動作を学ぶことができます。