Bootstrap 5 Dropdowns
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Example
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Link 1</a></li>
<li><a
class="dropdown-item" href="#">Link 2</a></li>
<li><a
class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
Try it Yourself »
Example Explained
The .dropdown
class indicates a dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle
and
the
data-bs-toggle="dropdown"
attribute.
Add the .dropdown-menu
class to a container
element, like <div>
or <ul>
, to actually build the dropdown menu. Then add the
.dropdown-item
class to each element (links or
buttons) inside the dropdown menu.
Dropdown Divider
The .dropdown-divider
class is used to separate links inside the dropdown menu with a thin horizontal border:
Dropdown Header
The .dropdown-header
class is used to add headers inside the dropdown menu:
Disable and Active items
Highlight a specific dropdown item with the .active
class (adds a blue background color).
To disable an item in the dropdown menu, use the .disabled
class (gets a light-grey text color and a "no-parking-sign" icon on hover):
Example
<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a
class="dropdown-item active" href="#">Active</a></li>
<li><a
class="dropdown-item disabled" href="#">Disabled</a></li>
Try it Yourself »
Dropdown Position
You can also create a "dropend" or "dropstart" menu, by adding the
.dropend
or .dropstart
class to the dropdown element. Note that the caret/arrow is added automatically:
Dropdown Menu Right
To right-align the dropdown menu, add the .dropdown-menu-end
class to the element
with .dropdown-menu:
Dropup
If you want the dropdown menu to expand upwards instead of downwards, change
the <div> element with class="dropdown" to "dropup"
:
Dropdown Text
The .dropdown-item-text
class is used to add plain text to
a dropdown item, or used on links for default link styling.
Example
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link
2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item-text" href="#">Text Link</a></li>
<li><span class="dropdown-item-text">Just Text</span></li>
</ul>
Try it Yourself »
Grouped Buttons with a Dropdown
Example
<div class="btn-group">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn
btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">Sony</button>
<ul
class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Tablet</a></li>
<li><a class="dropdown-item" href="#">Smartphone</a></li>
</ul>
</div>
</div>
Try it Yourself »
Vertical Button Group w/ Dropdown
Example
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn
btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">Sony</button>
<ul
class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Tablet</a></li>
<li><a class="dropdown-item" href="#">Smartphone</a></li>
</ul>
</div>
</div>
Try it Yourself »