Add data-toggle="dropdown" to a link or button to toggle a dropdown.
<div class="dropdown">
<a class="dropdown-toggle" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
To keep URLs intact, use the data-target attribute instead of href="#".
<div class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
Call the dropdowns via JavaScript:
query('.dropdown-toggle').dropdown()| Event | Description |
|---|---|
| select | Fires when an item from the associated list is selected. Returns event with selectedItem that corresponds to the selected li node |
Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum cursus sapien et pellentesque. Phasellus egestas eros eu nulla consequat et vehicula nisl hendrerit. Cras laoreet magna et arcu consequat a iaculis risus condimentum. Aenean sit amet posuere tellus. Integer ac nunc eget odio dictum rutrum laoreet a velit. Sed eget sapien a mi luctus volutpat. Proin dignissim congue lectus, quis fermentum est aliquet nec.
Quisque in erat at lorem pharetra tincidunt. Aliquam erat volutpat. Vestibulum cursus commodo imperdiet. Curabitur sit amet auctor lectus. Vivamus nec vehicula tortor. Maecenas sodales velit in metus tempor in pharetra arcu consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas at nibh ac urna vestibulum hendrerit.