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:

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>

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>

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>

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 TypeDescription
show.bs.dropdownIt is used when the show instance method is invoked.
shown.bs.dropdownIt triggers when dropdown has been made visible to the user.
hide.bs.dropdownIt is used when the hide instance method has been called.
hidden.bs.dropdownIt triggers when the dropdown is hidden from the user.

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*