Bootstrap 5 Navbar with Dropdown

Bootstrap 5 navbar dropdowns add multi-level navigation menus to navbars. This page covers 5 dropdown patterns — single, multiple, icons, dividers and mega menu — each with copy-paste HTML.

Quick Setup

Navbar dropdowns require Bootstrap 5 JS:

<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`	Marks nav-item as dropdown container
`.dropdown-toggle`	The clickable trigger link
`.dropdown-menu`	The dropdown panel
`.dropdown-item`	Each option inside the dropdown
`.dropdown-divider`	Horizontal separator line
`.dropdown-header`	Non-clickable section label
`.dropdown-menu-end`	Right-aligns the dropdown
`.dropdown-menu-dark`	Dark themed dropdown
`data-bs-toggle="dropdown"`	Activates dropdown on click

1. Bootstrap 5 Navbar Single Dropdown

A navbar with one dropdown menu. Uses dropdown-toggle and dropdown-menu classes.

2. Bootstrap 5 Navbar with Multiple Dropdowns

Navbar with multiple dropdown menus and a CTA button on the right.

3. Bootstrap 5 Navbar Dropdown with Icons

Dropdown menu items with Bootstrap Icons for a richer, more visual navigation.

4. Bootstrap 5 Dropdown with Dividers and Headers

Organized dropdown with section headers and dividers to group related items.

5. Bootstrap 5 Mega Menu Navbar

A wide multi-column dropdown mega menu. Uses position-static on the nav-item and w-100 on the dropdown.

Frequently Asked Questions

How do I make a Bootstrap 5 navbar dropdown open on hover?▲

Add CSS to show the dropdown on hover: .navbar .nav-item:hover .dropdown-menu { display: block; margin-top: 0; }. Or use JavaScript to add/remove show class on mouseenter/mouseleave events on .nav-item elements. Note: hover dropdowns are not accessible for keyboard users.

How do I right-align a Bootstrap 5 navbar dropdown?▼

Add dropdown-menu-end to the ul.dropdown-menu element: <ul class='dropdown-menu dropdown-menu-end'>. This aligns the dropdown to the right edge of the toggle button. Use dropdown-menu-lg-end to only right-align at the lg breakpoint.

How do I create a Bootstrap 5 mega menu?▼

Add position-static to the nav-item and w-100 to the dropdown-menu. Set left:0 and right:0 on the dropdown. Use Bootstrap's row and col system inside the dropdown for multi-column layout. The navbar must have position-relative for the mega menu to span full width.

How do I close Bootstrap 5 navbar dropdown on mobile?▼

On mobile the navbar collapses and dropdowns behave as accordion-style expandables. They close when clicking a link if you add data-bs-toggle='collapse' and data-bs-target to each dropdown-item. Or close the entire navbar collapse by calling bootstrap.Collapse.getInstance(navbar).hide().

How do I add a dark theme to Bootstrap 5 navbar dropdown?▼

Add dropdown-menu-dark to the ul.dropdown-menu element: <ul class='dropdown-menu dropdown-menu-dark'>. This inverts the dropdown colors to white text on dark background. For the entire navbar use data-bs-theme='dark' on the nav element.

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 →