A dropdown menu is a collapsible list that lets users select a single option from a set of predefined choices.
| Class / Attribute | Use / Meaning |
|---|---|
.dropdown |
Wrapper element that groups the dropdown toggle and menu together |
.dropdown-toggle |
Applied to a button or link to make it trigger (toggle) the dropdown menu |
data-bs-toggle="dropdown" |
Bootstrap attribute that enables the toggle functionality on click |
.dropdown-menu |
The container that holds the list of dropdown items |
.dropdown-item |
Used for individual items inside the dropdown menu (<a> or <button>) |
.dropdown-divider |
Adds a horizontal line (divider) between dropdown items |
The .dropdown-divider class adds a thin horizontal line to visually separate items within a dropdown menu.
The .dropdown-header class is used to insert a heading label within a dropdown menu.
| Class Name | Use / Meaning |
|---|---|
.dropdown-header |
Adds a non-clickable heading inside a dropdown menu to label or group related menu items. |
Use the .active class to highlight a dropdown item with a blue background
Apply the .disabled class to make a dropdown item inactive. It will appear light grey and show a "not-allowed" cursor on hover.
| Class | Description |
|---|---|
.dropdown-item.active |
Highlights the dropdown item with a blue background to indicate it's currently selected or active. |
.dropdown-item.disabled |
Displays the item in a faded (greyed-out) style and makes it unclickable for users. |
To create a dropdown that opens to the right or left, add the .dropend or .dropstart class to the dropdown. The arrow icon is added automatically.
| Class | Description |
|---|---|
.dropend |
Makes the dropdown menu open to the right of the toggle button. Useful for side menus or nested dropdowns. |
.dropstart |
Makes the dropdown menu open to the left of the toggle button. Ideal for menus near the right edge of the screen. |
To align the dropdown menu to the right, apply the .dropdown-menu-end class to the element that has the .dropdown-menu class
| Class | Description |
|---|---|
.dropdown-menu-end |
Aligns the dropdown menu to the right end of its parent element, instead of the default left alignment. |
To make the dropdown menu open upward instead of downward, replace the class "dropdown" with "dropup" on the <div> element
The .dropdown-item-text class is used to insert plain text in a dropdown or to apply default link styling when used on links.