Mega Menu Navbar Template

The "Mega Menu Navbar" is a popular choice, especially for large, content-rich websites. Mobile-responsive and accessible. Copy and paste the code straight into your own web projects.

Get Source Code → Preview →

The Mega Menu Navbar

An advanced and highly practical navigation solution designed for large websites like e-commerce stores, news portals, or corporate sites. Instead of a simple dropdown, it reveals a large, multi-column panel on hover, allowing for grouped links, icons, and even promotional images.

Key Feature: Multi-Column Layout — The dropdown panel uses CSS Grid to create a clean, organized, multi-column layout for displaying a large number of navigation links.
Key Feature: Responsive & Accessible Fallback — On desktop, the mega menu appears on hover. On mobile, it intelligently transforms into a touch-friendly, accessible accordion, ensuring a great user experience on any device.
Accessibility Focused: Built with ARIA attributes (aria-expanded, aria-haspopup) and robust keyboard support. Users can open, navigate through, and close the menu entirely with a keyboard.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is appropriately commented to explain the purpose of each section.
A tiny, efficient JavaScript snippet is used for the mobile menu toggle, as it is the most accessible and modern method (arguably superior to the older "checkbox hack").

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mega Menu Navbar (Definitive Final Version)</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Base Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-surface: #f8f9fa; /* For menu background */
            --color-text-primary: #212529;
            --color-text-secondary: #495057;
            --color-primary: #0056b3;
            --color-border: #e9ecef;
            --font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --font-weight-bold: 600;
            --navbar-height: 80px;
            --navbar-padding: 1.5rem;
            --container-width: 1200px;
            --border-radius: 8px;
            --transition-speed: 0.3s;
        }
        
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
        
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); line-height: 1.6; }
        .content { height: 200vh; max-width: var(--container-width); margin: 0 auto; padding: 120px var(--navbar-padding); }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: var(--color-text-secondary); transition: color var(--transition-speed) ease; }
        a:hover, a:focus { color: var(--color-primary); }

.navbar { position: sticky; top: 0; z-index: 1000; height: var(--navbar-height); display: flex; align-items: center; background-color: var(--color-background); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .navbar__container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--navbar-padding); }
        .navbar__brand { font-size: 1.75rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
        .navbar__toggle { display: block; border: 1px solid var(--color-border); border-radius: 4px; padding: 0.25rem 0.75rem; background: transparent; cursor: pointer; }
        .navbar__toggle .bar { display: block; width: 22px; height: 2px; margin: 6px 0; background-color: var(--color-text-primary); transition: transform var(--transition-speed) ease; }
        .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        
        .navbar__menu { display: none; }
        .navbar__menu.is-active { display: block; position: absolute; top: var(--navbar-height); left: 0; width: 100%; background-color: var(--color-background); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
        
        .navbar__item > .navbar__link { display: flex; align-items: center; padding: 1.25rem var(--navbar-padding); font-weight: var(--font-weight-bold); }
        .navbar__item:not(:last-child) { border-bottom: 1px solid var(--color-border); }
        
        :is(.navbar__toggle, .navbar__link):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
        
        /* Mobile Accordion Styles */
        .mega-menu-toggle { justify-content: space-between; width: 100%; }
        .mega-menu-toggle::after { content: 'â€º'; font-size: 1.5em; transform: rotate(90deg); transition: transform var(--transition-speed) ease; }
        .mega-menu-item.is-active > .mega-menu-toggle::after { transform: rotate(-90deg); }
        .mega-menu { max-height: 0; overflow: hidden; background-color: var(--color-surface); transition: max-height var(--transition-speed) ease-in-out; }
        .mega-menu-item.is-active > .mega-menu { max-height: 1000px; }
        .mega-menu__list { padding: 0.5rem var(--navbar-padding); }
        .mega-menu__list li a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: var(--border-radius); }
        .mega-menu__list li a:hover { background-color: #e9ecef; }
        .mega-menu__list .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-primary); }
        .mega-menu__heading { display: none; }
        .mega-menu__feature { display: none; }
        
        @media (min-width: 992px) {
            .navbar__toggle { display: none; }
            .navbar__menu { display: flex; align-items: center; position: static; width: auto; background: none; box-shadow: none; }
            .navbar__list { display: flex; align-items: center; gap: 0.5rem; }
            .navbar__item, .navbar__item:not(:last-child) { border: none; }
            .navbar__item > .navbar__link { padding: 0.5rem 1rem; }
            .mega-menu-toggle::after { content: '\25BE'; margin-left: 0.5em; transform: rotate(0); }
            
            /* --- The Definitive Positioning Fix --- */
            .mega-menu-item {
                /* FIX #1: Make the parent LI static on desktop. */
                /* This forces the child .mega-menu to anchor to the full-width .navbar. */
                position: static;
            }
            .mega-menu {
                /* FIX #2: Position the menu relative to the full viewport/navbar. */
                display: block; position: absolute;
                top: calc(var(--navbar-height) - 5px); /* Appears just below the navbar */
                left: 50%;
                transform: translateX(-50%);
                width: 90vw; max-width: 900px;
                background-color: var(--color-background); border: 1px solid var(--color-border);
                border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
                opacity: 0; visibility: hidden;
                transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
                max-height: none;
            }
            .mega-menu-item:hover > .mega-menu, .mega-menu-item:focus-within > .mega-menu { opacity: 1; visibility: visible; }
            /* --- End of Fix --- */
            
            .mega-menu__content { padding: 1.5rem; }
            .mega-menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
            .mega-menu__list { padding: 0; }
            .mega-menu__heading { display: block; font-size: 0.9rem; font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 1rem; padding: 0 0.75rem; }
            .mega-menu__feature { display: block; border-radius: var(--border-radius); overflow: hidden; }
            .mega-menu__feature img { display: block; width: 100%; height: auto; }
            .mega-menu__feature-content { padding: 1rem; background-color: var(--color-surface); }
            .mega-menu__feature-content h4 { margin: 0 0 0.5rem; }
            .mega-menu__feature-content p { font-size: 0.9rem; margin: 0 0 1rem; }
            .mega-menu__cta { display: inline-block; padding: 0.5rem 1rem; background-color: var(--color-primary); color: #fff; font-weight: var(--font-weight-bold); border-radius: var(--border-radius); }
        }
    </style>
</head>
<body>

<header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">MegaCorp</a>
            <button class="navbar__toggle" id="navbarToggle" aria-label="Toggle navigation" aria-expanded="false">
                <span class="bar"></span><span class="bar"></span><span class="bar"></span>
            </button>
            <nav id="navbarMenu" class="navbar__menu" role="navigation">
                <ul class="navbar__list">
                    <li class="navbar__item"><a href="#" class="navbar__link">Home</a></li>
                    
                    
                    <li class="navbar__item mega-menu-item">
                        <a href="#" class="navbar__link mega-menu-toggle" role="button" aria-haspopup="true" aria-expanded="false">Products</a>
                        <div class="mega-menu">
                            <div class="mega-menu__content">
                                <div class="mega-menu__grid">
                                    <div class="mega-menu__column">
                                        <h3 class="mega-menu__heading">Software Solutions</h3>
                                        <ul class="mega-menu__list">
                                            <li><a href="#"><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M14,6H10V4H14M10,12H14V14H10M20,2H4C2.9,2 2,2.9 2,4V20C2,21.1 2.9,22 4,22H20C21.1,22 22,21.1 22,20V4C22,2.9 21.1,2 20,2Z"></path></svg> <span>Enterprise CRM</span></a></li>
                                            <li><a href="#"><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,3H21V7H13V3M3,10H11V21H3V10M15,3H13V7H15V3Z"></path></svg> <span>Analytics Suite</span></a></li>
                                            <li><a href="#"><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M19,20C19,21.1 18.1,22 17,22H7C5.9,22 5,21.1 5,20V4C5,2.9 5.9,2 7,2H17C18.1,2 19,2.9 19,4V20M17,18H7V6H17V18M12,10.5C11.3,10.5 10.6,10.6 10,10.8V12.1C10.5,12 11,12 11.5,12C12.4,12 12.9,12.5 12.9,13.2C12.9,13.8 12.5,14.3 11.5,14.3H11.2V15.5H11.5C13.2,15.5 14.1,14.7 14.1,13.2C14.1,11.8 13.1,10.5 11.5,10.5H12Z"></path></svg> <span>Mobile Apps</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="mega-menu__column">
                                        <h3 class="mega-menu__heading">Cloud Services</h3>
                                        <ul class="mega-menu__list">
                                            <li><a href="#"><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5,20Q4.22,20 2.61,18.39Q1,16.78 1,14.5Q1,12.55 2.13,11.09Q3.25,9.63 5.08,9.22Q5.5,7.05 7.15,5.72Q8.8,4.4 11,4.4Q13.3,4.4 15.1,6.15Q16.9,7.9 16.9,10.2Q16.9,10.55 16.87,10.9Q18.3,10.97 19.4,11.95Q20.5,12.93 20.5,14.4Q20.5,15.82 19.5,16.86Q18.5,17.9 17,17.9H13.2Q13.05,19.1 12.13,20.05Q11.2,21 10,21Q8.65,21 7.58,19.93Q6.5,18.85 6.5,17.5V17.45Q6.5,17.85 6.38,18.23Q6.25,18.6 6.5,20M6.5,15.6V17.5Q6.5,18.05 6.85,18.4Q7.2,18.75 7.75,18.75Q8.25,18.75 8.6,18.4Q8.95,18.05 8.95,17.5V15.5H17Q17.75,15.5 18.25,15Q18.75,14.5 18.75,14.4Q18.75,13.6 18.25,13.1Q17.75,12.6 17,12.6Q16.7,12.6 16.35,12.75V10.2Q16.35,8.25 14.85,6.75Q13.35,5.25 11.35,5.25Q9.35,5.25 7.9,6.75Q6.45,8.25 6.45,10.2V11.2L5.4,11.35Q4,11.65 3.25,12.6Q2.5,13.55 2.5,14.5Q2.5,16.05 3.5,17.05Q4.5,18.05 6.05,18.05H6.5V15.6Z"></path></svg> <span>Managed Hosting</span></a></li>
                                            <li><a href="#"><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"></path></svg> <span>API Management</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="mega-menu__column mega-menu__column--feature">
                                        <div class="mega-menu__feature">
                                            <img src="https://placehold.co/600x400/0056b3/ffffff?text=New+Feature" alt="Promotional image for a new feature.">
                                            <div class="mega-menu__feature-content">
                                                <h4>Analytics Suite 2.0</h4>
                                                <p>Unlock powerful new insights with our latest update.</p>
                                                <span class="mega-menu__cta">Learn More</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    
                    <li class="navbar__item"><a href="#" class="navbar__link">Pricing</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main class="content"><h1>Mega Menu Example</h1></main>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const navbarToggle = document.getElementById('navbarToggle');
        const navbarMenu = document.getElementById('navbarMenu');
        if (navbarToggle) {
            navbarToggle.addEventListener('click', function() {
                navbarToggle.classList.toggle('is-active');
                navbarMenu.classList.toggle('is-active');
            });
        }
        const megaMenuToggles = document.querySelectorAll('.mega-menu-toggle');
        megaMenuToggles.forEach(toggle => {
            toggle.addEventListener('click', function(event) {
                const isMobileView = getComputedStyle(navbarToggle).display !== 'none';
                if (isMobileView) {
                    event.preventDefault();
                    const parentItem = this.closest('.mega-menu-item');
                    parentItem.classList.toggle('is-active');
                }
            });
        });
    });
    </script>
</body>
</html>

View Output