Bootstrap 5 Mega Menu
A Mega Menu is an expanded dropdown navigation panel that reveals multiple columns of links, images, or calls-to-action in a full-width or wide overlay when a top-level nav item is triggered. Built on top of Bootstrap 5's dropdown system, it replaces single-column dropdowns with a structured, multi-column layout using the grid system. Use it when your site has deep or broad content hierarchies (such as e-commerce categories, SaaS feature sets, or documentation portals) where a standard dropdown would become an unmanageable scroll of links.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- E-commerce stores with multiple product categories (e.g., Electronics → Laptops, Monitors, Accessories) where showing subcategories and featured products side-by-side reduces navigation clicks
- SaaS platforms that need to surface product features, use-case pages, and pricing tiers under a single 'Product' nav item without burying them in nested dropdowns
- University or government websites with department hierarchies where users need to see all major sections at a glance to orient themselves quickly
- Media and publishing sites that surface editorial sections (News, Opinion, Culture) alongside trending articles or newsletter sign-ups within the same nav panel
Variants and classes
| Variant | Description and classes |
|---|---|
| Full-width dropdown | Menu spans the navbar instead of the toggle.dropdown position-static + dropdown-menu w-100 |
| Columns | Links grouped into columns.row g-4 + col-md-4 |
| Section headers | Small uppercase label per column.dropdown-header text-uppercase |
| Featured panel | Promo block beside the links.bg-body-tertiary rounded p-3 |
Code example
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Acme Corp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav me-auto">
<!-- Mega Menu Item -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Products
</a>
<div class="dropdown-menu p-4" style="min-width: 640px;">
<div class="row g-4">
<div class="col-md-4">
<h6 class="dropdown-header text-uppercase text-muted small">Software</h6>
<a class="dropdown-item" href="#">Project Manager</a>
<a class="dropdown-item" href="#">Analytics Dashboard</a>
<a class="dropdown-item" href="#">Team Collaboration</a>
</div>
<div class="col-md-4">
<h6 class="dropdown-header text-uppercase text-muted small">Integrations</h6>
<a class="dropdown-item" href="#">Slack Integration</a>
<a class="dropdown-item" href="#">GitHub Sync</a>
<a class="dropdown-item" href="#">Zapier Connector</a>
</div>
<div class="col-md-4 bg-light rounded p-3">
<h6 class="fw-semibold mb-2">New: AI Reports</h6>
<p class="small text-muted mb-2">Auto-generate executive summaries from your project data.</p>
<a href="#" class="btn btn-sm btn-primary">Learn more</a>
</div>
</div>
</div>
</li>
<!-- Standard Nav Item -->
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>Live examples
Basic Mega Menu
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Canvas Builder generated mega menu with custom colours
- Mega Menu with interactive states
- Responsive mega menu for all screen sizes
Best practices
Use data-bs-auto-close="outside" to keep the panel open
Add data-bs-auto-close="outside" to your dropdown toggle so users can click links inside the mega menu without the panel closing prematurely, essential when the menu contains interactive elements like buttons or forms.
Anchor the dropdown to the full container, not the trigger element
To make the dropdown span the full navbar width, position the parent <li> as position: static and set position: absolute; left: 0; right: 0; on the .dropdown-menu. This overrides Bootstrap's default trigger-relative positioning.
Collapse mega menu columns on mobile with responsive utilities
Use col-12 col-md-4 on your column divs so each section stacks vertically on small screens, preventing horizontal overflow without requiring a separate mobile navigation implementation.
Limit mega menus to one level of hierarchy
Nesting dropdowns inside a mega menu creates usability problems on touch devices and screen readers, if you need deeper navigation, link column headings to category landing pages instead of triggering further dropdowns.
FAQ
Does Bootstrap 5 have a built-in mega menu component?
.dropdown-menu with Bootstrap's .row and .col-* classes to create multi-column layouts, and override the dropdown's positioning with CSS to achieve full-width or wide-panel behaviour. No additional JavaScript library is required beyond Bootstrap's own bundle.How do I make the mega menu panel span the full width of the page?
position: static on the parent <li class="nav-item dropdown"> and then apply position: absolute; left: 0; right: 0; width: 100%; to the .dropdown-menu element. If your navbar uses a .container, you may also need to set position: relative on the .navbar element itself so the absolute positioning is scoped correctly. You can do this inline or via a custom CSS class like .mega-menu { position: absolute; left: 0; right: 0; }.