Bootstrap 5 Dropdowns
Add dropdown menus without writing any JavaScript.
Bootstrap includes a component for adding dropdown menus. The JavaScript is included with the default Bootstrap JS file and you can use it simply by adding the CSS classes — no further JavaScript required.
Example
Here's an example of a Bootstrap 5 dropdown:
Dropup Menu
You can reverse the dropdown so that it becomes a "dropup" menu.
To do this, use .dropup
instead of .dropdown
on the parent element.
Align Right
You can add Bootstrap's .dropdown-menu-end
class to the .dropdown-menu
class to align the menu to the right of its parent.
Menu Headers
Add a header to your dropdown menu by adding a applying Bootstrap's .dropdown-header
class to a heading element (<h1>
- <h6>
).
Dividers
Add dividers to your dropdown menu by adding a applying Bootstrap's .dropdown-divider
class to an <hr>
element.
Disabled Menu Items
Disable a menu item by applying Bootstrap's .disabled
class.
Split Dropdowns
You can also create split dropdown menus with button groups.
More on Dropdowns
See the Bootstrap documentation for more on dropdowns.