Dropdown

These modular elements can be readily used and customized in every layout across pages.

For detail documentation, View Dropdown on Bootstrap

Basic Example

<div class="dropdown">
  <button class="btn btn-dark dropdown-toggle" id="dropdownMenuButton" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu dropdown-menu-right py-0" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#!">Set status</a>
    <a class="dropdown-item" href="../pages/profile.html">Profile & account</a>
    <a class="dropdown-item" href="#!">Feedback</a>
    <a class="dropdown-item" href="../pages/settings.html">Settings</a>
    <a class="dropdown-item" href="../authentication/log-out.html">Logout</a>
  </div>
</div>

Dropdown on Hover

Add .dropdown-on-hover class in .dropdown item to show dropdown menu on mouse hover

<div class="dropdown dropdown-on-hover d-inline-block">
  <button class="btn btn-dark dropdown-toggle" id="dropdownMenuHoverButton" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
  <div class="dropdown-menu dropdown-menu-right py-0" aria-labelledby="dropdownMenuHoverButton">
    <a class="dropdown-item" href="#!">Set status</a>
    <a class="dropdown-item" href="../pages/profile.html">Profile & account</a>
    <a class="dropdown-item" href="#!">Feedback</a>
    <a class="dropdown-item" href="../pages/settings.html">Settings</a>
    <a class="dropdown-item" href="../authentication/log-out.html">Logout</a>
  </div>
</div>

Dropdown

Components

Basic Example

Dropdown on Hover