BS5 Dropdowns
Bootstrap 5 Dropdowns
A dropdown menu is a toggleable menu that lets the user select one item from a list that has already been predetermined:
==== DROPDOWN BUTTON MUKAVU ====
Example
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</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>
Example Explained
A dropdown menu is indicated by the .dropdown class.
You can use a button or a link with the class of to open the dropdown menu .dropdown-toggle and the attribute data-toggle=”dropdown”
To create the dropdown menu, add the .dropdown-menu class to a <div> element. Next, give each element (button or link) inside the dropdown menu the .dropdown-item class.
Dropdown Divider
==== DROPDOWN BUTTON MUKAVU ====
To add a thin horizontal border to links inside the dropdown menu, use the .dropdown-divider class:
Example
<div class="dropdown-divider"></div>
Dropdown Header
==== DROPDOWN BUTTON MUKAVU ====
Headers can be added to the dropdown menu using the .dropdown-header class:
Example
<div class="dropdown-header">Dropdown header 1</div>
Disable and Active items
==== DROPDOWN BUTTON MUKAVU ====
Use the .active class to draw attention to a particular dropdown item (adds a blue background color).
Utilize the .disabled class (which results in light-grey text and a “no-parking-sign” image when hovered over) to deactivate an option in the dropdown menu:
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>
Dropdown Position
==== DROPDOWN BUTTON MUKAVU ====
By giving the dropdown element the .dropright or .dropleft class, you may also make a “dropleft” or “dropright” menu. Be aware that the arrow and caret are added automatically:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Dropdown Menu Right
==== DROPDOWN BUTTON MUKAVU ====
Add the .dropdown-menu-right class to the element that has the .dropdown-menu element to align the dropdown menu to the right:
Example
<div class="dropdown-menu dropdown-menu-right">
Dropup
==== DROPDOWN BUTTON MUKAVU ====
To enable upward expansion of the dropdown menu instead of downward expansion, modify the <div> element with class=”dropdown” to “dropup“:
Example
<div class="dropup">
Dropdown Text
==== DROPDOWN BUTTON MUKAVU ====
When adding plain text to a dropdown item or applying default link styling to links, the .dropdown-item-text class is utilized.
Example
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item-text" href="#">Text Link</a>
<span class="dropdown-item-text">Just Text</span>
</div>
Grouped Buttons with a Dropdown
==== DROPDOWN BUTTON MUKAVU ====
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-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Split Button Dropdowns
==== DROPDOWN BUTTON MUKAVU ====
Example
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Vertical Button Group w/ Dropdown
==== DROPDOWN BUTTON MUKAVU ====
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-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
