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.
Primary Class
.mega-menuCommon 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 & Classes
| Variant | Description |
|---|---|
| Mega Menu Default | Standard mega menu with Bootstrap's default styling. |
| Mega Menu Responsive | Responsive variant that adapts to different screen sizes. |
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 Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓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.