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-secondary dropdown-toggle" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown link</button>
  <ul class="dropdown-menu" 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 data-sl-dropdown-on-hover attribute 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" data-sl-dropdown-on-hover="data-sl-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>
Dropdown on Hover