Bootstrap 5 user menu dropdowns for navbar and dashboard headers. This page covers 4 patterns — basic, dark, full account panel and minimal icon variants.
Key Classes
| Class | What It Does |
|---|---|
.dropdown-menu-end | Right-aligns the dropdown |
.dropdown-divider | Horizontal separator |
data-bs-auto-close="outside" | Stays open on inside click |
.rounded-circle | Circular avatar |
margin-top:8px | Space between trigger and menu |
1. Basic Bootstrap 5 User Menu
Clean user dropdown with avatar, links and sign-out option.
2. Bootstrap 5 Dark User Menu
Dark themed user menu — for dark admin panel navbars.
3. Bootstrap 5 Full Account Panel Dropdown
Wider user menu with user stats, quick actions and plan info.
4. Bootstrap 5 Minimal Icon User Menu
Icon-only trigger with compact dropdown — for dense admin navbars.
Frequently Asked Questions
Add a dropdown in the navbar with the user avatar as the trigger button. Use data-bs-toggle='dropdown' and dropdown-menu-end to right-align the menu. Include a header with user name/email, nav links, and a sign-out item separated by a dropdown-divider.
Add dropdown-menu-end to the ul.dropdown-menu: <ul class='dropdown-menu dropdown-menu-end'>. This aligns the right edge of the dropdown to the right edge of the trigger button. Useful for user menus in the top-right of navbars.
Use a rounded-circle div with the user's initials as a fallback: <div class='rounded-circle text-white d-flex align-items-center justify-content-center'>GS</div>. If you have a profile image, use img with border-radius:50% and object-fit:cover. Show initials if image fails to load.
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.