Dropdown menu is one of the most efficient way to categorize elements while saving space. Dropdown menu allows user to click on a button or a link which results in display of a predefined list of items. Bootstrap dropdown menus are extremely simple to create. to create dropdown menus in bootstrap, follow these steps.
Take a look at the following example to see basic bootstrap dropdown menu in action.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Dropdown Menu</h1>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">About Us
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Our Team</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</body>
</html>
If you run the above page in browser, you should see a button with blue background. This is because class “btn-info” is added to the button element. You can also see a small inverted triangle after the button text. This is added via “caret” class in span. Now if you click the button, you will see that the elements in the un-ordered list will appear. This is how, default bootstrap dropdown menu works.
You can also add headers to the elements in the un-ordered list displayed as a result of clicking the drop down menu button. To do so, simply add “dropdown-header” class to the “li” element inside the list. Take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Dropdown Menu</h1>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">About Us
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Our Team</li>
<li><a href="#">James</a></li>
<li><a href="#">Mike</a></li>
<li class="divider"></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</body>
</html>
If you open the above page and click on the button, a dropdown list shall appear. The first item i.e. “About Us” will be of shorter font size and will be of lighter color. This is because “dropdown-header” class has been added to it. Similarly, a “divider” class has also been added to the “li” item which creates a horizontal line.