Dropdowns dropdown.js

Examples

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Within a navbar

Within pills

Usage

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.

On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.

Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.

Via data attributes

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

{% highlight html %} {% endhighlight %}

To keep URLs intact with link buttons, use the data-target attribute instead of href="#".

{% highlight html %} {% endhighlight %}

Via JavaScript

Call the dropdowns via JavaScript:

{% highlight js %} $('.dropdown-toggle').dropdown() {% endhighlight %}

Options

None

Methods

$().dropdown('toggle')

Toggles the dropdown menu of a given navbar or tabbed navigation.

Events

All dropdown events are fired at the .dropdown-menu's parent element.

All dropdown events have a relatedTarget property, whose value is the toggling anchor element.

{% highlight js %} $('#myDropdown').on('show.bs.dropdown', function () { // do something… }) {% endhighlight %}