Dropdowns
Basic Example #
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.
<div class="row g-3">
<div class="col-auto">
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="example-dropdown-menu-button-1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="example-dropdown-menu-button-1">
<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>
<div class="col-auto">
<div class="dropdown">
<div class="dropdown">
<a
class="btn btn-primary dropdown-toggle"
href="#"
role="button"
id="example-dropdown-menu-link-1"
data-bs-toggle="dropdown"
aria-expanded="false"
>Dropdown link</a
>
<ul class="dropdown-menu" aria-labelledby="example-dropdown-menu-link-1">
<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>
</div>
</div>
The best part is you can do this with any button variant, too:
<div class="row g-3">
<div class="col-auto">
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButton-primary"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton-primary">
<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>
<div class="col-auto">
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton-secondary"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton-secondary">
<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>
<div class="col-auto">
<div class="dropdown">
<button
class="btn btn-success dropdown-toggle"
type="button"
id="dropdownMenuButton-success"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton-success">
<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>
<div class="col-auto">
<div class="dropdown">
<button
class="btn btn-danger dropdown-toggle"
type="button"
id="dropdownMenuButton-danger"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton-danger">
<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>
<div class="col-auto">
<div class="dropdown">
<button
class="btn btn-warning dropdown-toggle"
type="button"
id="dropdownMenuButton-warning"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton-warning">
<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>
<div class="col-auto">
<div class="dropdown">
<button
class="btn btn-info dropdown-toggle"
type="button"
id="dropdownMenuButton-info"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton-info">
<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>
<div class="col-auto">
<div class="dropdown">
<button
class="btn btn-light dropdown-toggle"
type="button"
id="dropdownMenuButton-light"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton-light">
<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>
<div class="col-auto">
<div class="dropdown">
<button
class="btn btn-dark dropdown-toggle"
type="button"
id="dropdownMenuButton-dark"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton-dark">
<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>
</div>
Split 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="row g-3">
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button
><button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button
><button
type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-success">Action</button
><button
type="button"
class="btn btn-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
<div class="col-auto">
<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-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-warning">Action</button
><button
type="button"
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-info">Action</button
><button
type="button"
class="btn btn-info dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-light">Action</button
><button
type="button"
class="btn btn-light dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-dark">Action</button
><button
type="button"
class="btn btn-dark dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
</div>
Sizing #
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<div class="row g-3">
<div class="col-auto">
<div class="btn-group">
<button
class="btn btn-primary btn-lg dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</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>
<div class="col-auto">
<div class="btn-group">
<button class="btn btn-primary btn-lg" type="button">Split Button</button
><button
type="button"
class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
</div>
<div class="row g-3 mt-3">
<div class="col-auto">
<div class="btn-group">
<button
class="btn btn-primary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</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>
<div class="col-auto">
<div class="btn-group">
<button class="btn btn-primary" type="button">Split Button</button
><button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
</div>
<div class="row g-3 mt-3">
<div class="col-auto">
<div class="btn-group">
<button
class="btn btn-primary btn-sm dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</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>
<div class="col-auto">
<div class="btn-group">
<button class="btn btn-primary btn-sm" type="button">Split Button</button
><button
type="button"
class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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>
</ul>
</div>
</div>
</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.
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="example-dropdown-menu-button-2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</button>
<ul
class="dropdown-menu dropdown-menu-dark"
aria-labelledby="example-dropdown-menu-button-2"
>
<li><a class="dropdown-item active" 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>
Directions #
Change the display direction of the dropdown menu by adding
.dropup
,
.dropstart
,
.dropend
classes.
<div class="row g-3">
<div class="col-auto">
<div class="btn-group">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</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>
<div class="col-auto">
<div class="btn-group dropup">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</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>
</div>
<div class="row g-3 mt-3">
<div class="col-auto">
<div class="btn-group dropstart">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</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>
<div class="col-auto">
<div class="btn-group dropend">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Button
</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>
</div>
Menu Items #
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.
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="example-dropdown-menu-button-3"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="example-dropdown-menu-button-3">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
You can also create non-interactive dropdown items with
.dropdown-item-text
. Feel free to style further with custom CSS or text utilities.
<ul class="dropdown-menu max-w-15x">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<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>
Active #
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.
<ul class="dropdown-menu max-w-15x">
<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>
Disabled #
Add
.disabled
to items in the dropdown to
style them as disabled
.
<ul class="dropdown-menu max-w-15x">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li>
<a class="dropdown-item disabled" tabindex="-1" aria-disabled="true"
>Disabled link</a
>
</li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Menu Content #
Headers #
Add a header to label sections of actions in any dropdown menu.
<ul class="dropdown-menu max-w-15x">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
Dividers #
Separate groups of related menu items with a divider.
<ul class="dropdown-menu max-w-15x">
<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>
Text #
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.
<div class="dropdown-menu p-4 text-muted max-w-20x">
<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>
Forms #
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 max-w-25x">
<form class="px-5 py-4">
<div class="mb-4">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label
><input
type="email"
class="form-control"
id="exampleDropdownFormEmail1"
placeholder="email@example.com"
/>
</div>
<div class="mb-4">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label
><input
type="password"
class="form-control"
id="exampleDropdownFormPassword1"
placeholder="Password"
/>
</div>
<div class="mb-4">
<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 px-5" href="#">New around here? Sign up</a
><a class="dropdown-item px-5" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-5 max-w-25x">
<div class="mb-4">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label
><input
type="email"
class="form-control"
id="exampleDropdownFormEmail2"
placeholder="email@example.com"
/>
</div>
<div class="mb-4">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label
><input
type="password"
class="form-control"
id="exampleDropdownFormPassword2"
placeholder="Password"
/>
</div>
<div class="mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2" /><label
class="form-check-label"
for="dropdownCheck2"
>Remember me</label
>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>