Bootstrap 5でのドロップダウンメニューの実装方法

まず、BootstrapのCSSとJavaScriptライブラリをHTMLファイルに追加する必要があります。以下のコードをタグ内に挿入しましょう。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

次に、ドロップダウンメニューを作成するためのHTMLコードを追加します。以下の例では、ドロップダウンメニューのトリガーボタンとドロップダウンメニューの項目を定義しています。

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

このコードでは、<div>要素にdropdownクラスを指定し、トリガーボタンにはbtnとbtn-secondaryクラスを指定しています。また、ドロップダウンメニューの項目は<ul>要素の中にdropdown-menuクラスを指定しています。

以上で、基本的なBootstrap 5のドロップダウンメニューが作成されます。トリガーボタンをクリックすると、ドロップダウンメニューが表示され、項目を選択することができます。

さらに、より高度なカスタマイズも可能です。例えば、ドロップダウンメニューの位置やスタイルを変更したり、ドロップダウンメニュー内にフォームや画像を追加したりすることができます。Bootstrapの公式ドキュメントには、これらの詳細なカスタマイズ方法が記載されていますので、ぜひ参考にしてください。

以上が、Bootstrap 5を使用したドロップダウンメニューの実装方法の解説です。ご参考になれば幸いです。