HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list
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.
Class | Description | Example |
---|---|---|
.dropdown | Indicates a dropdown menu | Try it |
.dropdown-menu | Builds the dropdown menu | Try it |
.dropdown-menu-right | Right-aligns a dropdown menu | Try it |
.dropdown-header | Adds a header inside the dropdown menu | Try it |
.dropup | Indicates a dropup menu | Try it |
.disabled | Disables an item in the dropdown menu | Try it |
.divider | Separates items inside the dropdown menu with a horizontal line | Try it |
Add data-toggle="dropdown"
to a link or a button to toggle a dropdown menu.
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
Enable manually with:
$('.dropdown-toggle').dropdown();
None |
The following table lists all available dropdown methods.
Method | Description | Try it |
---|---|---|
.dropdown("toggle") | Toggles the dropdown | Try it |
The following table lists all available dropdown events.
Event | Description | Try it |
---|---|---|
show.bs.dropdown | Occurs when the dropdown is about to be shown. | Try it |
shown.bs.dropdown | Occurs when the dropdown is fully shown (after CSS transitions have completed) | Try it |
hide.bs.dropdown | Occurs when the dropdown is about to be hidden | Try it |
hidden.bs.dropdown | Occurs when the dropdown is fully hidden (after CSS transitions have completed) | Try it |
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
Change the caret icon to upside down
The following example changes the caret icon from pointing downwards to upwards when clicking on the dropdown:
/* 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:
<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:
<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:
<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:
/* 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>