1 <div class="bs-docs-section">
2 <h1 id="dropdowns" class="page-header">Dropdowns <small>dropdown.js</small></h1>
4 <h2 id="dropdowns-examples">Examples</h2>
5 <p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
7 <h3>Within a navbar</h3>
8 <div class="bs-example">
9 <nav id="navbar-example" class="navbar navbar-default navbar-static">
10 <div class="container-fluid">
11 <div class="navbar-header">
12 <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
13 <span class="sr-only">Toggle navigation</span>
14 <span class="icon-bar"></span>
15 <span class="icon-bar"></span>
16 <span class="icon-bar"></span>
18 <a class="navbar-brand" href="#">Project Name</a>
20 <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
21 <ul class="nav navbar-nav">
23 <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
25 <span class="caret"></span>
27 <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
28 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
29 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
30 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
31 <li role="presentation" class="divider"></li>
32 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
36 <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
38 <span class="caret"></span>
40 <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
41 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
42 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
43 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
44 <li role="presentation" class="divider"></li>
45 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
49 <ul class="nav navbar-nav navbar-right">
50 <li id="fat-menu" class="dropdown">
51 <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
53 <span class="caret"></span>
55 <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
56 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
57 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
58 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
59 <li role="presentation" class="divider"></li>
60 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
64 </div><!-- /.nav-collapse -->
65 </div><!-- /.container-fluid -->
66 </nav> <!-- /navbar-example -->
67 </div> <!-- /example -->
70 <div class="bs-example">
71 <ul class="nav nav-pills" role="tablist">
72 <li role="presentation" class="active"><a href="#">Regular link</a></li>
73 <li role="presentation" class="dropdown">
74 <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
76 <span class="caret"></span>
78 <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
79 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
80 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
81 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
82 <li role="presentation" class="divider"></li>
83 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
86 <li role="presentation" class="dropdown">
87 <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
89 <span class="caret"></span>
91 <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
92 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
93 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
94 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
95 <li role="presentation" class="divider"></li>
96 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
99 <li role="presentation" class="dropdown">
100 <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
102 <span class="caret"></span>
104 <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
105 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
106 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
107 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
108 <li role="presentation" class="divider"></li>
109 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
112 </ul> <!-- /pills -->
113 </div> <!-- /example -->
116 <h2 id="dropdowns-usage">Usage</h2>
117 <p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item.</p>
118 <p>On mobile devices, opening a dropdown adds a <code>.dropdown-backdrop</code> as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. <strong class="text-danger">This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.</strong></p>
119 <p>Note: The <code>data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.</p>
121 <h3>Via data attributes</h3>
122 <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
124 <div class="dropdown">
125 <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
127 <span class="caret"></span>
129 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
134 <p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
136 <div class="dropdown">
137 <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
139 <span class="caret"></span>
142 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
148 <h3>Via JavaScript</h3>
149 <p>Call the dropdowns via JavaScript:</p>
151 $('.dropdown-toggle').dropdown()
153 <div class="bs-callout bs-callout-info" id="callout-dropdowns-data-required">
154 <h4><code>data-toggle="dropdown"</code> still required</h4>
155 <p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p>
158 <h3 id="dropdowns-options">Options</h3>
161 <h3 id="dropdowns-methods">Methods</h3>
162 <h4><code>$().dropdown('toggle')</code></h4>
163 <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
165 <h3 id="dropdowns-events">Events</h3>
166 <p>All dropdown events are fired at the <code>.dropdown-menu</code>'s parent element.</p>
167 <p>All dropdown events have a <code>relatedTarget</code> property, whose value is the toggling anchor element.</p>
168 <div class="table-responsive">
169 <table class="table table-bordered table-striped bs-events-table">
178 <td>show.bs.dropdown</td>
179 <td>This event fires immediately when the show instance method is called.</td>
182 <td>shown.bs.dropdown</td>
183 <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
186 <td>hide.bs.dropdown</td>
187 <td>This event is fired immediately when the hide instance method has been called.</td>
190 <td>hidden.bs.dropdown</td>
191 <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
195 </div><!-- ./bs-table-responsive -->
197 $('#myDropdown').on('show.bs.dropdown', function () {