Enterprise Mega Menu - Free UI Component

Brand Color #2563eb

Navbar Background #ffffff

Primary Text #0f172a

Hover Accent Color #f1f5f9

Vertical Padding (rem) 1

Container Width 1200px

Corner Rounding (px) 16

Fixed Position

Full Width

Page Background #f8fafc

Enterprise Mega Menu

A sophisticated, multi-column mega menu designed for content-heavy sites and enterprise SaaS platforms. Includes a fully responsive mobile accordion overlay.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enterprise Mega Menu Navbar</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --primary: {{primaryColor}};         /* Primary Brand Color */
            --bg: {{bgColor}};                  /* Navbar Background */
            --text: {{textColor}};               /* Text Color */
            --accent: {{accentColor}};           /* Muted Accent/Hover Background */
            --nav-w: {{navWidth}};              /* Max Width */
            --radius: {{borderRadius}}px;       /* Corner Rounding */
            --v-pad: {{vPadding}}rem;           /* Vertical Padding */
            --page-bg: {{pageBg}};              /* Page Background */
            --shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Inter', sans-serif;
            background-color: var(--page-bg);
            color: var(--text);
            min-height: 200vh;
        }

/* -- Navbar Implementation -------------------------------------- */
        .nav-wrapper {
            width: 100%;
            z-index: 1000;
            display: flex;
            justify-content: center;
            background: transparent;
            transition: all 0.3s ease;
        }

body[data-fixed="Yes"] .nav-wrapper {
            position: fixed;
            top: 0;
            left: 0;
        }

nav.mega-nav {
            width: 100%;
            max-width: var(--nav-w);
            background: var(--bg);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--v-pad) 2rem;
            position: relative;
            transition: all 0.3s ease;
        }

/* Layout Switch Logic */
        body[data-full="No"] .nav-wrapper {
            padding: 1rem 0;
        }
        body[data-full="No"] nav.mega-nav {
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            border: 1px solid rgba(0,0,0,0.05);
        }
        body[data-full="Yes"] .nav-wrapper {
            padding: 0;
            background: var(--bg);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        body[data-full="Yes"] nav.mega-nav {
            max-width: 100%;
            border-radius: 0;
            box-shadow: none;
        }

/* Brand */
        .brand {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--text);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
            letter-spacing: -0.5px;
        }
        .brand svg {
            color: var(--primary);
        }

/* Desktop Links */
        .nav-links {
            display: flex;
            list-style: none;
            gap: 1rem;
            height: 100%;
        }

.nav-item {
            position: static; /* Required for Mega Menu positioning */
        }

.nav-link {
            color: var(--text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            transition: 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
            opacity: 0.8;
        }

.nav-link:hover {
            background: var(--accent);
            opacity: 1;
            color: var(--primary);
        }

.nav-link svg {
            transition: transform 0.3s;
        }
        .nav-item:hover .nav-link svg {
            transform: rotate(180deg);
        }

/* -- Mega Menu Dropdown ----------------------------------------- */
        .mega-menu {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: white;
            padding: 2.5rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            border-top: 1px solid rgba(0,0,0,0.05);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px);
            transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 1001;
            border-bottom-left-radius: var(--radius);
            border-bottom-right-radius: var(--radius);
        }

body[data-full="Yes"] .mega-menu {
            border-radius: 0;
        }

.nav-item:hover .mega-menu {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }

.mega-col h4 {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #94a3b8;
            margin-bottom: 1.25rem;
        }

.mega-list {
            list-style: none;
        }

.mega-link {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            text-decoration: none;
            padding: 0.75rem;
            border-radius: 12px;
            transition: 0.2s;
            margin-bottom: 0.5rem;
        }

.mega-link:hover {
            background: var(--accent);
        }

.mega-icon {
            background: rgba(var(--primary-rgb, 0,0,0), 0.1);
            color: var(--primary);
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: 0.3s;
        }

.mega-link:hover .mega-icon {
            background: var(--primary);
            color: white;
            transform: scale(1.05);
        }

.mega-info h5 {
            font-size: 0.95rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 2px;
        }

.mega-info p {
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.4;
        }

/* Actions/CTA */
        .actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.btn {
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            transition: 0.2s;
        }

.btn-ghost {
            color: var(--text);
        }

.btn-primary {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 12px rgba(var(--primary-rgb, 0,0,0), 0.2);
        }

.btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(var(--primary-rgb, 0,0,0), 0.3);
        }

/* Hamburger */
        .burger {
            display: none;
            cursor: pointer;
            width: 32px;
            height: 32px;
            position: relative;
        }

.burger span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--text);
            position: absolute;
            left: 4px;
            transition: 0.3s;
        }
        .burger span:nth-child(1) { top: 10px; }
        .burger span:nth-child(2) { top: 18px; }

.burger.active span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
        .burger.active span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* -- Mobile Menu ------------------------------------------------ */
        .mobile-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: white;
            z-index: 999;
            padding: 5rem 2rem;
            visibility: hidden;
            opacity: 0;
            transition: 0.4s;
            overflow-y: auto;
        }

.mobile-overlay.active {
            visibility: visible;
            opacity: 1;
        }

.mobile-nav {
            list-style: none;
        }

.mobile-item {
            margin-bottom: 1rem;
            border-bottom: 1px solid #f1f5f9;
            padding-bottom: 1rem;
        }

.mobile-link {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
            text-decoration: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.mobile-dropdown {
            margin-top: 1rem;
            display: none;
            padding-left: 1rem;
        }

.mobile-dropdown.active {
            display: block;
        }

.mobile-sublink {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            margin-bottom: 1.5rem;
        }

.mobile-subicon {
            width: 32px;
            height: 32px;
            background: #f1f5f9;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
        }

.mobile-subinfo h5 {
            font-size: 0.95rem;
            color: #1e293b;
        }

/* Generic Content */
        .hero {
            padding: 12rem 2rem 6rem;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            transition: padding 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

/* Adjust padding when navbar is NOT fixed to account for its height in document flow */
        body[data-fixed="No"] .hero {
            padding-top: 7.5rem;
        }

h1 { font-size: 4rem; font-weight: 800; letter-spacing: -2px; margin-bottom: 1.5rem; line-height: 1.1; }
        p.lead { font-size: 1.25rem; color: #64748b; max-width: 700px; margin: 0 auto 3rem; line-height: 1.6; }

@media (max-width: 1024px) {
            .nav-links, .actions { display: none; }
            .burger { display: flex; align-items: center; justify-content: center; }
            .mega-nav { padding: 1rem 1.5rem; }
            h1 { font-size: 2.5rem; }
        }
    </style>
</head>
<body data-fixed="{{isFixed}}" data-full="{{isFullWidth}}">

<div class="mobile-overlay" id="mobileOverlay">
        <ul class="mobile-nav">
            <li class="mobile-item">
                <a href="javascript:void(0)" class="mobile-link" onclick="toggleMobileDropdown(this)">
                    Solutions
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"></path></svg>
                </a>
                <div class="mobile-dropdown">
                    <a href="#" class="mobile-sublink">
                        <div class="mobile-subicon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20"></path></svg></div>
                        <div class="mobile-subinfo"><h5>Cloud Platform</h5></div>
                    </a>
                    <a href="#" class="mobile-sublink">
                        <div class="mobile-subicon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg></div>
                        <div class="mobile-subinfo"><h5>Analytics Pro</h5></div>
                    </a>
                    <a href="#" class="mobile-sublink">
                        <div class="mobile-subicon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></div>
                        <div class="mobile-subinfo"><h5>Secure Shield</h5></div>
                    </a>
                </div>
            </li>
            <li class="mobile-item"><a href="#" class="mobile-link">Products</a></li>
            <li class="mobile-item"><a href="#" class="mobile-link">Pricing</a></li>
            <li class="mobile-item"><a href="#" class="mobile-link">Company</a></li>
        </ul>
        <div style="margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem;">
            <a href="#" class="btn btn-ghost" style="text-align: center;">Log In</a>
            <a href="#" class="btn btn-primary" style="text-align: center;">Start Free Trial</a>
        </div>
    </div>

<div class="nav-wrapper" id="navWrap">
        <nav class="mega-nav">
            <a href="#" class="brand">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                </svg>
                STRATA
            </a>

<ul class="nav-links">
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        Solutions
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
                    </a>
                    <div class="mega-menu">
                        <div class="mega-col">
                            <h4>Platform</h4>
                            <ul class="mega-list">
                                <li>
                                    <a href="#" class="mega-link">
                                        <div class="mega-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20"></path></svg></div>
                                        <div class="mega-info"><h5>Automation</h5><p>Automate complex workflows.</p></div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="mega-link">
                                        <div class="mega-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg></div>
                                        <div class="mega-info"><h5>Insights</h5><p>Real-time data streaming.</p></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="mega-col">
                            <h4>Industries</h4>
                            <ul class="mega-list">
                                <li>
                                    <a href="#" class="mega-link">
                                        <div class="mega-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"></rect><line x1="2" y1="10" x2="22" y2="10"></line></svg></div>
                                        <div class="mega-info"><h5>Finance</h5><p>Scalable banking APIs.</p></div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="mega-link">
                                        <div class="mega-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></div>
                                        <div class="mega-info"><h5>Real Estate</h5><p>Property management tech.</p></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="mega-col">
                            <h4>Security</h4>
                            <ul class="mega-list">
                                <li>
                                    <a href="#" class="mega-link">
                                        <div class="mega-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></div>
                                        <div class="mega-info"><h5>Encryption</h5><p>Military-grade data protection.</p></div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="mega-link">
                                        <div class="mega-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg></div>
                                        <div class="mega-info"><h5>Compliance</h5><p>GDPR and SOC2 ready.</p></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="mega-col">
                            <div style="background: #f8fafc; padding: 1.5rem; border-radius: 12px; border: 1px solid #e2e8f0;">
                                <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=400&q=80" alt="Special Offer" style="width: 100%; height: 100px; object-fit: cover; border-radius: 8px; margin-bottom: 1rem;">
                                <h5 style="font-size: 0.9rem; margin-bottom: 0.5rem;">New Report 2024</h5>
                                <p style="font-size: 0.8rem; color: #64748b; margin-bottom: 1rem;">State of digital transformation.</p>
                                <a href="#" style="color: var(--primary); font-size: 0.85rem; font-weight: 700; text-decoration: none;">Download Now →</a>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="#" class="nav-link">Products</a></li>
                <li><a href="#" class="nav-link">Pricing</a></li>
                <li><a href="#" class="nav-link">Company</a></li>
            </ul>

<div class="actions">
                <a href="#" class="btn btn-ghost">Log In</a>
                <a href="#" class="btn btn-primary">Start Free Trial</a>
            </div>

<main class="hero">
        <h1>Simplify Your Global <br><span style="color: var(--primary);">Infrastructure.</span></h1>
        <p class="lead">Built for developers and enterprise teams to scale at the speed of light. Discover our comprehensive suite of cloud solutions.</p>
        <div style="display: flex; gap: 1rem; justify-content: center;">
            <a href="#" class="btn btn-primary" style="padding: 1rem 2.5rem; font-size: 1rem;">View Solutions</a>
            <a href="#" class="btn btn-ghost" style="padding: 1rem 2.5rem; font-size: 1rem; border: 1px solid #e2e8f0; background: white;">Contact Sales</a>
        </div>
        
        <div style="margin-top: 5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
            <div style="padding: 2.5rem; background: white; border-radius: 16px; border: 1px solid #f1f5f9; text-align: left; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
                <div style="width: 48px; height: 48px; background: rgba(var(--primary-rgb, 0,0,0), 0.1); color: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
                </div>
                <h3 style="margin-bottom: 0.5rem;">Fast Integration</h3>
                <p style="color: #64748b; font-size: 0.95rem;">Deploy in minutes with our native SDKs and comprehensive REST APIs.</p>
            </div>
            <div style="padding: 2.5rem; background: white; border-radius: 16px; border: 1px solid #f1f5f9; text-align: left; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
                <div style="width: 48px; height: 48px; background: rgba(var(--primary-rgb, 0,0,0), 0.1); color: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                </div>
                <h3 style="margin-bottom: 0.5rem;">Global Scale</h3>
                <p style="color: #64748b; font-size: 0.95rem;">Distributed edge network ensures low latency for your users everywhere.</p>
            </div>
            <div style="padding: 2.5rem; background: white; border-radius: 16px; border: 1px solid #f1f5f9; text-align: left; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
                <div style="width: 48px; height: 48px; background: rgba(var(--primary-rgb, 0,0,0), 0.1); color: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22M5 12h14"></path></svg>
                </div>
                <h3 style="margin-bottom: 0.5rem;">Enterprise Grade</h3>
                <p style="color: #64748b; font-size: 0.95rem;">Advanced security features and dedicated support for large organizations.</p>
            </div>
        </div>
    </main>

burger.addEventListener('click', () => {
            burger.classList.toggle('active');
            overlay.classList.toggle('active');
            document.body.style.overflow = overlay.classList.contains('active') ? 'hidden' : '';
        });

function toggleMobileDropdown(el) {
            const dropdown = el.nextElementSibling;
            dropdown.classList.toggle('active');
            const svg = el.querySelector('svg');
            svg.style.transform = dropdown.classList.contains('active') ? 'rotate(180deg)' : '';
        }

// Handle Primary RGB conversion for transparency effects
        function updateRgbVariables() {
            const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim();
            if (primaryColor.startsWith('#')) {
                const r = parseInt(primaryColor.slice(1, 3), 16);
                const g = parseInt(primaryColor.slice(3, 5), 16);
                const b = parseInt(primaryColor.slice(5, 7), 16);
                document.documentElement.style.setProperty('--primary-rgb', `${r}, ${g}, ${b}`);
            }
        }
        
        // Initial call
        updateRgbVariables();
    </script>
</body>
</html>