Bootstrap 5 dropdowns display context menus and navigation panels triggered by a button click. This page covers 4 dropdown patterns — basic, split button, directions and icon-rich dropdowns.
Quick Setup
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Key Classes Reference
| Class | What It Does |
|---|---|
.dropdown | Wrapper with relative positioning |
.dropdown-toggle | The trigger button |
.dropdown-menu | The dropdown panel |
.dropdown-item | Each menu option |
.dropdown-divider | Horizontal separator |
.dropdown-header | Non-clickable section label |
.dropup / .dropend / .dropstart | Direction variants |
.dropdown-menu-end | Right-aligns the menu |
.dropdown-menu-dark | Dark themed dropdown |
1. Basic Bootstrap 5 Dropdowns
Standard dropdown buttons in different color variants with dividers and disabled items.
2. Bootstrap 5 Split Button Dropdown
Button with a separate dropdown toggle — clicking the main button performs a primary action.
3. Bootstrap 5 Dropdown Directions
Dropdowns opening in all four directions: down (default), up, start and end.
4. Bootstrap 5 Dropdown with Icons and Rich Content
Dropdown with icons, badges, form inputs and custom header — common in admin nav menus.
Frequently Asked Questions
Create a Dropdown instance and call show: new bootstrap.Dropdown(document.getElementById('myDropdown')).show(). To close: bootstrap.Dropdown.getInstance(element).hide(). To toggle: bootstrap.Dropdown.getInstance(element).toggle().
Add dropdown-menu-end to the ul.dropdown-menu element: <ul class='dropdown-menu dropdown-menu-end'>. This aligns the right edge of the dropdown with the right edge of the toggle button. Use dropdown-menu-lg-end to only right-align at the lg breakpoint.
Add CSS: .dropdown:hover .dropdown-menu { display: block; margin-top: 0; }. Note: hover dropdowns are not accessible for keyboard users. Consider adding focus handling too. For production use JavaScript to toggle the show class on mouseenter/mouseleave.
Bootstrap 5 dropdowns close automatically when clicking outside — this is the default behavior. If yours isn't closing, make sure you have bootstrap.bundle.min.js loaded and the dropdown trigger has data-bs-toggle='dropdown'.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.