Nearby lessons
19 of 39📋 BS5 Dropdowns
📌 What Are Bootstrap 5 Dropdowns?
Dropdowns show a menu when the user clicks a trigger (usually a button). Use .dropdown on a wrapper, a button with .dropdown-toggle and data-bs-toggle="dropdown", and a .dropdown-menu containing .dropdown-item links. Requires Bootstrap’s JavaScript.
📋 Basic Dropdown (.dropdown, .dropdown-toggle, .dropdown-menu, .dropdown-item)
.dropdown – wrapper. .dropdown-toggle – on the button that opens the menu. data-bs-toggle="dropdown" – enables the behavior. .dropdown-menu – the panel that appears. .dropdown-item – each link inside the menu.
➖ Divider and Header (.dropdown-divider, .dropdown-header)
.dropdown-divider – horizontal line between items (use <hr class="dropdown-divider">). .dropdown-header – non-clickable heading inside the menu (e.g. <h6 class="dropdown-header">).
⬆️ Dropup, Dropend, Dropstart (.dropup, .dropend, .dropstart)
.dropup – menu opens above the button. .dropend – menu opens to the right. .dropstart – menu opens to the left. Add to the same element as .dropdown.
🌙 Dark Dropdown (.dropdown-menu-dark)
.dropdown-menu-dark – dark background for the menu. Use with .dropdown-menu. Add .text-white to items if needed for contrast.
✅ Dropdown Best Practices
- Use data-bs-toggle="dropdown" on the trigger and include Bootstrap JS.
- Use .dropdown-header and .dropdown-divider to group items.
- Use .dropdown-menu-dark for dark themes.