Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. Please read the official Bootstrap documentation for a full list of options.

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Separated link

Dropdown ellipsis Dashkit only

Creates a compact dropdown toggler with a Feather icon.

Latest orders

Action Another action Something else here
<div class="dropdown">

  <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fe fe-more-vertical"></i>
  </a>

  <div class="dropdown-menu dropdown-menu-end">
    <a href="#!" class="dropdown-item">
      Action
    </a>
    <a href="#!" class="dropdown-item">
      Another action
    </a>
    <a href="#!" class="dropdown-item">
      Something else here
    </a>
  </div>
  
</div>

Dropdown card Dashkit only

Turns the default Bootstrap dropdown menu into a fully functional .card component. The height of the .card-body container will be limited and a scrolling bar will appear once this height is exceeded.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae rem autem impedit ad odio, enim tempore possimus non minus quod dignissimos ipsum eveniet odit, ratione molestiae, velit a dolorem!
<div class="dropdown">

  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Card dropdown
  </button>

  <div class="dropdown-menu dropdown-menu-card">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae rem autem impedit ad odio, enim tempore possimus non minus quod dignissimos ipsum eveniet odit, ratione molestiae, velit a dolorem!
    </div>
  </div>

</div>