Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.
Within a navbar
.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.
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
data-toggle="dropdown" to a link or button to toggle a dropdown.
To keep URLs intact with link buttons, use the
data-target attribute instead of
data-toggle="dropdown" still required
data-toggle="dropdown" is always required to be present on the dropdown's trigger element.
Toggles the dropdown menu of a given navbar or tabbed navigation.
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.
|Event Type ||Description |
|show.bs.dropdown ||This event fires immediately when the show instance method is called. |
|shown.bs.dropdown ||This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). |
|hide.bs.dropdown ||This event is fired immediately when the hide instance method has been called. |
|hidden.bs.dropdown ||This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). |