Bootstrap Dropdown Plugin

The chapter on Bootstrap Dropdowns explains the dropdown menu but does not cover the interactive aspects. This chapter will delve into the interactive features of the dropdown menu. The Dropdown plugin allows you to add dropdown menus to any component, such as navigation bars, tabs, pill navigation menus, buttons, etc.

If you want to reference the functionality of this plugin individually, you need to include dropdown.js. Alternatively, as mentioned in the Bootstrap Plugins Overview chapter, you can include bootstrap.js or the compressed version bootstrap.min.js.

Usage

You can toggle the hidden content of the Dropdown plugin:

• Through data attributes: Add data-toggle="dropdown" to a link or button to toggle the dropdown menu, as shown below:

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

If you need to keep the link intact (useful when JavaScript is not enabled in the browser), 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>

• Through JavaScript: Call the dropdown toggle via JavaScript using the following method:

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

Example

Within a Navigation Bar

The following example demonstrates the use of dropdown menus within a navigation bar:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">tutorialpro.org</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java 
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Another separated link</a></li>
                </ul>
            </li>

</ul>
</div>
</div>
</nav>

Result is shown below:

Within Tabs

The following example demonstrates the usage of dropdown menus within tabs:

Example

<p>Tabs with Dropdown Menus</p>
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">SVN</a>
    </li>
    <li>
        <a href="#">iOS</a>
    </li>
    <li>
        <a href="#">VB.Net</a>
    </li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Java
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li>
                <a href="#">Swing</a>
            </li>
            <li>
                <a href="#">jMeter</a>
            </li>
            <li>
                <a href="#">EJB</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">Separate link</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">PHP</a>
    </li>
</ul>

Result is shown below:

Options

No options available.

Methods

The dropdown toggle has a simple method to display or hide the dropdown menu.

$().dropdown('toggle')

Example

The following example demonstrates the usage of the dropdown plugin methods:

Example

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">tutorialpro.org</a>
        </div>
        <div id="myexample">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">iOS</a>
                </li>
                <li>
                    <a href="#">SVN</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a id="action-1" href="#">jmeter</a>
                        </li>
                        <li>
                            <a href="#">EJB</a>
                        </li>
                        <li>
                            <a href="#">Jasper Report</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">Separate link</a>
                        </li>

<li class="divider"></li>
<li>
    <a href="#">Another separate link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script>
$(function() {
    $(".dropdown-toggle").dropdown('toggle');
});
</script>