Bootstrap Dropdown Plugin

In this tutorial we will cover Interactive part of Bootstrap Dropdown Plugin. We can use dropdown menu with any component using Bootstrap Dropdown plugin, including the navbar, tabs, and pills.

If you want to implement functionality of this plugin individually, simple include the dropdown.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Usage

Via data attribute of JavaScript you can toggle the dropdown plugin’s hidden content below is the details of both methods.

Via data attributes

Add data-toggle=”dropdown” to a link or button to toggle a dropdown 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 want to keep URLs intact, use the data-target attribute instead of href="#". This is useful if the browser is not enabling JavaScript.

<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

Using following method call the dropdowns via JavaScript.

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

Examples of Dropdown Plugins

Within Navbar

See this example of dropdown menu within a navbar:

<nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <a class="navbar-brand" href="#">TutorialsPoint</a>
 </div>
 <div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Nav One</a></li>
 <li><a href="#">Nav Two</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 Nav Three 
 <b class="caret"></b>
 </a>
 <ul class="dropdown-menu">
 <li><a href="#">Sub Nav Three 1</a></li>
 <li><a href="#">Sub Nav Three 2</a></li>
 <li><a href="#">Sub Nav Three 3</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 <li class="divider"></li>
 <li><a href="#">One more separated link</a></li>
 </ul>
 </li>
 </ul>
 </div>
</nav>

Demo

Within Tabs

See this example of dropdown menu within tabs:

<p>Tabs With Dropdown Example</p>
<ul class="nav nav-tabs">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Bootstrap</a></li>
 <li><a href="#">jQuey</a></li>
 <li><a href="#">Photoshop</a></li>
 <li class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 Themes <span class="caret"></span>
 </a>
 <ul class="dropdown-menu">
 <li><a href="#">Wordpress</a></li>
 <li><a href="#">HTML/CSS</a></li>
 <li><a href="#">Joomla</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
 </li>
 <li><a href="#">PHP</a></li>
</ul>

Demo

Options

There are no any options of Bootstrap Dropdown Plugin.

Methods

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

$().dropdown('toggle')

Example

See this example of dropdown plugin method.

<nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <a class="navbar-brand" href="#">TutorialsPoint</a>
 </div>

 <div id="myexample">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Graphics</a></li>
 <li><a href="#">Templates</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle">Tutorials <b 
 class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a id="action-1" href="#">
 Photoshop</a>
 </li>
 <li><a href="#">Illustrator</a></li>
 <li><a href="#">Flash</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 <li class="divider"></li>
 <li><a href="#">One more separated link</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </nav>
</div>
<script>
 $(function()
 $(".dropdown-toggle").dropdown('toggle');
 ); 
</script>

Demo

Events

All dropdown events are fired at the .dropdown-menu’s parent element.

Event Type	Description
show.bs.dropdown	This event fires immediately when the show instance method is called. The toggling anchor element is available as the relatedTarget property of the event.
shown.bs.dropdown	This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event.
hide.bs.dropdown	This event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the relatedTarget property of the event.
hidden.bs.dropdown	This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event.

$('#myDropdown').on('show.bs.dropdown', function () 
 // do something…
 )

Bootstrap Dropdown Plugin