Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
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. The examples shown here use semantic <ul>
elements where appropriate, but custom markup is supported.
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:
<div class="dropdown">
<button class="btn btn-primary" id="dropdownMenuButton" data-toggle="dropdown" type="button" aria-expanded="false">Dropdown button</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
And with <a>
elements:
<div class="dropdown">
<a class="btn btn-primary" id="dropdownMenuLink" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
The best part is you can do this with any button variant, too:
<div class="dropdown">
<button class="btn btn-danger" data-toggle="dropdown" type="button" aria-expanded="false">Dropdown 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>
Trigger dropdown menus above elements by adding .dropup
to the parent element.
<div class="dropup">
<button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Dropup</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Trigger dropdown menus at the right of the elements by adding .dropright
to the parent element.
<div class="dropright">
<button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Dropright</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Trigger dropdown menus at the left of the elements by adding .dropleft
to the parent element.
<div class="dropleft">
<button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Dropleft</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Historically dropdown menu contents had to be links, but that’s no longer the case. Now you can optionally use <button>
elements in your dropdowns instead of just <a>
s.
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown" type="button" 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>
Add .active
to items in the dropdown to style them as active. To convey the active state to assistive technologies, use the aria-current
attribute — using the page
value for the current page, or true
for the current item in a set.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#" aria-current="true">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Add .disabled
to items in the dropdown to style them as disabled.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right
to a .dropdown-menu
to right align the dropdown menu.
Heads up! Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
<div class="dropdown mb-3">
<button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Right-aligned menu</button>
<div class="dropdown-menu dropdown-menu-right">
<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>
If you want to use responsive alignment, disable dynamic positioning by adding the data-display="static"
attribute and use the responsive variation classes.
To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-right
.
<div class="dropdown d-inline-flex">
<button class="btn btn-primary" data-toggle="dropdown" data-display="static" type="button" aria-expanded="false">Left-aligned but right aligned when large screen</button>
<div class="dropdown-menu dropdown-menu-lg-right">
<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>
To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-right
and .dropdown-menu{-sm|-md|-lg|-xl}-left
.
<div class="dropdown d-inline-flex">
<button class="btn btn-primary" data-toggle="dropdown" data-display="static" type="button" aria-expanded="false">Right-aligned but left aligned when large screen</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<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>
Note that you don’t need to add a data-display="static"
attribute to dropdown buttons in navbars, since Popper.js isn’t used in navbars.
Use data-offset
or data-reference
to change the location of the dropdown.
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown" data-offset="16, 16" type="button" aria-expanded="false">Offset</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>
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
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 emptymouseover
handlers are removed.
Add data-toggle="dropdown"
to a link or button to toggle a dropdown.
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown" type="button" aria-expanded="false">Dropdown trigger</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>