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 &amp; 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 &amp; 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>