Source Code

Requires

CSS · bootstrap.min.css JS · bootstrap.bundle.min.js

<nav class="navbar navbar-expand-lg bsmega-bar">
  <div class="container">
    <a class="navbar-brand fw-bold" href="javascript:void(0)">Northwind</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bsmegaCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="bsmegaCollapse">
      <ul class="navbar-nav">
        <li class="nav-item dropdown bsmega-dropdown">
          <a class="nav-link dropdown-toggle" href="javascript:void(0)" data-bs-toggle="dropdown">Products</a>
          <div class="dropdown-menu bsmega-panel">
            <div class="row g-4 p-3">
              <div class="col-4">
                <h6 class="bsmega-heading">Platform</h6>
                <a class="bsmega-link" href="javascript:void(0)">Analytics</a>
                <a class="bsmega-link" href="javascript:void(0)">Automation</a>
                <a class="bsmega-link" href="javascript:void(0)">Integrations</a>
              </div>
              <div class="col-4">
                <h6 class="bsmega-heading">Solutions</h6>
                <a class="bsmega-link" href="javascript:void(0)">For startups</a>
                <a class="bsmega-link" href="javascript:void(0)">For enterprise</a>
                <a class="bsmega-link" href="javascript:void(0)">For agencies</a>
              </div>
              <div class="col-4">
                <div class="bsmega-promo">
                  <strong>New: AI Insights</strong>
                  <p class="small text-muted mb-2">Automated weekly summaries of your key metrics.</p>
                  <button class="btn btn-sm btn-dark">Learn more</button>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Docs</a></li>
      </ul>
    </div>
  </div>
</nav>
<main class="bsmega-stage"><p class="text-muted small">Click "Products" above to open the mega menu.</p></main>

body { margin: 0; background: #fafafa; }
.bsmega-bar { background: #fff; border-bottom: 1px solid #eceef1; padding-block: 12px; }
.bsmega-stage { padding: 60px 24px; text-align: center; }

.bsmega-dropdown { position: static; }
.bsmega-panel {
  width: 100%;
  border: none;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 20px 40px rgba(15,23,42,.1);
  margin-top: 12px;
}
@media (min-width: 992px) {
  .bsmega-panel { left: 0; right: 0; }
}

.bsmega-heading { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; margin-bottom: 10px; }
.bsmega-link { display: block; padding: 6px 0; color: #374151; text-decoration: none; font-size: 14px; }
.bsmega-link:hover { color: #6366f1; }

.bsmega-promo { background: #eef0ff; border-radius: 10px; padding: 16px; }

// Bootstrap's own Dropdown component opens/closes the menu; this only
// reports which top-level item is currently open, for the demo readout.
document.querySelectorAll('.bsmega-dropdown').forEach(dd => {
  dd.addEventListener('shown.bs.dropdown', () => console.log('mega menu opened'));
});

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->

HTML Playground42 lessons · Click-based · Live preview

CSS PlaygroundLearn CSS with a live editor

JavaScript Playground60 lessons · DOM · Async · Canvas

React PlaygroundLearn React with a live code editor

GSAP PlaygroundLearn GSAP animation interactively

SVG Playground44 lessons · shapes · paths · animation

SCSS Playground45 lessons · Sass modules · tokens

Tailwind PlaygroundLearn Tailwind CSS with a live editor

Bootstrap 5 Playground50 lessons · live preview

Bootstrap Mega Menu Dropdown Navbar — Free Snippet

Bootstrap Mega Menu Dropdown Navbar · Navigation · Plain HTML, CSS & JS · Live preview

TagsBootstrap JS Libraries

What's included

Features

Real Bootstrap 5.3 Dropdown component — genuine open/close and outside-click handling

Full-width mega panel achieved with one CSS rule (position: static) on the parent list item

Grouped link columns using Bootstrap's own grid, easy to extend to more columns

A promo/callout panel sits alongside the link groups for cross-selling a feature

No custom JavaScript needed for the open/close behavior itself

Responsive — collapses into the standard mobile hamburger menu below Bootstrap's lg breakpoint

About this UI Snippet

Bootstrap Mega Menu Dropdown Navbar — HTML, CSS & JavaScript

Screenshot of the Bootstrap Mega Menu Dropdown Navbar snippet rendered live

A single-column dropdown runs out of room once a "Products" menu needs to list more than four or five links. This snippet keeps Bootstrap's real Dropdown component — data-bs-toggle="dropdown", the genuine open/close and outside-click behavior — but replaces the default narrow .dropdown-menu with a full-width panel laid out in Bootstrap's own grid, grouping links into columns with a promotional callout alongside them.

The trick is entirely CSS: .bsmega-dropdown { position: static; } on the parent <li> removes the positioning context Bootstrap's dropdown would normally anchor to, so the absolutely-positioned .dropdown-menu panel is instead free to stretch left: 0; right: 0 relative to the whole navbar — a well-known, minimal-CSS technique for turning any Bootstrap dropdown into a mega menu without touching its JavaScript at all.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Hand this snippet's HTML, CSS, and JS to an AI coding assistant like Claude and ask it to add a second mega-menu dropdown for a "Resources" nav item, or to add icons next to each link for a more visual mega menu. It's also a good exercise to ask the assistant to make the promo column rotate between two or three different callouts.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a Bootstrap 5.3 navbar with a full-width mega menu dropdown, using the real Bootstrap CDN framework (bootstrap.min.css and bootstrap.bundle.min.js), not custom CSS made to resemble Bootstrap.

Requirements:
- A real Bootstrap navbar with a "Products" nav item using Bootstrap's actual Dropdown component (data-bs-toggle="dropdown") — do not build custom open/close JavaScript.
- Override the dropdown menu to span the full width of the navbar (not Bootstrap's default narrow menu) using only CSS, by making the parent list item position: static so the absolutely-positioned menu can stretch to the container's edges.
- Inside the mega menu, use Bootstrap's grid to lay out at least two columns of grouped links plus a promotional callout column with its own heading, description, and button.
- The whole thing must remain responsive, collapsing into Bootstrap's standard mobile hamburger menu below the lg breakpoint.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Load the snippetClick the snippet in the sidebar Library tab. The preview loads with a plain navbar.
2
Click "Products"Bootstrap's real Dropdown component opens a full-width panel with three grouped columns of links and a promo card.
3
Click elsewhere to closeClick outside the panel — Bootstrap's own outside-click handling closes it, no custom code needed.
4
Add a fourth columnCopy a .col-4 block and adjust to col-3 across all four for a four-column layout.
5
Export in your formatClick "HTML" for a standalone file, "JSX" for React, or "Tailwind" for React + Tailwind CSS.

Real-world uses

Common Use Cases

SaaS products with many feature pages

A mega menu is the standard pattern once a "Products" or "Solutions" nav item needs to link to more than a handful of pages.

Learning the position:static mega-menu trick

A minimal, well-known technique for expanding any Bootstrap dropdown into a full-width panel without new JavaScript.

Marketing sites promoting a specific feature

The promo column is a ready-made spot to spotlight a new feature or offer every time a visitor opens the menu.

E-commerce category navigation

Reuse the grouped-columns layout for a shop's category mega menu — swap link groups for product categories.

Got questions?

Frequently Asked Questions

Real Bootstrap 5.3 — it uses the actual Dropdown component via data-bs-toggle="dropdown". The only custom part is CSS that lets the panel stretch full-width instead of Bootstrap's default narrow menu.

Setting position: static on the parent li removes the positioning context the dropdown menu would normally anchor to, so the absolutely-positioned panel can stretch left: 0; right: 0 relative to the whole navbar instead of just the toggle button.

Below Bootstrap's lg breakpoint, the whole navbar collapses into the standard hamburger menu, and the mega menu becomes a normal nested dropdown within it — still fully functional, just not full-width.

Yes — copy a .col-4 block and adjust the column widths (e.g. to col-3 for four columns) using Bootstrap's standard grid classes.

Yes — that's Bootstrap's own Dropdown component behavior, working exactly as it would for any standard dropdown, with no extra code required.

Loading…