Dropdowns in Bootstrap 5
Bootstrap Dropdowns
Dropdowns are a commonly used user interface element in web development that allow users to select an option from a list.
Bootstrap provides a convenient and easy way to create dropdowns using its built-in dropdown component.
As an example:
Editor
In this example:
- We have created a dropdown using the
<div>
element with the class dropdown. - Inside the div, we have added a button element with the classes btn
btn-secondary
dropdown-toggle
to specify that it is a dropdown button. - We have also added the
data-bs-toggle="dropdown"
attribute to specify that it is a dropdown. - Inside the dropdown, we have added a div with the class
dropdown-menu
attribute to specify that it is a dropdown menu. - This div contains a list of options, which are implemented as
<a>
elements with the classdropdown-item
.
Dropdown Divider
In Bootstrap, you can add a divider between items in a dropdown menu using the dropdown-divider
class.
As an example:
Editor
Dropdown Header
The dropdown-header
class that can be used to add a header to a dropdown menu.
As an example:
Editor
In this example:
- We have added a header with the text
"Header Text"
to the dropdown menu using thedropdown-header
class. - The header is enclosed in an
li
element to ensure it appears correctly in the dropdown menu. - We have also added a horizontal divider using the
dropdown-divider
class to separate Option 2 and Option 3.
Disable and Active items
To disable or activate items in a Bootstrap dropdown menu, you can add the disabled
or active
class to the corresponding a
or button element within the dropdown menu.
As an example:
<div class="dropdown">
<button
class="btn btn-secondary 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="#">Regular Item</a></li>
<li><a class="dropdown-item active" href="#">Active Item</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled Item</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Regular Item 2</a></li>
</ul>
</div>
In this example:
- We have added the
active
class to the second item in the dropdown menu to make it the active item. - We have also added the
disabled
class to the third item in the dropdown menu to disable it.
Dropdown Position
By default, Bootstrap dropdown menus are positioned relative to their parent element. However, you can also position dropdown menus using the data-bs-placement
attribute.
Here are the possible values for the data-bs-placement attribute:
top
: Positions the dropdown menu above the parent elementbottom
: Positions the dropdown menu below the parent elementstart
: Positions the dropdown menu to the left of the parent element (for left-to-right languages)end
: Positions the dropdown menu to the right of the parent element (for left-to-right languages)
As an example:
<div class="dropdown">
<button
class="btn btn-secondary 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"
data-bs-placement="top"
>
<li><a class="dropdown-item" href="#">Option 1</a></li>
<li><a class="dropdown-item" href="#">Option 2</a></li>
<li><a class="dropdown-item" href="#">Option 3</a></li>
</ul>
</div>
In this example:
- We have positioned the dropdown menu above the parent element by setting the
data-bs-placement
attribute to top.
If there is not enough space for the dropdown menu to be displayed in the specified position, it will be repositioned to fit within the viewport.
Dropdown Text
For using text in dropdown you can use .dropdown-item-text
which is a class in Bootstrap 5 that can be used to style the text within dropdown items. It is used as a child of the .dropdown-item
class.
As a example:
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown Button Text
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Option 1</a></li>
<li>
<a class="dropdown-item" href="#">Option 2</a>
<p class="dropdown-item-text">Additional text</p>
</li>
<li><a class="dropdown-item" href="#">Option 3</a></li>
</ul>
</div>
In this example:
- The
.dropdown-item-text
class is used within the second dropdown item to add some additional text below the main text of the dropdown item.