JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Dropdown Plugin

July 19, 2014 by Krishna Srinivasan Leave a Comment

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:

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Navbar Dropdown Example

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:

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Navpills Dropdown Example

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:

[code lang=”xml”]
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Trigger</a>
<ul class="dropdown-menu”>
…
</ul>
[/code]

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:

[code lang=”xml”]
$(".dropdown-toggle").dropdown();
[/code]

The following is an example:

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Dropdown using JavaScript Example

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.

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

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.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved