Sandbox: JavaScript

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

Dropdown Buttons

<div class="mbl">
  <div class="btn-group" data-behavior="BS.Dropdown">
    <button class="btn btn-primary btn-hg">Dropdown</button>
    <button class="btn btn-primary btn-hg dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <span class="dropdown-arrow dropdown-arrow-inverse"></span>
    <ul class="dropdown-menu dropdown-inverse">
      <li><a href="#fakelink">Sub Menu Element</a></li>
      <li><a href="#fakelink">Sub Menu Element</a></li>
      <li><a href="#fakelink">Sub Menu Element</a></li>
    </ul>
  </div>
</div>

Within a navbar

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation" data-behavior="BS.Dropdown">
  <div class="navbar-inner">
    <div class="container full-width">
      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project Name</a>
      </div>
      <div class="collapse navbar-collapse bs-js-navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <span class="dropdown-arrow"></span>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Action</a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Another action</a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Something else here</a>
              </li>
              <li role="presentation" class="divider"></li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Separated link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
            <span class="dropdown-arrow"></span>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Action</a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Another action</a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Something else here</a>
              </li>
              <li role="presentation" class="divider"></li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Separated link</a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li id="fat-menu" class="dropdown">
            <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
            <span class="dropdown-arrow"></span>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Action</a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Another action</a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Something else here</a>
              </li>
              <li role="presentation" class="divider"></li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="http://twitter.com/anutron">Separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div><!-- /.nav-collapse -->
    </div>
  </div>
</nav> <!-- /navbar-example -->

Within tabs

I'm in Section 1.

Howdy, I'm in Section 2.

Howdy, I'm in Section 3.

Howdy, I'm in Section 4.

Howdy, I'm in Section 5.

<ul class="nav nav-tabs nav-append-content" data-behavior="BS.Dropdown BS.Tabs">
  <li class="active"><a class="tab">Popular</a></li>
  <li><a class="tab">Newest</a></li>
  <li><a class="tab">Bestselling</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <b class="caret"></b>
    </a>
    <span class="dropdown-arrow"></span>
    <ul class="dropdown-menu">
      <li><a class="tab">Another</a></li>
      <li><a class="tab">Something else</a></li>
    </ul>
  </li>
</ul> <!-- /tabs -->

<div class="tab-content">
  <div class="tab-pane active">
    <p>I'm in Section 1.</p>
  </div>

  <!-- /tabs -->
  <div class="tab-pane">
    <p>Howdy, I'm in Section 2.</p>
  </div>

  <!-- /tabs -->
  <div class="tab-pane">
    <p>Howdy, I'm in Section 3.</p>
  </div>

  <div class="tab-pane">
    <p>Howdy, I'm in Section 4.</p>
  </div>

  <div class="tab-pane">
    <p>Howdy, I'm in Section 5.</p>
  </div>
</div> <!-- /tab-content -->

Via data attributes

Add data-behavior="BS.Dropdown" to the top level .dropdown element, then 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>

Via JavaScript

Call the dropdowns via JavaScript:

new Bootstrap.Dropdown(containerElement, options);

Options

None

Related Documentation

Note: Not all links in these work.

Class: Bootstrap.Dropdown

Creates a simple dropdown menu that works with the Bootstrap formatted dropdowns.

Implements

Bootstrap.Dropdown Method: constructor

Syntax

new Bootstrap.Dropdown(element[, options]);

Arguments

  1. element - (mixed) A string of the id for an Element or an Element that contains one or more dropdown menus.
  2. options - (object, optional) a key/value object of options

Events

  • show - (function) The function to apply when a menu element is displayed. Passed the element that is displayed
  • hide - (function) The function to apply when the menu is hidden. Passed an Elements array of the hidden items (typically only one).

Example HTML

<ul>
    <li class="menu">
        <a href="#" class="menu">Menu2</a>
        <ul class="menu-dropdown">
            <li><a>item1</a></li>
            <li><a>item2</a></li>
            <li><a>item3</a></li>
        </ul>
    </li>
</ul>

Bootstrap.Dropdown Method: show

Shows the specified menu item.

Syntax

myDropdown.show(element);

Arguments

  1. element - (DOM element or id) The submenu item to show (a ul.menu-dropdown element).

Returns

Bootstrap.Dropdown Method: hideAll

Hides any displayed menus.

Syntax

myDropdown.hideAll();

Returns

Bootstrap.Dropdown Method: destroy

Hides all the menu items and detaches the event listeners. Does not remove anything from the DOM.

Syntax

myDropdown.destroy();

Returns