Menu

Dropdowns

Shortcodes  /  Dropdowns

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Within a navbar

Within tabs

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

<div class="dropdown">
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

To keep URLs intact, use the data-target attribute instead of href="#".

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Via JavaScript

Call the dropdowns via JavaScript:

$('.dropdown-toggle').dropdown()
دی ان ان