Bootstrap JS Dropdown
Dropdown CSS Classes
For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.
| Class | Description | Example |
|---|---|---|
.dropdown |
Indicates a dropdown menu | Try it |
.dropdown-item |
Style links inside the dropdown menu with proper padding etc | Try it |
.dropdown-item-text |
Style text or text links inside the dropdown menu with proper padding etc | Try it |
.dropdown-menu |
Builds the dropdown menu | Try it |
.dropdown-menu-right |
Right-aligns a dropdown menu | Try it |
.dropdown-header |
Adds a header inside the dropdown menu | Try it |
.dropup |
Indicates a dropup menu | Try it |
.disabled |
Disables an item in the dropdown menu | Try it |
.active |
Styles the active element in a dropdown menu | Try it |
.divider |
Separates items inside the dropdown menu with a horizontal line | Try it |
Via data-* Attributes
Add data-toggle="dropdown" to a link or a button to toggle a dropdown menu.
Example
<button type="button" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</button>
Try it Yourself »
Via JavaScript
Enable manually with:
Note: The data-toggle="dropdown" attribute is required regardless of whether you call the dropdown() method.
Dropdown Options
| None |
Dropdown Methods
The following table lists all available dropdown methods.
| Method | Description | Try it |
|---|---|---|
| .dropdown("toggle") | Toggles the dropdown. If set, it will open the dropdown menu by default | Try it |
| .dropdown("update") | Updates the position of an element's dropdown | |
| .dropdown("dispose") | Destroys an element's dropdown |
Dropdown Events
The following table lists all available dropdown events.
| Event | Description | Try it |
|---|---|---|
| show.bs.dropdown | Occurs when the dropdown is about to be shown. | Try it |
| shown.bs.dropdown | Occurs when the dropdown is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.dropdown | Occurs when the dropdown is about to be hidden | Try it |
| hidden.bs.dropdown | Occurs when the dropdown is fully hidden (after CSS transitions have completed) | Try it |
Tip: Use jQuery's event.relatedTarget to get the element which triggered the dropdown:
Example
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
Try it Yourself »
