Tutorials References Exercises Videos NEW Menu
Paid Courses Website NEW

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:

Example

$('.dropdown-toggle').dropdown();
Try it Yourself »

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 »