# 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 %}
Dropdown trigger
{% endhighlight %}

### Via JavaScript

Call the dropdowns via JavaScript:

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

#### `data-toggle="dropdown"` still required

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.

### 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.

Event Type | Description
--- | ---
show.bs.dropdown | This event fires immediately when the show instance method is called. The toggling anchor element is available as the `relatedTarget` property of the event.
shown.bs.dropdown | This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the `relatedTarget` property of the event.
hide.bs.dropdown | This event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the `relatedTarget` property of the event.
hidden.bs.dropdown | This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the `relatedTarget` property of the event.

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