Dark Navbar with Mega Dropdown

Dark Bootstrap 6 navbar whose Products item opens a wide three-column mega menu with icons, descriptions and a featured card, collapsing into a Drawer on mobile.

Also known as: mega menu navigation bar, navbar with mega dropdown, dark mega menu, multi column dropdown menu

Bootstrap 6 Navbars Responsive Dark #dark #dropdown #mega-menu #navbar #responsive

Dark Navbar with Mega Dropdown live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A dark Bootstrap 6 navbar whose Products item opens a wide mega menu: three columns of product links with icons and short descriptions, a featured announcement card and a row of quick links. It suits SaaS, cloud and developer-tool sites with many products. On small screens the links move into a Bootstrap 6 Drawer, and the same mega menu becomes a stacked list.

How it works

The root .mgn-root carries data-bs-theme="dark". Inside it, .navbar.lg:navbar-expand holds the brand, a .navbar-toggler and a <dialog class="drawer drawer-end">. Below 1024px of navbar width the toggler opens the drawer; from 1024px the drawer is shown inline as a normal navbar row.

The Products button uses the Bootstrap 6 Menu plugin (data-bs-toggle="menu") with data-bs-display="static", so Floating UI does not position the panel. Instead, style.css places .mgn-mega absolutely under the whole navbar inside @container mgn (width >= 1024px). The navbar is a query container and container-name: mgn targets it directly.

All headers, .menu-item links, the .mgn-feature card and the footer links are direct children of .mgn-mega. This keeps the Menu plugin's arrow-key navigation working, because it only walks direct .menu-item children. CSS grid with grid-auto-flow: row dense stacks each item into the column named by .mgn-c1, .mgn-c2 or .mgn-c3.

script.js imports Menu and Drawer from the bundle. It closes the drawer when a link inside it is clicked. When the root has data-mgn-open-on-load and the desktop layout is active, it opens the panel once without animation (.mgn-instant) so the preview shows it.

Customization

--mgn-accent on .mgn-root: changes the brand mark, column headings, CTA button and featured-card tint.
--mgn-bg, --mgn-surface and --mgn-border on .mgn-root: adjust the page background, the panel and drawer surface, and the divider lines.
Remove data-mgn-open-on-load from .mgn-root so the mega menu starts closed (recommended for production).
grid-template-columns in the .mgn-mega rule inside the container query: add or remove columns, then add a column class like .mgn-c3 for the new column.
max-width: 1100px on .mgn-mega: make the panel full width or narrower.
Swap .mgn-ico--violet, .mgn-ico--cyan or .mgn-ico--amber on an icon tile to recolor a product group.
Delete the .mgn-feature link to drop the announcement card. The three columns then use the remaining width.

Use cases

SaaS companies: the Products item opens three columns of links with icons and short descriptions
Developer tool sites: a featured announcement card sits inside the wide menu panel
Cloud platforms: a row of quick links at the bottom of the panel helps people find key pages
Mobile navigation: the same mega menu becomes a stacked list inside a drawer

Accessibility

The navbar is a labelled <nav>. The Products button has aria-expanded, which the Menu plugin updates, plus aria-controls. The caret icon is aria-hidden. Arrow keys move through the panel's items, Escape closes it and returns focus to the button, and clicking outside closes it. The drawer is a native modal <dialog> labelled by its title, with a close button. Focus outlines use the accent color, and the caret rotation is turned off under prefers-reduced-motion.

Bootstrap 6 notes

Bootstrap 5's dropdown, dropdown-menu and data-bs-toggle="dropdown" become .menu, .menu-item, .menu-header and data-bs-toggle="menu", without a wrapper. navbar-expand-lg is now lg:navbar-expand, and the collapse is replaced by a <dialog class="drawer">. .badge.badge-subtle.theme-accent replaces color-specific badge classes. Built on Bootstrap 6.0.0-alpha.1, so alpha APIs may still change. Icons come from Bootstrap Icons.

Dark Navbar with Mega Dropdown at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile, dark design
Category: Navbars
License: Free for personal and commercial use

Questions about this template

Can I use the Dark Navbar with Mega Dropdown code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.