Section
Mega Menu
Navbar with a click-to-open mega menu panel.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Navigation/navbar-mega-menu Vanilla/Sections/Navigation/navbar-mega-menu <!-- Snippet Name: Mega Menu | Family: Navigation | Description: Navbar with a click-to-open mega menu panel. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mega Menu | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: navbar-mega-menu. Copy, customize, ship.">
<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@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.nmm{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:3px solid var(--border)}
.nmm .row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.nmm .brand{font-weight:900;font-size:1.15rem;text-decoration:none;color:var(--foreground);display:flex;align-items:center;gap:10px}
.nmm .brand .mark{width:32px;height:32px;background:var(--primary);border:3px solid var(--border);border-radius:8px}
.nmm .links{display:none;align-items:center;gap:8px}
.nmm .links .item>button{font:inherit;font-weight:600;background:none;border:0;color:inherit;cursor:pointer;padding:10px 14px;border-radius:8px;display:flex;align-items:center;gap:6px}
.nmm .links .item>button:hover{background:var(--surface);box-shadow:var(--shadow)}
.nmm .mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:3px solid var(--border);box-shadow:var(--shadow-lg);padding:30px 0;display:none}
.nmm .item.open .mega{display:block}
.nmm .mega .grid{display:grid;grid-template-columns:1fr;gap:14px}
.nmm .mega .cell{display:flex;gap:12px;padding:12px;border-radius:8px;text-decoration:none;color:inherit}
.nmm .mega .cell:hover{background:var(--bg)}
.nmm .mega .ic{width:38px;height:38px;border:3px solid var(--border);border-radius:8px;display:grid;place-items:center;flex:none;background:var(--bg)}
.nmm .mega .cell b{display:block}.nmm .mega .cell small{color:var(--muted)}
.nmm .right{display:flex;align-items:center;gap:10px}
.nmm .burger{display:inline-flex;border:3px solid var(--border);background:var(--surface);border-radius:8px;padding:8px;cursor:pointer}
.nmm .burger i{display:block;width:22px;height:2px;background:var(--foreground);position:relative}
.nmm .burger i::before,.nmm .burger i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--foreground)}
.nmm .burger i::before{top:-7px}.nmm .burger i::after{top:7px}
@media(min-width:980px){.nmm .links{display:flex}.nmm .burger{display:none}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<nav class="nmm" aria-label="Primary" data-mega>
<div class="container">
<div class="row">
<a class="brand" href="#"><span class="mark" aria-hidden="true"></span> Nebula</a>
<div class="links">
<div class="item" data-item>
<button type="button" aria-expanded="false" aria-controls="mega1">Product ▾</button>
<div class="mega" id="mega1">
<div class="container"><div class="grid">
<a class="cell" href="#"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3v18h18M7 14l3-4 4 3 5-7'/></svg></span><span><b>Analytics</b><small>Real-time metrics</small></span></a>
<a class="cell" href="#"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='4' y='11' width='16' height='9' rx='2'/><path d='M8 11V7a4 4 0 018 0v4'/></svg></span><span><b>Security</b><small>SOC2 + SSO</small></span></a>
<a class="cell" href="#"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M16 18l6-6-6-6M8 6l-6 6 6 6'/></svg></span><span><b>API</b><small>REST + webhooks</small></span></a>
<a class="cell" href="#"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/></svg></span><span><b>Integrations</b><small>120+ apps</small></span></a>
</div></div>
</div>
</div>
<div class="item"><a href="#" style="padding:10px 14px;text-decoration:none;font-weight:600">Pricing</a></div>
<div class="item"><a href="#" style="padding:10px 14px;text-decoration:none;font-weight:600">Docs</a></div>
</div>
<div class="right">
<a class="btn ghost" href="#">Sign in</a>
<a class="btn" href="#">Get started</a>
<button class="burger" type="button" aria-label="Menu" data-burger><i></i></button>
</div>
</div>
</div>
</nav>
<script>
(function(){
var nav=document.querySelector('[data-mega]');if(!nav)return;
var items=[].slice.call(nav.querySelectorAll('[data-item]'));
items.forEach(function(item){
var btn=item.querySelector('button');
btn.addEventListener('click',function(){
var open=item.classList.contains('open');
items.forEach(function(o){o.classList.remove('open');o.querySelector('button').setAttribute('aria-expanded','false')});
if(!open){item.classList.add('open');btn.setAttribute('aria-expanded','true')}
});
item.addEventListener('keydown',function(e){if(e.key==='Escape'){item.classList.remove('open');btn.setAttribute('aria-expanded','false');btn.focus()}});
});
document.addEventListener('click',function(e){
if(!e.target.closest('[data-item]')){items.forEach(function(o){o.classList.remove('open');o.querySelector('button').setAttribute('aria-expanded','false')})}
});
})();</script>
</body>
</html># Mega Menu
Navbar with a click-to-open mega menu panel.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / navigation
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** nav, navbar, mega-menu
**Features:** click-away close, keyboard, aria-expanded
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 143 lines UTF-8 · LF · Spaces: 2
Continue browsing