Bootstrap 3 dropdowns are mainly used in the navigation menu to make a dropdown menu, But sometimes it is used in button and div also for scripting. A bootstrap 3 dropdowns is a toggleable menu that allows you to choose a value from a togglable list.
Basic Dropdown
To make a basic dropdown add the class name .dropdown
to a parent div and inside that create a button or anchor tag and add the class name .dropdown-toggle
and data-toggle="dropdown"
to it and then create a list with the class name .dropdown-menu
and you have done a basic bootstrap 3 dropdown.
Example
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div>
Dropdown Divider
To make dropdown divider use .divider
class name to a li inside the ul with the class name .dropdown-menu
it is used to separate element inside the dropdown menu with a horizontal border
Example
<li class="divider"></li>
Dropdown Header
Like dropdown divider use class name .dropdown-header
to add headers inside the dropdown menu.
Example
<li class="dropdown-header">Dropdown header 1</li>
Disable and Active items
to make an item disable that is on hover a cross button will appear to use the class name .disabled
and to make a Highlight item use class name .active
to make a blue background item.
Example
<li class="disabled"><a href="#">CSS</a></li> <li class="active"><a href="#">HTML</a></li>
Dropdown Position
You can make a dropdown position right by using the class name .dropdown-menu-right
on the ul with the class name .dropdown-menu
and it will open on the right side of the page.
Example
<ul class="dropdown-menu dropdown-menu-right">
Bootstrap 3 Dropup
If you want to make a collapsable menu will open on the above direction then use .dropup
instead of .dropdown and the other will be same and it will be done
Example
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li class="divider"></li> <li><a href="#">About Us</a></li> </ul> </div>
Dropdown role and area
To improve accessibility using screen readers, you can include the role
and aria-*
in a dropdown menu.
Example
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li role="presentation"><a role="menuitem" href="#">HTML</a></li> <li role="presentation"><a role="menuitem" href="#">CSS</a></li> <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" href="#">About Us</a></li> </ul> </div>
In this post we have learned how to make Bootstrap 3 Dropdowns and Dropup, I hope the post helped you, please leave a comment to make the site more useful and better.
Thanks for reading