Dropdown
Single Button Dropdowns#
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 Dropdown -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
<!-- Link Dropdown -->
<div class="dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<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>
Single Button Variant Dropdowns #
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.
<!-- Single Button Dropdown -->
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Secondary
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Success
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Info
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Split Button Dropdowns #
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.
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
Dark Dropdowns #
Opt into darker dropdowns to match a
dark navbar or custom style by adding
.dropdown-menu-dark onto an
existing .dropdown-menu. No
changes are required to the dropdown
items.
<!-- Dark Dropdown -->
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dark Dropdown</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
Dropdown Direction #
Trigger dropdown menus above elements by
adding .dropup, dropdown
menus at the left of the elements by
adding .dropstart or
dropdown menus at the right of the
elements by adding
.dropend.
<!-- Dropdown Direction -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop Down
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop Up
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop Left
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop Right
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
Dropdown Menu Items #
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.
Add .disabled to items in
the dropdown to
style them as disabled.
<ul class="dropdown-menu show block position-static">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
<ul class="dropdown-menu show block position-static">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Dropdown options #
Use data-bs-offset or
data-bs-reference to change
the location of the dropdown.
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Auto close behavior #
By default, the dropdown menu is closed
when clicking inside or outside the
dropdown menu. You can use the
autoClose option to change
this behavior of the dropdown.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
Menu Content #
Add a header to label sections of actions in any dropdown menu.
Separate groups of related menu items with a divider.
Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
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">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Header
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-header">Dropdown header</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Divider
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Text
</button>
<div class="dropdown-menu dropdown-lg p-3">
<p>Some example text that's free-flowing within the dropdown menu.</p>
<p class="mb-0">And this is more example text.</p>
</div>
</div>
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu Forms
</button>
<form class="dropdown-menu dropdown-lg p-3">
<div class="mb-3">
<label class="form-label" for="exampleDropdownFormEmail">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com">
</div>
<div class="mb-3">
<label class="form-label" for="exampleDropdownFormPassword">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password">
</div>
<div class="mb-3">
<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>