
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
.dropdown
, or another element that declares
position: relative;
.
Dropdowns can be triggered from <a>
or <button>
elements
to better fit your potential needs.
Any single .btn
can be turned into a dropdown toggle with some
markup changes. Here’s how you can put them to work with either
<button>
elements:
<button class="btn btn-primary dropdown dropdown-toggle" type="button" id="703748" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Button <div class="dropdown-menu" aria-labelledby="703748"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </button>
Similarly, create split button dropdowns with virtually the same markup as single button
dropdowns, but with the addition of .dropdown-toggle-split
for proper
spacing around
the dropdown caret.
We use this extra class to reduce the horizontal padding
on either side of
the caret by 25% and
remove the margin-left
that’s added for regular
button dropdowns. Those extra changes keep the caret centered in the split button and
provide a more appropriately sized hit area next to the main button.
<div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<div class="dropdown d-inline"> <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-lg btn-primary">Action</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<div class="dropdown d-inline"> <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-lg btn-primary">Action</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>
Trigger dropdown menus above elements by adding .dropup
to the parent
element.
<!-- Default dropup button --> <div class="btn-group dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <!-- Split dropup button --> <div class="btn-group dropup"> <button type="button" class="btn btn-primary"> Split dropup </button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>
Trigger dropdown menus at the right of the elements by adding .dropright
to
the parent element.
<!-- Default dropright button --> <div class="btn-group dropright"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropright </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <!-- Split dropright button --> <div class="btn-group dropright"> <button type="button" class="btn btn-primary"> Split dropup </button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>
Trigger dropdown menus at the right of the elements by adding .dropleft
to
the parent element.
<!-- Default dropleft button --> <div class="btn-group dropleft"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> dropleft </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <!-- Split dropleft button --> <div class="btn-group"> <div class="btn-group dropleft" role="group"> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropleft</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <button type="button" class="btn btn-primary"> Split dropleft </button> </div>
Historically dropdown menu contents had to be links, but that’s no longer the
case with v4. Now you can optionally use <button>
elements in your
dropdowns instead of just <a>
s.
You can also create non-interactive dropdown items with
.dropdown-item-text
. Feel free to style further with custom CSS or text
utilities.
<div class="dropdown-menu"> <span class="dropdown-item-text">Dropdown item text</span> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div>
Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
<div class="dropdown-menu"> <form class="px-4 py-3"> <div class="mb-15"> <label for="exampleDropdownFormEmail1">Email address</label> <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com"> </div> <div class="mb-15"> <label for="exampleDropdownFormPassword1">Password</label> <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> </div> <div class="mb-15"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="dropdownCheck"> <label class="form-check-label" for="dropdownCheck"> Remember me </label> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">New around here? Sign up</a> <a class="dropdown-item" href="#">Forgot password?</a> </div>
Use data-offset
or data-reference
to change the location of the
dropdown.
<div class="d-flex"> <div class="dropdown mr-1"> <button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20"> Offset </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset" style=""> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Reference</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuReference" style=""> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div>
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown
menus) by toggling the .show
class on the parent list item. 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.
On touch-enabled devices, opening a dropdown adds empty ($.noop
)
mouseover
handlers to the immediate children of the
<body>
element. This admittedly ugly hack is necessary to work
around a quirk
in iOS’ event delegation, which would otherwise prevent a tap anywhere
outside of the dropdown from triggering the code that closes the dropdown. Once the
dropdown is closed, these additional empty mouseover
handlers are
removed.
Add data-toggle="dropdown"
to a link or button to toggle a dropdown.
<div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown trigger </button> <div class="dropdown-menu" aria-labelledby="dLabel"> ... </div> </div>
Call the dropdowns via JavaScript:
$('.dropdown-toggle').dropdown()