クリックした際にメニューが表示されるドロップダウンもBootstrapを使って表現する事ができます。
Bootstrap4のバージョン4.3をベースに書いています。
基本的な使い方
ドロップダウン
リスト１リスト２リスト３
サンプルコード
<div class="dropdown">
<button id="sample-dropdown" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<div class="dropdown-menu" aria-labelledby="sample-dropdown">
<a class="dropdown-item" href="#">リスト１</a>
<a class="dropdown-item" href="#">リスト２</a>
<a class="dropdown-item" href="#">リスト３</a>
</div>
</div>
メニュー内に任意のテキストを表示
.dropdown-item-textを指定して、ドロップメニュー内にテキストを追加することもできます。
カテゴリ別でメニューを表示したい場合などに利用できます。
ドロップダウン
カテゴリ1リスト１リスト２リスト３カテゴリ2リスト1リスト2
サンプルコード
<div class="dropdown">
<button id="sample-dropdown" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<div class="dropdown-menu" aria-labelledby="sample-dropdown">
<span class="dropdown-item-text">カテゴリ1</span>
<a class="dropdown-item" href="#">リスト１</a>
<a class="dropdown-item" href="#">リスト２</a>
<a class="dropdown-item" href="#">リスト３</a>
<span class="dropdown-item-text">カテゴリ2</span>
<a class="dropdown-item" href="#">リスト1</a>
<a class="dropdown-item" href="#">リスト2</a>
</div>
</div>
区切り線を入れる
ドロップダウンメニュー内でグループ分けをしたい場合、.dropdown-dividerで区切り線を入れる事ができます。
ドロップダウン
リスト１リスト２
リスト３
サンプルコード
<div class="dropdown">
<button id="sample-dropdown" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<div class="dropdown-menu" aria-labelledby="sample-dropdown"><a class="dropdown-item" href="#">リスト１</a>
<a class="dropdown-item" href="#">リスト２</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">リスト３</a></div>
</div>
