Dropdowns
These modular elements can be readily used and customized in every layout across pages.
For detail documentation. View Dropdowns on Bootstrap
Basic Example
<div class="dropdown"><button class="btn btn-dark dropdown-toggle" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#!">Set status</a></li>
<li><a class="dropdown-item" href="#!">Profile & account</a></li>
<li><a class="dropdown-item" href="#!">Feedback</a></li>
<li><a class="dropdown-item" href="#!">Settings</a></li>
<li><a class="dropdown-item" href="#!">Logout </a></li>
</ul>
</div>
Dropdown on Hover
Add dropdown-on-hover
in data-bs-toggle="dropdown-on-hover"
item to show dropdown menu on mouse hover
<div class="dropdown d-inline-block"><button class="btn btn-dark dropdown-toggle" id="dropdownMenuHoverButton" type="button" data-bs-toggle="dropdown-on-hover" aria-expanded="false">Dropdown button</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuHoverButton" style="margin-top: 2px;">
<li><a class="dropdown-item" href="#!">Set status</a></li>
<li><a class="dropdown-item" href="#!">Profile & account</a></li>
<li><a class="dropdown-item" href="#!">Feedback</a></li>
<li><a class="dropdown-item" href="#!">Settings</a></li>
<li><a class="dropdown-item" href="#!">Logout </a></li>
</ul>
</div>