Click on the dropdown nav links in the navbar and pills below to test dropdowns.

• Regular link
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Using bootstrap.dropdown

Call the dropdowns via javascript:

$('.dropdown-toggle').dropdown()

Markup

To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown" id="menu1">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
      Dropdown
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  ...
</ul>

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

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
      Dropdown
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Methods

$().dropdown()

A programatic api for activating menus for a given navbar or tabbed navigation.