【初心者の方向け】 Bootstrap4の使い方 ドロップダウン

クリックした際にメニューが表示されるドロップダウンも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を指定して、ドロップメニュー内にテキストを追加することもできます。

カテゴリ別でメニューを表示したい場合などに利用できます。

サンプルコード

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

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 余白 【初心者の方向け】 Bootstrap4の使い方 ボーダー オリジナルサイト作成お得プラン Bootstrap5　モーダル（Modal）の作成。