Dropdown & Dropup
All modular elements can be readily used and customized in every layout across pages.
Bootstrap 5 dropdown and dropup
Use any button to trigger a dropdown menu by placing it within a .btn-group
and providing the proper menu markup
For detail documentation, View Dropdown & Dropup on Bootstrap⟶
Single Button Dropdown
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button </button>
<ul class="dropdown-menu">
<li> <a class="dropdown-item" href="#!"> Action </a></li>
<li> <a class="dropdown-item" href="#!"> Another action </a></li>
<li> <a class="dropdown-item" href="#!"> Something else here </a></li>
</ul>
</div>
Split Button Dropdown
<div class="btn-group"> <button class="btn btn-danger" type="button"> Split Dropdown </button><button class="btn btn-danger dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown </span></button>
<ul class="dropdown-menu">
<li> <a class="dropdown-item" href="#!"> Action </a></li>
<li> <a class="dropdown-item" href="#!"> Another action</a></li>
<li> <a class="dropdown-item" href="#!"> Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li> <a class="dropdown-item" href="#!"> Separated link</a></li>
</ul>
</div>
Single Button Dropdup
<div class="btn-group dropup"> <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Single Dropup </button>
<ul class="dropdown-menu">
<li> <a class="dropdown-item" href="#!"> Action </a></li>
<li> <a class="dropdown-item" href="#!"> Another action</a></li>
<li> <a class="dropdown-item" href="#!"> Something else here </a></li>
</ul>
</div>
Single Button Dropdup
<div class="btn-group dropup"> <button class="btn btn-danger" type="button"> Split Dropdown </button><button class="btn btn-danger dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown </span></button>
<ul class="dropdown-menu">
<li> <a class="dropdown-item" href="#!"> Action </a></li>
<li> <a class="dropdown-item" href="#!"> Another action</a></li>
<li> <a class="dropdown-item" href="#!"> Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li> <a class="dropdown-item" href="#!"> Separated link</a></li>
</ul>
</div>