Bootstrap JS Dropdown

JS Dropdown (dropdown.js)

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.


The Dropdown Plugin Classes

Class Description Example
.dropdown Indicates a dropdown menu
.dropdown-menu-right Right-aligns a dropdown menu
.dropdown-header Adds a header inside the dropdown menu
.dropup Indicates a dropup menu
.disabled Disables an item in the dropdown menu
.divider Separates items inside the dropdown menu with a horizontal line

Via data-* Attributes

Add data-toggle="dropdown" to a link or a button to toggle a dropdown menu.

Example

<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>Dropdown Example</a>

 


Via JavaScript

Enable manually with:

Example

$(‘.dropdown-toggle’).dropdown();

 

Note: The data-toggle=”dropdown” attribute is required regardless of whether you call the dropdown() method.


Dropdown Options

None

Dropdown Methods

The following table lists all available dropdown methods.

Method Description
.dropdown(“toggle”) Toggles the dropdown

Dropdown Events

The following table lists all available dropdown events.

Event Description
show.bs.dropdown Occurs when the dropdown is about to be shown.
shown.bs.dropdown Occurs when the dropdown is fully shown (after CSS transitions have completed)
hide.bs.dropdown Occurs when the dropdown is about to be hidden
hidden.bs.dropdown Occurs when the dropdown is fully hidden (after CSS transitions have completed)

Tip: Use jQuery’s event.relatedTarget to get the element which triggered the dropdown:

Example

$(“.dropdown”).on(“show.bs.dropdown”, function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});

 


Examples

Examples

Change the caret icon to upside down

The following example changes the caret icon from pointing downwards to upwards when clicking on the dropdown:

Example

/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>/* JS: */
<script>
$(document).ready(function(){
$(“.dropdown”).on(“hide.bs.dropdown”, function(){
$(“.btn”).html(‘Dropdown <span class=”caret”></span>’);
});
$(“.dropdown”).on(“show.bs.dropdown”, function(){
$(“.btn”).html(‘Dropdown <span class=”caret caret-up”></span>’);
});
});
</script>

 

Navbar With Dropdown

The following example adds a dropdown menu for a button in the navigation bar:

Example

<nav class=”navbar navbar-inverse”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<a class=”navbar-brand” href=”#”>WebSiteName</a>
</div>
<div>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li class=”dropdown”>
<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#”>Page 1
<span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Page 1-1</a></li>
<li><a href=”#”>Page 1-2</a></li>
<li><a href=”#”>Page 1-3</a></li>
</ul>
</li>
<li><a href=”#”>Page 2</a></li>
<li><a href=”#”>Page 3</a></li>
</ul>
</div>
</div>
</nav>

 

The following example adds a dropdown menu with a login form in the navbar:

Example

<ul class=”nav navbar-nav navbar-right”>
<li class=”dropdown”>
<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#”>Login <span class=”glyphicon glyphicon-log-in”></span></a>
<div class=”dropdown-menu”>
<form id=”formlogin” class=”form container-fluid”>
<div class=”form-group”>
<label for=”usr”>Name:</label>
<input type=”text” class=”form-control” id=”usr”>
</div>
<div class=”form-group”>
<label for=”pwd”>Password:</label>
<input type=”password” class=”form-control” id=”pwd”>
</div>
<button type=”button” id=”btnLogin” class=”btn btn-block”>Login</button>
</form>
<div class=”container-fluid”>
<a class=”small” href=”#”>Forgot password?</a>
</div>
</div>
</li>
</ul>

 

Multi-Level Dropdowns

In this example, we use jQuery to open multi-level dropdowns on click:

Example

<script>
$(document).ready(function(){
$(‘.dropdown-submenu a.test’).on(“click”, function(e){
$(this).next(‘ul’).toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>

 

In this example, we have created a custom .dropdown-submenu class for multi-level dropdowns:

Example

 /* CSS: */
<style>
.dropdown-submenu {
position: relative;
}.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>

/* JS: */
<script>
$(document).ready(function(){
$(‘.dropdown-submenu a.test’).on(“click”, function(e){
$(this).next(‘ul’).toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>

Leave a Reply

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