The Bootstrap dropdown menu is the easiest way of creating a toggleable menu with just the addition of few classes. Here is the simple example of a dropdown menu using Bootstrap.
|
1 2 3 4 5 6 7 8 9 |
<div class="dropdown"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Menu <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> |
Output
To create a dropdown menu in HTML, you have to write a javascript code to display a toggleable menu with links.
However, Bootstrap resolves this problem of writing javascript code and needs only to include Bootstrap minified CSS and javascript files to your project.
Let’s find out live examples with description to create a toggleable menu in Bootstrap.
Creating Bootstrap Dropdown Menus
To create a dropdown menu in Bootstrap, you have to use the below example:-
|
1 2 3 4 5 6 7 8 9 |
<div class="dropdown"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Menu <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> |
Output
Explanation of the Above Example
The Bootstrap .dropdown class in the <div> defines the dropdown menu.
The toggleable dropdown button uses the Bootstrap .dropdown-toggle class and the data-toggle="dropdown" attribute to open the dropdown menu.
In the toggle button, an <span> element with the class .caret is added to indicated the dropdown button using the caret icon().
The <ul> element contains the list of items using the Bootstrap .dropdown-menu class to display dropdown with links.
Dropup Menus in Bootstrap
If you want to create an upward menu or dropup menu, you have to use the Bootstrap .dropup class in the <div> element.
See the example given below for the dropup menu items.
|
1 2 3 4 5 6 7 8 9 |
<div class="dropup"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">DropUp Menu <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> |
Output
Click the above given button, you will get an upward menu items with links. The class .caret shows the upward direction caret icon().
Right Align Bootstrap Dropdown Menu
To align the dropdown menu to the right side, you have to use the Bootstrap class .dropdown-menu-right to the <ul> element.
See the example given below for the right aligned dropdown menu list items.
|
1 2 3 4 5 6 7 8 9 |
<div class="dropdown"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropup Menu <span class="caret"></span></a> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> |
Output
Click the above button and you will get a right aligned dropdown menu with the list items.
Add Headers to Bootstrap Dropdown Menu Lists
If you want to add the list items with the header, you have to use the class .dropdown-header with the top <li> element that you want to make as a header.
Below is the example of the list items in which the first item is the header.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="dropdown"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Menu <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-header">My Menu</li> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> |
Output
Dropdown Divider in Bootstrap
If you want to display a separate link from the other list items in a dropdown menu, you have to use the class .divider to make a divider for separate list item.
It will create a line above the mentioned class list item or separate list item.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="dropdown"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Menu with Divider<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> <li class="divider"></li> <li><a href="#">My Separate Link</a></li> </ul> </div> |
Output
Disable and Active Dropdown Menu items in Bootstrap
Using bootstrap you can easily make a dropdown menu list item disable or active. To disable a list item, you can use class .disabled. Similarly, to make list item active, you can use class .active.
The disable menu item shows a not allowed to click menu item when you hover over the item. However, the active list item displays with primary background color without hovering over the item.
|
1 2 3 4 5 6 7 8 9 |
<div class="dropdown"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Menu <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li class="disabled"><a href="#">About Us</a></li> <li class="active"><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> |
Output