Bootstrap
In this tutorial we will learn about dropdowns in Bootstrap.
To use the dropdowns we have to include the dropdown.js file.
To create a dropdowns we use the .dropdown class and wrap the content inside.
.dropdown
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li role="separator" class="divider"></li> <li><a href="#">Menu Item 3</a></li> </ul> </div>
Output:
In the above example we have created a default style button using the .btn .btn-default classes and when it is clicked the dropdown menu opens.
.btn .btn-default
The menu items are unordered list items and we have given the opening ul tag the .dropdown-menu class.
ul
.dropdown-menu
We can make the menu of a dropdown open upwards by adding the .dropup class in the parent element.
.dropup
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li role="separator" class="divider"></li> <li><a href="#">Menu Item 3</a></li> </ul> </div>
In Bootstrap, a dropdown menu by default is automatically positioned 100% from the top and along the left side of its parent.
We can align the dropdown menu to the right using the .dropdown-menu-right class.
.dropdown-menu-right
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li role="separator" class="divider"></li> <li><a href="#">Menu Item 3</a></li> </ul> </div>
We add the dropdown header using the .dropdown-header class.
.dropdown-header
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> <li class="dropdown-header">Header</li> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li role="separator" class="divider"></li> <li><a href="#">Menu Item 3</a></li> </ul> </div>
We can add divider to the dropdown menu using the .divider class.
.divider
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> <li><a href="#">Menu Item 1</a></li> <li role="separator" class="divider"></li> <li><a href="#">Menu Item 2</a></li> </ul> </div>
To disable a menu item we add the .disabled class to the item.
.disabled
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> <li><a href="#">Menu Item 1</a></li> <li class="disabled"><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> </ul> </div>