The dropdown menus can be stylised and controlled better using the contextual classes provided by Bootstrap.
Bootstrap Basic Dropdown
It is well known that
The basic
1 2 3 4 5 6 7 8 9 | <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> |
- The basic contextual class for dropdown menu in Bootstrap is the .dropdown class
- For a working
you basically need a button with class .dropdown-toggle along with the attribute data-toggle=”dropdown”dropdown - Use the .caret class to put an arrow icon on the
dropdown button. This icon is to indicate that the button is acting as a dropdown. You can also use .caret.caret-up for “dropup ” menus (to be discussed later) - The
dropdown ‘menu’ part can be built by using .dropdown-menu class to a <ul> element
Bootstrap Dropdown Divider
A horizontal thin border can be added to separate some menu items in the dropdown menu using the .divider class, like:
1 | <li class="”divider”"></li> |
Bootstrap Dropdown Header
Use the .dropdown-header contextual class to add headers for the dropdown menu. The sample code:
1 | <li class="dropdown-header">Dropdown header 1</li> |
Bootstrap Disable and Active items
The .active class adds a blue background color that can be used to highlight the selected option from the drop-down. Similarly, you can disable an item in the dropdown menu using the .disabled class. The .disabled class will basically get a light-grey text color along with a “no-parking-sign” icon for hover event. Observer the below code for better understanding:
1 2 | <li class="disabled"><a href="#">CSS</a></li> <li class="active"><a href="#">HTML</a></li> |
Bootstrap Dropdown Position
The horizontal alignment of the dropdown can be done using contextual class .dropdown-menu-right class. You add this class to the dropdown element with .dropdown-menu:
1 | <ul class="dropdown-menu dropdown-menu-right"></ul> |
Bootstrap Dropup
You can also make the dropdown menu to expand upwards.
Using class= “dropup”
attribute will make the dropdown menu open in upward direction instead of downwards.
For example:
1 | <div class="dropup"> |
Via data-* Attributes
An alternative way of creating dropdown in Bootstrap is by using the data-* class.
Here, the attribute data-toggle="dropdown"
can be added to a link or a button to make it toggle a dropdown menu.
1 | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a> |
Bootstrap Dropdown Methods
Bootstrap 4 has only one method for the .dropdown class which is:
- .dropdown(“toggle”)
The method basically just makes sure that the dropdown is toggle-able
Bootstrap Dropdown Events
Here’s a list of events provided by bootstrap for the dropdown menu element:
- bs.dropdown: The event for the dropdown when it is just about to be shown
- bs.dropdown: The event for the dropdown when it is fully visible and the CSS transitions are also completed.
- bs.dropdown: The event for the dropdown when it is just about to be hidden
- bs.dropdown: The event for the dropdown when it is fully hidden and the CSS transitions are also completed.
Bootstrap Dropdown Contextual Classes
Here’s a list of all the contextual classes used with the dropdown element:
- .dropdown
- .dropdown-menu
- .dropdown-menu-right
- .dropdown-header
- .dropup
- .disabled
- .divider