Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.


Examples

Multilevel Dropdown

<div class="dropdown">
  <button class="btn btn-primary btn-block" type="button" id="multiDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Click here
  <div class="ripple-container"></div></button>
  <div class="dropdown-menu" aria-labelledby="multiDropdownMenu">
    <a class="dropdown-item" href="#pablo">Action</a>
    <a class="dropdown-item" href="#pablo">Another action</a>
    <a class="dropdown-item dropdown-toggle" href="#pablo">Submenu</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#pablo">Submenu action</a>
      <a class="dropdown-item" href="#pablo">Submenu action</a>
      <a class="dropdown-item dropdown-toggle" href="#pablo">Subsubmenu</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#pablo">Subsubmenu action 1</a>
        <a class="dropdown-item" href="#pablo">Subsubmenu action 2</a>
      </div>
      <a class="dropdown-item dropdown-toggle" href="#pablo">Second subsubmenu</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#pablo">Subsubmenu action 1</a>
        <a class="dropdown-item" href="#pablo">Subsubmenu action 2</a>
      </div>
    </div>
  </div>
</div>

Dropup

<div class="dropup">
  <div class="btn btn-primary" href="javascript:;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Click me</span>
  </div>
  <div class="dropdown-menu">
    <a href="javascript:;" class="dropdown-item">
      <i class="ni ni-single-02"></i>
      <span>My profile</span>
    </a>
    <a href="javascript:;" class="dropdown-item">
      <i class="ni ni-settings-gear-65"></i>
      <span>Settings</span>
    </a>
    <a href="javascript:;" class="dropdown-item">
      <i class="ni ni-calendar-grid-58"></i>
      <span>Activity</span>
    </a>
    <a href="javascript:;" class="dropdown-item">
      <i class="ni ni-support-16"></i>
      <span>Support</span>
    </a>
    <div class="dropdown-divider"></div>
    <a href="javascript:;" class="dropdown-item">
      <i class="ni ni-user-run"></i>
      <span>Logout</span>
    </a>
  </div>
</div>

Colors

The best part is you can do this with any button variant, too: