Bootstrap 5

Bootstrap 5 Mega Menu

A Mega Menu is an expanded dropdown navigation panel that reveals multiple columns of links, icons, featured content, or CTAs in a single overlay — typically triggered from a top-level navbar item. Unlike a standard dropdown, it spans a significant portion of the viewport width and organises complex site architectures into scannable groups. Use it when a site has more than 7–10 destination pages under a single nav category, such as product suites, service lines, or content libraries.

Primary Class

.mega-menu

Common Use Cases

→E-commerce stores with product categories (e.g., 'Men > Tops, Bottoms, Footwear, Accessories') where users need to jump directly to a subcategory without intermediate pages
→SaaS platforms exposing multiple product modules under a single 'Products' nav item, each with a short descriptor and icon to aid recognition
→News or media publishers grouping editorial sections (Politics, Tech, Sport, Culture) with featured article thumbnails inside the dropdown panel
→Enterprise software documentation sites linking to product areas, release notes, API references, and video tutorials from a single 'Resources' nav trigger

Variants & Classes

Variant	Description	Classes
Mega Menu Default	Standard mega menu with Bootstrap's default styling.	`mega-menu`
Mega Menu Responsive	Responsive variant that adapts to different screen sizes.	`mega-menu mega-menu-responsive`

Code Example

<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom shadow-sm">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">Orbis</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 ms-auto">

        <!-- Mega Menu trigger -->
        <li class="nav-item dropdown position-static">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Products</a>
          <div class="dropdown-menu w-100 p-4 shadow">
            <div class="row g-4">

              <div class="col-lg-3">
                <h6 class="text-uppercase text-muted small fw-semibold mb-3">Analytics</h6>
                <a class="dropdown-item px-0 py-1" href="#">Dashboard Studio</a>
                <a class="dropdown-item px-0 py-1" href="#">Real-Time Reports</a>
                <a class="dropdown-item px-0 py-1" href="#">Data Exports</a>
              </div>

              <div class="col-lg-3">
                <h6 class="text-uppercase text-muted small fw-semibold mb-3">Marketing</h6>
                <a class="dropdown-item px-0 py-1" href="#">Email Campaigns</a>
                <a class="dropdown-item px-0 py-1" href="#">A/B Testing</a>
                <a class="dropdown-item px-0 py-1" href="#">Audience Segments</a>
              </div>

              <div class="col-lg-3">
                <h6 class="text-uppercase text-muted small fw-semibold mb-3">Integrations</h6>
                <a class="dropdown-item px-0 py-1" href="#">Salesforce</a>
                <a class="dropdown-item px-0 py-1" href="#">HubSpot</a>
                <a class="dropdown-item px-0 py-1" href="#">Zapier</a>
              </div>

              <div class="col-lg-3 bg-light rounded p-3">
                <h6 class="fw-semibold mb-2">What's New</h6>
                <p class="small text-muted mb-2">Orbis 4.0 ships with AI-assisted reporting and one-click Slack alerts.</p>
                <a href="#" class="btn btn-sm btn-primary">See release notes</a>
              </div>

            </div>
          </div>
        </li>

        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
        <li class="nav-item ms-2"><a class="btn btn-primary btn-sm" href="#">Start free</a></li>
      </ul>
    </div>
  </div>
</nav>

Live Examples

Basic Mega Menu

Example 1

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 position-static on the parent li to stretch the dropdown full-width

Bootstrap's dropdown positions relative to the nearest positioned ancestor. Adding `position-static` to the `<li>` and `position-relative` to the `<nav>` or its container forces the dropdown to span the full navbar width instead of floating beneath just the trigger link.

Add a featured promo column to drive conversions from navigation

Reserve the rightmost column for a highlighted card — a new feature, a free trial CTA, or a case study — using a `bg-light` or branded background. Users who open the mega menu are already engaged, making it a high-intent placement for a secondary conversion goal.

Collapse to an accordion on mobile using Bootstrap's navbar-collapse

Because the mega menu lives inside `.navbar-collapse`, Bootstrap automatically stacks it vertically on small screens. Add `d-lg-none` / `d-none d-lg-block` visibility utilities if you need to swap the multi-column grid layout for a flat link list below the `lg` breakpoint.

Limit columns to four on a 1280px viewport to prevent overflow

At four `col-lg-3` columns you consume 100% of a 12-column grid exactly. Going beyond four columns causes horizontal scroll on 1280px screens unless you reduce padding or switch to `col-lg-2` with six columns — only viable for pure link lists with no descriptive text.

FAQ

Does Bootstrap 5 have a built-in mega menu component?

Bootstrap 5 does not ship a dedicated mega menu component, but it provides all the primitives needed to build one: the `.dropdown` plugin for open/close behaviour, the grid system for multi-column layout, and `.navbar` for the container context. The key technique is combining `position-static` on the dropdown's parent element with `w-100` on `.dropdown-menu`, which stretches the panel across the full width of its positioned ancestor. No third-party library or JavaScript is required beyond what Bootstrap already includes.

How do I style the mega menu to match my brand colours and typography?

Override the default `.dropdown-menu` background using a custom CSS class or Bootstrap's `bg-*` utilities (e.g., `bg-dark` with `data-bs-theme="dark"` for a dark panel). Column headings styled with `text-uppercase`, `fw-semibold`, and a custom `color` via a CSS variable (e.g., `--bs-primary`) will inherit your brand palette if you've defined it in your Bootstrap Sass build or CSS custom property overrides. For hover states on individual links, target `.dropdown-item:hover` and set `background-color` and `color` explicitly rather than relying on the default grey, which rarely matches brand guidelines.

How does Canvas Builder handle mega menu generation?

When you describe a site with complex navigation in Canvas Builder, it detects the number of nav categories and link depth and automatically scaffolds a mega menu structure instead of a simple dropdown. It applies your brand's primary colour to column headings and CTA buttons, outputs a fully responsive grid that collapses to an accordion on mobile, and wraps everything in semantic HTML with proper ARIA attributes (`aria-expanded`, `aria-haspopup`) for accessibility compliance out of the box.