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 »

Credit: www.w3schools.com