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

Add data-toggle="dropdown" to a link or a button to toggle a dropdown menu.

<button type="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</button>

Enable manually with:

$('.dropdown-toggle').dropdown();

Note: The data-toggle="dropdown" attribute is required regardless of whether you call the dropdown() method.

None

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

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:

$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});