Bootstrap5 drop-down menu
The drop-down menu is switchable and is a context menu that displays links in a list format.
Example
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Light colored cards
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">link 1</a>
<a class="dropdown-item" href="#">link 2</a>
<a class="dropdown-item" href="#">link 3</a>
</div>
</div>
Case analysis
.dropdown class is used to specify a drop-down menu.
We can use a button or link to open the drop-down menu, which needs to be added .dropdown-toggle and data-toggle="dropdown" property.
<div> add on the element .dropdown-menu class to set the actual drop-down menu, and then add to the options in the drop-down menu .dropdown-item class.
The split line in the drop-down menu
.dropdown-divider class is used to create a horizontal split line in the drop-down menu
Example
<li><hrclass="dropdown-divider"></hr></li>
The title in the drop-down menu
.dropdown-header class is used to add a title to the drop-down menu
Example
<li><h5class="dropdown-header">title 1</h5></li>
Available and prohibited items in drop-down menus
.active class highlights the options of the drop-down menu (adding a blue background).
If you want to disable the drop-down menu, you can use the .disabled class.
Example
<a class="dropdown-item" href="#">General items</a>
<a class="dropdown-item active" href="#">Activate item</a>
<a class="dropdown-item disabled" href="#">Disabled items</a>
Positioning of the drop-down menu
If we want to align the drop-down menu to the right, we can use the .dropdown add after class .dropend or .dropstart class.
.dropend is right aligned. .dropstart is left aligned.
Example
<!-- right alignment -->
<div class="dropdown dropend">
...
</div>
<!-- left justifying -->
<div class="dropdown dropstart">
...
</div>
Drop-down menu pop-up direction settin
The pop-up direction of the drop-down menu is down by default, but we can also set different directions.
Specify the drop-down menu that pops up to the right
If you want the drop-down menu to pop up to the lower right, you can use the div add on the element .dropdown-menu-end class:
Example
<!-- Pull menu button in the bottom right corner-->
<div class="dropdown dropdown-menu-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown menu pops up at the bottom right corner
</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>
Specify the pull-up menu that pops up
If you want to pull up the dish and pop it up in one way, you can use the div add the “dropup” class to the element:
Example
<!-- Up menu -->
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
drop-down menu
</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>
Specify the drop-down menu that pops up to the left
If you want the drop-down menu to pop up, you can click div add on the element dropstart class:
Example
<!-- Dropdown menu on the left -->
<div class="dropstart">
Add some content to test the effect of popping up to the left.<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
drop-down menu
</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>
Drop-down menu setting text
.dropdown-item-text class can set text items in the drop-down menu
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>
Set the drop-down menu in the button group
We can add a drop-down menu to the button:
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>
Vertical button group with drop-down menu:
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>
Navigation bar case
Example
