Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Read
the official
Bootstrap Documentation for a full list of
instructions
and other options.
Any single .btn
can be turned into a dropdown toggle with some markup changes. .dropdown
or .btn-group
class used as wrapper of dropdown toggle and dropdown menu.
<!-- Dropdown -->
<div class="btn-group me-4">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</ul>
</div>
<!-- Dropdown with Icon -->
<div class="btn-group me-4">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonIcon" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ri-menu-line me-1"></i> Dropdown with Icon
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonIcon">
<li><a class="dropdown-item d-flex align-items-center" href="javascript:void(0);"><i class="ri-arrow-right-s-line"></i> Action</a></li>
<li><a class="dropdown-item d-flex align-items-center" href="javascript:void(0);"><i class="ri-arrow-right-s-line"></i> Another action</a></li>
<li><a class="dropdown-item d-flex align-items-center" href="javascript:void(0);"><i class="ri-arrow-right-s-line"></i> Something else here</a></li>
</ul>
</div>
<!-- Icon Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-primary btn-icon rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
<i class="ri-more-2-line"></i>
</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>
Class | Value |
---|---|
class="btn btn-{value} dropdown-toggle"
|
primary | secondary | success | danger | warning | info | dark |
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.
<!-- split primary button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">Split Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" 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="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>
Use class .hide-arrow
to hide dropdown arrow.
<!-- hidden arrow -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">Hidden Arrow</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>
You need to include below JS file for dropdown to work on hover.
<script src="assets/vendor/js/dropdown-hover.js"></script>
Use a data attribute data-trigger="hover"
to work dropdown on hover.
<!-- On hover dropdown button -->
<div class="btn-group" id="hover-dropdown-demo">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-trigger="hover">Hover</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>
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent.
Use .dropdown-menu-end
class with .dropdown-menu
to right align the dropdown menu. Use .dropdown-menu-start
class with .dropdown-menu
to left align the dropdown menu.
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right aligned dropdown menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<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>
If you want to use responsive alignment, disable dynamic positioning by adding the
data-bs-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|xxl}-end
.
To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-end
and .dropdown-menu-{sm|md|lg|xl|xxl}-start
.
<!-- Left-aligned but right in large screen -->
<div class="btn-group me-4">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<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>
<!-- Right-aligned but left in large screen -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<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>
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<!-- Extra Large -->
<div class="btn-group">
<button class="btn btn-primary btn-xl dropdown-toggle" type="button" data-bs-toggle="dropdown">Extra large</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>
<!-- Large -->
<div class="btn-group">
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown">Large</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>
<!-- Default -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Default</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>
<!-- Small -->
<div class="btn-group">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Small</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>
<!-- Extra Small -->
<div class="btn-group">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-bs-toggle="dropdown">Extra small</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>
Class | Value |
---|---|
class="btn btn-primary btn-{value}"
|
xl | lg | sm | xs |
Default dropdown menus trigger below to the parent element.
Trigger dropdown menus above elements by adding .dropup
to the parent element.
Trigger dropdown menus at the right of the elements by adding .dropend
to the parent element.
Trigger dropdown menus at the left of the elements by adding .dropstart
to the parent element.
<!-- Dropdown button -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</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>
<!-- Dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</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>
<!-- Dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropend
</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>
<!-- Dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropstart
</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>
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.
<!-- Dropdown with button options -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<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.
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></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>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
Add .active
class to items in the dropdown to style them as active.
<!-- Dropdown with active item -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item active" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
Add .disabled
class to items in the dropdown to style them as disabled.
<!-- Dropdown with disabled item -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item disabled" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
Add a header to label sections of actions in any dropdown menu.
<!-- Menu content Headers -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li>
<h6 class="dropdown-header">Dropdown header</h6>
</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>
Separate groups of related menu items with a divider.
<!-- Menu content Dividers -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</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>
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.
Some example text that's free-flowing within the dropdown menu.
And this is more example text.
<!-- Menu content text -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu p-6 text-muted" style="max-width: 200px;">
<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>
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="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<form class="px-4 py-4">
<div class="form-floating form-floating-outline mb-6">
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
<label for="exampleDropdownFormEmail1">Email address</label>
</div>
<div class="form-floating form-floating-outline mb-6">
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
<label for="exampleDropdownFormPassword1">Password</label>
</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="button" class="btn btn-primary">Sign in</button>
</form>
<hr class="dropdown-divider">
<a class="dropdown-item" href="javascript:void(0)">New around here? Sign up</a>
<a class="dropdown-item" href="javascript:void(0)">Forgot password?</a>
</div>
</div>
Use data-bs-offset
or data-bs-reference
to change the location of the dropdown.
<div class="d-flex">
<!-- Offset -->
<div class="btn-group me-1">
<button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<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>
</ul>
</div>
<!-- Reference -->
<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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<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>
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.
<!-- Default dropdown -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
<!-- Clickable outside -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
<!-- Clickable inside -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
<!-- Manual close -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>