Bootstrap Dropdown Plugin

The Bootstrap drop down menu is sometimes referred to as pull down menu or drop down list which appears when clicking on a button or text selection which allows the user to choose a single value. A drop down list can be used to display large list of options where only one option is displayed initially, the remaining options will get display when user activates drop down box.

also read:

Bootstrap Setup

Bootstrap Typography

Using dropdown plugin, we can create dropdown menu to any components like navbars, tabs and pills as shown in the following examples:

Dropdown Menu within Navbar

We can create dropdown to navbar by using .navbar class within the nav element. The following example demonstrates how to add dropdown menu to navbar:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Dropdown Menu</h2>
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a href="#" class="navbar-brand">Home</a>
   </div>
   <div>
    <ul class="nav navbar-nav">
         <li class="active"><a href="#">Tutorials</a></li>
         <li><a href="#">Java/J2EE</a></li>
	  <li class="dropdown">
	  <a href="#" class="dropdown-toggle" data-toggle="dropdown">JS Frameworks<span class="caret"></span></a>
	     <ul class="dropdown-menu">
		 <li><a href="#">DOJO</a></li>
		 <li><a href="#">JavaScript</a></li>
		 <li><a href="#">jQuery</a></li>
		 <li><a href="#">Ajax</a></li>
	     </ul>
	  </li>
   </ul>
</div>
</nav>
</div>
</body>
</html>

Run Bootstrap Navbar Dropdown Example

Dropdown Menu within Navpills

We can create pill based navigation with Bootstrap, by using the class .nav-pills. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Dropdown Menu</h2>
<ul class="nav nav-pills">
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Tutorials</a></li>
    <li><a href="#">Java/J2EE</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">JS Frameworks<span class="caret"></span></a>
    <ul class="dropdown-menu">
	 <li><a href="#">DOJO</a></li>
	 <li><a href="#">JavaScript</a></li>
	 <li><a href="#">jQuery</a></li>
	 <li><a href="#">Ajax</a></li>
    </ul>
    </li>
</ul>
</body>
</html>

Run Bootstrap Navpills Dropdown Example

Bootstrap Dropdown Usage

We can toggle the dropdown plugin hidden content by using data attributes and java script.

Via data Attributes

We can create dropdown menu by using data attribute by using data-toggle=”dropdown” to link or button as shown in the following simple snippet:

<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Trigger</a>
<ul class="dropdown-menu”>
...
</ul>

If we want to keep URLs intact, then use the data-target attribute instead of href=”#”. The above examples navbar and navpills uses the data toggle attribute.

Via JavaScript

We can create manually dropdown menu via JavaScript by using the following line in the JavaScript code:

$(".dropdown-toggle").dropdown();

The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(".dropdown-toggle").dropdown();
});
</script>
</head>
<body>
<div class="container">
<h2>Basic Dropdown Menu</h2>
	<div class="dropdown">
	<a href="#" class="dropdown-toggle">Country List<span class="caret"></span></a>
	<ul class="dropdown-menu">
	 <li><a href="#">India</a></li>
	 <li><a href="#">Australia</a></li>
	 <li><a href="#">Srilanka</a></li>
	 <li><a href="#">South Africa</a></li>
	 <li><a href="#">New Zealand</a></li>
	</ul>
	</div>
</body>
</html>

Run Bootstrap Dropdown using JavaScript Example

Bootstrap Dropdown Events

The following table shows four drop down events which are used based on the behavior of dropdown menu. All these events are used within the .dropdown-menu’s parent element.

Event Type	Description
show.bs.dropdown	It is used when the show instance method is invoked.
shown.bs.dropdown	It triggers when dropdown has been made visible to the user.
hide.bs.dropdown	It is used when the hide instance method has been called.
hidden.bs.dropdown	It triggers when the dropdown is hidden from the user.