HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
<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>
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 <div>
element to actually build the dropdown menu. Then add the
.dropdown-item
class to each element (links or
buttons) inside the dropdown menu.
The .dropdown-divider
class is used to separate links inside the dropdown menu with a thin horizontal border:
<li><hr class="dropdown-divider"></hr></li>
The .dropdown-header
class is used to add headers inside the dropdown menu:
<li><h5 class="dropdown-header">Dropdown header 1</h5></li>
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):
<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>
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:
<div class="dropdown dropend">
<div class="dropdown dropstart">
To right-align the dropdown menu, add the .dropdown-menu-end
class to the element
with .dropdown-menu:
<div class="dropdown-menu dropdown-menu-end">
If you want the dropdown menu to expand upwards instead of downwards, change
the <div> element with class="dropdown" to "dropup"
:
<div class="dropup">
The .dropdown-item-text
class is used to add plain text to
a dropdown item, or used on links for default link styling.
<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>
<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>
<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>