Navbar Dropdown Menus in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-chev-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"/></symbol>
  <symbol id="i-flask" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 3.5h5M10 3.5v6L4.8 18a1.7 1.7 0 0 0 1.5 2.5h11.4a1.7 1.7 0 0 0 1.5-2.5L14 9.5v-6"/><path d="M7.5 14.5h9"/></symbol>
  <symbol id="i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="m10 8.8 5 3.2-5 3.2z"/></symbol>
  <symbol id="i-plug" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5v4M15 3.5v4M6.5 7.5h11v3a5.5 5.5 0 0 1-11 0zM12 16v4.5"/></symbol>
  <symbol id="i-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
  <symbol id="i-bag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 8h13l-1 12.5h-11z"/><path d="M9 10V6.5a3 3 0 0 1 6 0V10"/></symbol>
</svg>
<div class="full"><span class="lbl">Link dropdown with icons and descriptions</span>
<div class="stage" style="--stage-h:440px">
<nav class="nv" aria-label="Lumen">
<a class="nv-brand" href="#home"><i></i>Lumen</a>
<ul class="nv-links">
<li class="nv-dd"><button class="nv-link" id="nv-product-btn" type="button" aria-expanded="false" aria-controls="nv-product" data-nav-dropdown >Product<svg aria-hidden="true"><use href="#i-chev-down"/></svg></button>
<div class="nv-panel" id="nv-product" hidden><ul class="nv-list"><li><a class="nv-rich" href="#analytics"><span class="nv-tile"><svg aria-hidden="true"><use href="#i-zap"/></svg></span><span><b>Analytics</b><small>Dashboards that refresh every minute</small></span></a></li><li><a class="nv-rich" href="#experiments"><span class="nv-tile"><svg aria-hidden="true"><use href="#i-flask"/></svg></span><span><b>Experiments</b><small>A/B tests with guardrail metrics</small></span></a></li><li><a class="nv-rich" href="#replay"><span class="nv-tile"><svg aria-hidden="true"><use href="#i-play"/></svg></span><span><b>Session replay</b><small>See exactly where visitors get stuck</small></span></a></li><li><a class="nv-rich" href="#integrations"><span class="nv-tile"><svg aria-hidden="true"><use href="#i-plug"/></svg></span><span><b>Integrations</b><small>Connect Stripe, HubSpot and 120 more</small></span></a></li></ul><a class="nv-foot" href="#changelog">What’s new in Lumen 4.2<svg aria-hidden="true"><use href="#i-arrow-right"/></svg></a></div></li>
<li class="nv-dd nv-hide"><button class="nv-link" id="nv-solutions-btn" type="button" aria-expanded="false" aria-controls="nv-solutions" data-nav-dropdown >Solutions<svg aria-hidden="true"><use href="#i-chev-down"/></svg></button>
<ul class="nv-panel nv-list slim" id="nv-solutions" hidden><li><a class="nv-plain" href="#startups">For startups</a></li><li><a class="nv-plain" href="#agencies">For agencies</a></li><li><a class="nv-plain" href="#enterprise">For enterprise</a></li></ul></li>
<li class="nv-hide"><a class="nv-link" href="#pricing">Pricing</a></li>
<li class="nv-hide"><a class="nv-link" href="#docs">Docs</a></li>
</ul>
<div class="nv-end"><a class="nv-link nv-hide" href="#sign-in">Sign in</a><a class="nv-cta" href="#start">Start free</a></div>
</nav>
</div></div>
<div class="full"><span class="lbl">Small mega dropdown</span>
<div class="stage tall" style="--stage-h:360px">
<nav class="nv green" aria-label="Trailhead">
<a class="nv-brand" href="#home"><i></i>Trailhead</a>
<ul class="nv-links">
<li class="nv-dd"><button class="nv-link" id="nv-shop-btn" type="button" aria-expanded="false" aria-controls="nv-shop" data-nav-dropdown >Shop<svg aria-hidden="true"><use href="#i-chev-down"/></svg></button>
<div class="nv-panel mega" id="nv-shop" hidden><div class="nv-col"><h3 id="nv-shop-c">Clothing</h3><ul class="nv-list" aria-labelledby="nv-shop-c"><li><a class="nv-plain" href="#jackets">Jackets</a></li><li><a class="nv-plain" href="#base-layers">Base layers</a></li><li><a class="nv-plain" href="#trousers">Trousers</a></li><li><a class="nv-plain" href="#merino-socks">Merino socks</a></li></ul></div><div class="nv-col"><h3 id="nv-shop-g">Gear</h3><ul class="nv-list" aria-labelledby="nv-shop-g"><li><a class="nv-plain" href="#tents">Tents</a></li><li><a class="nv-plain" href="#backpacks">Backpacks</a></li><li><a class="nv-plain" href="#sleeping-bags">Sleeping bags</a></li><li><a class="nv-plain" href="#camp-stoves">Camp stoves</a></li></ul></div><a class="nv-card" href="#layering-guide"><small>Journal</small><b>The autumn layering guide</b><span>Stay warm on a three-day hike without carrying more.</span><em>Read the guide →</em></a></div></li>
<li class="nv-hide"><a class="nv-link" href="#journal">Journal</a></li>
<li class="nv-hide"><a class="nv-link" href="#stores">Stores</a></li>
</ul>
<div class="nv-end"><a class="nv-cta" href="#bag"><svg aria-hidden="true"><use href="#i-bag"/></svg>Bag (2)</a></div>
</nav>
</div></div>

CSS

/* Navbar dropdowns are navigation, so they use the disclosure pattern (a button with aria-expanded and a panel of links), not role="menu". */

.nv{--nv-ink:#1c1a33;--nv-muted:#5b5872;--nv-line:#e5e3ee;--nv-hover:#f3f2fa;--nv-accent:#4338ca;--nv-accent-dark:#3730a3;--nv-tint:#eeecfd;
  position:relative;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 16px;background:#fff;border:1px solid var(--nv-line);border-radius:14px;
  box-shadow:0 1px 2px rgba(28,26,51,.05);font-size:.875rem}
.nv.green{--nv-accent:#15803d;--nv-accent-dark:#166534;--nv-tint:#e8f5ec;--nv-hover:#f1f6f2}
.nv-brand{display:flex;align-items:center;gap:8px;margin-right:14px;border-radius:6px;color:var(--nv-ink);font-size:1rem;font-weight:800;letter-spacing:-.02em;text-decoration:none}
.nv-brand i{width:24px;height:24px;border-radius:7px;background:conic-gradient(from 210deg,#6366f1,#4338ca,#a855f7,#6366f1)}
.nv.green .nv-brand i{border-radius:50% 50% 50% 4px;background:linear-gradient(135deg,#22c55e,#166534)}
.nv-links{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nv-link{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--nv-muted);font:inherit;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.nv-link:hover,.nv-link[aria-expanded="true"]{background:var(--nv-hover);color:var(--nv-ink)}
.nv-link svg{width:15px;height:15px;transition:rotate .2s}
.nv-link[aria-expanded="true"] svg{rotate:180deg}
.nv-end{display:flex;align-items:center;gap:4px;margin-left:auto}
.nv-cta{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;background:var(--nv-accent);color:#fff;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background-color .15s}
.nv-cta:hover{background:var(--nv-accent-dark);color:#fff}
.nv-cta svg{width:16px;height:16px}
.nv a:focus-visible,.nv button:focus-visible{outline:2px solid var(--nv-accent);outline-offset:2px}
.nv-dd{position:relative}
.nv-panel{position:absolute;z-index:20;top:calc(100% + 10px);left:0;width:348px;margin:0;padding:8px;background:#fff;border:1px solid var(--nv-line);border-radius:14px;
  box-shadow:0 2px 6px rgba(28,26,51,.06),0 24px 48px -16px rgba(28,26,51,.3);animation:nv-in .16s ease-out}
.nv-panel.slim{width:230px}
.nv-panel.mega{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:4px 8px;width:620px;padding:16px}
.nv-panel[hidden]{display:none}
@keyframes nv-in{from{opacity:0;translate:0 -6px}}
.nv-list{margin:0;padding:0;list-style:none}
.nv-rich{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:10px;color:var(--nv-ink);text-decoration:none;white-space:normal;transition:background-color .15s}
.nv-rich:hover{background:var(--nv-hover);color:var(--nv-ink)}
.nv-tile{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--nv-tint);color:var(--nv-accent)}
.nv-tile svg{width:18px;height:18px}
.nv-rich b{display:block;font-weight:600;line-height:1.35}
.nv-rich small{display:block;margin-top:1px;color:var(--nv-muted);font-size:.8rem;line-height:1.4}
.nv-plain{display:block;padding:8px 10px;border-radius:8px;color:var(--nv-ink);font-weight:500;text-decoration:none;transition:background-color .15s}
.nv-plain:hover{background:var(--nv-hover);color:var(--nv-ink)}
.nv-foot{display:flex;align-items:center;justify-content:space-between;margin:6px -8px -8px;padding:12px 18px;border-top:1px solid var(--nv-line);border-radius:0 0 14px 14px;
  background:#faf9fd;color:var(--nv-accent);font-weight:600;text-decoration:none}
.nv-foot:hover{background:var(--nv-hover);color:var(--nv-accent-dark)}
.nv-foot svg{width:16px;height:16px}
.nv-col h3{margin:0 0 4px;line-height:1.5;padding:4px 10px;color:var(--nv-muted);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nv-card{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:190px;padding:18px;border-radius:12px;color:#fff;text-decoration:none;white-space:normal;
  background:radial-gradient(circle at 80% 10%,rgba(250,204,21,.35),transparent 45%),linear-gradient(160deg,#166534,#14532d 70%)}
.nv-card:hover{color:#fff}
.nv-card small{color:#bbf7d0;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nv-card b{font-size:1.05rem;line-height:1.3}
.nv-card span{color:#dcfce7;font-size:.8rem;line-height:1.45}
.nv-card em{margin-top:6px;font-style:normal;font-weight:700}
.nv-card:focus-visible{outline-offset:3px}
.nv-bag{display:inline-flex;align-items:center;gap:6px}
@media (max-width:640px){
  .nv{padding-left:12px}
  .nv-hide{display:none}
  .nv-brand{margin-right:4px}
  .nv-dd{position:static}
  .nv-panel,.nv-panel.slim,.nv-panel.mega{left:8px;right:8px;width:auto}
  .nv-panel.mega{grid-template-columns:1fr 1fr}
  .nv-card{grid-column:1/-1;min-height:0}
}

@media (prefers-reduced-motion:reduce){.nv-panel{animation:none}.nv *{transition:none}}

JavaScript

// Navigation dropdowns (WAI-ARIA disclosure pattern): each button has aria-expanded and aria-controls, the panel holds
// ordinary links. Click, Enter or Space toggles it; Esc closes it and returns focus; a click outside or moving focus away closes it.
(() => {
  const buttons = [...document.querySelectorAll('[data-nav-dropdown]')];
  const panelOf = b => document.getElementById(b.getAttribute('aria-controls'));
  const close = (b, focus) => {
    b.setAttribute('aria-expanded', 'false');
    panelOf(b).hidden = true;
    if (focus) b.focus();
  };
  buttons.forEach(b => {
    const item = b.parentElement;
    b.addEventListener('click', () => {
      const open = b.getAttribute('aria-expanded') !== 'true';
      buttons.forEach(o => { if (o !== b) close(o); });
      b.setAttribute('aria-expanded', String(open));
      panelOf(b).hidden = !open;
    });
    item.addEventListener('keydown', e => {
      if (e.key === 'Escape' && b.getAttribute('aria-expanded') === 'true') { e.preventDefault(); close(b, true); }
    });
    item.addEventListener('focusout', e => { if (e.relatedTarget && !item.contains(e.relatedTarget)) close(b); });
  });
  document.addEventListener('click', e => buttons.forEach(b => { if (!b.parentElement.contains(e.target)) close(b); }));
})();

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-chev-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"/></symbol>
  <symbol id="i-flask" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 3.5h5M10 3.5v6L4.8 18a1.7 1.7 0 0 0 1.5 2.5h11.4a1.7 1.7 0 0 0 1.5-2.5L14 9.5v-6"/><path d="M7.5 14.5h9"/></symbol>
  <symbol id="i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="m10 8.8 5 3.2-5 3.2z"/></symbol>
  <symbol id="i-plug" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5v4M15 3.5v4M6.5 7.5h11v3a5.5 5.5 0 0 1-11 0zM12 16v4.5"/></symbol>
  <symbol id="i-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
  <symbol id="i-bag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 8h13l-1 12.5h-11z"/><path d="M9 10V6.5a3 3 0 0 1 6 0V10"/></symbol>
</svg>
<div class="full"><span class="lbl">Link dropdown with icons and descriptions</span>
<div class="stage" style="--stage-h:440px">
<nav class="navbar navbar-expand nv" aria-label="Lumen">
<a class="navbar-brand nv-brand" href="#home"><i></i>Lumen</a>
<ul class="navbar-nav nv-links">
<li class="nav-item dropdown nv-dd"><button class="nav-link nv-link" id="nv-product-btn" type="button" aria-expanded="false" aria-controls="nv-product" data-bs-toggle="dropdown" >Product<svg aria-hidden="true"><use href="#i-chev-down"/></svg></button>
<div class="dropdown-menu nv-panel" id="nv-product"><ul class="nv-list"><li><a class="nv-rich dropdown-item" href="#analytics"><span class="nv-tile"><svg aria-hidden="true"><use href="#i-zap"/></svg></span><span><b>Analytics</b><small>Dashboards that refresh every minute</small></span></a></li><li><a class="nv-rich dropdown-item" href="#experiments"><span class="nv-tile"><svg aria-hidden="true"><use href="#i-flask"/></svg></span><span><b>Experiments</b><small>A/B tests with guardrail metrics</small></span></a></li><li><a class="nv-rich dropdown-item" href="#replay"><span class="nv-tile"><svg aria-hidden="true"><use href="#i-play"/></svg></span><span><b>Session replay</b><small>See exactly where visitors get stuck</small></span></a></li><li><a class="nv-rich dropdown-item" href="#integrations"><span class="nv-tile"><svg aria-hidden="true"><use href="#i-plug"/></svg></span><span><b>Integrations</b><small>Connect Stripe, HubSpot and 120 more</small></span></a></li></ul><a class="nv-foot" href="#changelog">What’s new in Lumen 4.2<svg aria-hidden="true"><use href="#i-arrow-right"/></svg></a></div></li>
<li class="nav-item dropdown nv-dd nv-hide"><button class="nav-link nv-link" id="nv-solutions-btn" type="button" aria-expanded="false" aria-controls="nv-solutions" data-bs-toggle="dropdown" >Solutions<svg aria-hidden="true"><use href="#i-chev-down"/></svg></button>
<ul class="dropdown-menu nv-panel nv-list slim" id="nv-solutions"><li><a class="nv-plain dropdown-item" href="#startups">For startups</a></li><li><a class="nv-plain dropdown-item" href="#agencies">For agencies</a></li><li><a class="nv-plain dropdown-item" href="#enterprise">For enterprise</a></li></ul></li>
<li class="nav-item nv-hide"><a class="nav-link nv-link" href="#pricing">Pricing</a></li>
<li class="nav-item nv-hide"><a class="nav-link nv-link" href="#docs">Docs</a></li>
</ul>
<div class="nv-end"><a class="nav-link nv-link nv-hide" href="#sign-in">Sign in</a><a class="nv-cta" href="#start">Start free</a></div>
</nav>
</div></div>
<div class="full"><span class="lbl">Small mega dropdown</span>
<div class="stage tall" style="--stage-h:360px">
<nav class="navbar navbar-expand nv green" aria-label="Trailhead">
<a class="navbar-brand nv-brand" href="#home"><i></i>Trailhead</a>
<ul class="navbar-nav nv-links">
<li class="nav-item dropdown nv-dd"><button class="nav-link nv-link" id="nv-shop-btn" type="button" aria-expanded="false" aria-controls="nv-shop" data-bs-toggle="dropdown" >Shop<svg aria-hidden="true"><use href="#i-chev-down"/></svg></button>
<div class="dropdown-menu nv-panel mega" id="nv-shop"><div class="nv-col"><h3 id="nv-shop-c">Clothing</h3><ul class="nv-list" aria-labelledby="nv-shop-c"><li><a class="nv-plain dropdown-item" href="#jackets">Jackets</a></li><li><a class="nv-plain dropdown-item" href="#base-layers">Base layers</a></li><li><a class="nv-plain dropdown-item" href="#trousers">Trousers</a></li><li><a class="nv-plain dropdown-item" href="#merino-socks">Merino socks</a></li></ul></div><div class="nv-col"><h3 id="nv-shop-g">Gear</h3><ul class="nv-list" aria-labelledby="nv-shop-g"><li><a class="nv-plain dropdown-item" href="#tents">Tents</a></li><li><a class="nv-plain dropdown-item" href="#backpacks">Backpacks</a></li><li><a class="nv-plain dropdown-item" href="#sleeping-bags">Sleeping bags</a></li><li><a class="nv-plain dropdown-item" href="#camp-stoves">Camp stoves</a></li></ul></div><a class="nv-card dropdown-item" href="#layering-guide"><small>Journal</small><b>The autumn layering guide</b><span>Stay warm on a three-day hike without carrying more.</span><em>Read the guide →</em></a></div></li>
<li class="nav-item nv-hide"><a class="nav-link nv-link" href="#journal">Journal</a></li>
<li class="nav-item nv-hide"><a class="nav-link nv-link" href="#stores">Stores</a></li>
</ul>
<div class="nv-end"><a class="nv-cta" href="#bag"><svg aria-hidden="true"><use href="#i-bag"/></svg>Bag (2)</a></div>
</nav>
</div></div>

CSS

/* Bootstrap .navbar with .dropdown items; in a navbar Bootstrap positions menus with CSS, so the panel below is plain CSS. */
.nv .navbar-nav{--bs-nav-link-padding-x:10px;--bs-nav-link-padding-y:0;--bs-nav-link-font-weight:600}
.nv.navbar-expand .navbar-nav .nav-link{padding-inline:10px}
.nv .dropdown-menu{--bs-dropdown-border-color:var(--nv-line);--bs-dropdown-border-radius:14px;--bs-dropdown-link-hover-bg:var(--nv-hover);
  --bs-dropdown-link-active-bg:var(--nv-hover);--bs-dropdown-link-active-color:var(--nv-ink);--bs-dropdown-font-size:.875rem;min-width:0}
.nv-panel.show{display:block}
.nv-panel.mega.show{display:grid}
.nv .dropdown-item{width:auto}
.nv .dropdown-item:focus{background:var(--nv-hover)}
.nv .dropdown-menu[data-bs-popper]{top:calc(100% + 10px);margin:0}
.nv-link.show svg{rotate:180deg}

.nv{--nv-ink:#1c1a33;--nv-muted:#5b5872;--nv-line:#e5e3ee;--nv-hover:#f3f2fa;--nv-accent:#4338ca;--nv-accent-dark:#3730a3;--nv-tint:#eeecfd;
  position:relative;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 16px;background:#fff;border:1px solid var(--nv-line);border-radius:14px;
  box-shadow:0 1px 2px rgba(28,26,51,.05);font-size:.875rem}
.nv.green{--nv-accent:#15803d;--nv-accent-dark:#166534;--nv-tint:#e8f5ec;--nv-hover:#f1f6f2}
.nv-brand{display:flex;align-items:center;gap:8px;margin-right:14px;border-radius:6px;color:var(--nv-ink);font-size:1rem;font-weight:800;letter-spacing:-.02em;text-decoration:none}
.nv-brand i{width:24px;height:24px;border-radius:7px;background:conic-gradient(from 210deg,#6366f1,#4338ca,#a855f7,#6366f1)}
.nv.green .nv-brand i{border-radius:50% 50% 50% 4px;background:linear-gradient(135deg,#22c55e,#166534)}
.nv-links{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nv-link{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--nv-muted);font:inherit;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.nv-link:hover,.nv-link[aria-expanded="true"]{background:var(--nv-hover);color:var(--nv-ink)}
.nv-link svg{width:15px;height:15px;transition:rotate .2s}
.nv-link.show svg{rotate:180deg}
.nv-end{display:flex;align-items:center;gap:4px;margin-left:auto}
.nv-cta{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;background:var(--nv-accent);color:#fff;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background-color .15s}
.nv-cta:hover{background:var(--nv-accent-dark);color:#fff}
.nv-cta svg{width:16px;height:16px}
.nv a:focus-visible,.nv button:focus-visible{outline:2px solid var(--nv-accent);outline-offset:2px}
.nv-dd{position:relative}
.nv-panel{position:absolute;z-index:20;top:calc(100% + 10px);left:0;width:348px;margin:0;padding:8px;background:#fff;border:1px solid var(--nv-line);border-radius:14px;
  box-shadow:0 2px 6px rgba(28,26,51,.06),0 24px 48px -16px rgba(28,26,51,.3);animation:nv-in .16s ease-out}
.nv-panel.slim{width:230px}
.nv-panel.mega{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:4px 8px;width:620px;padding:16px}
@keyframes nv-in{from{opacity:0;translate:0 -6px}}
.nv-list{margin:0;padding:0;list-style:none}
.nv-rich{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:10px;color:var(--nv-ink);text-decoration:none;white-space:normal;transition:background-color .15s}
.nv-rich:hover{background:var(--nv-hover);color:var(--nv-ink)}
.nv-tile{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--nv-tint);color:var(--nv-accent)}
.nv-tile svg{width:18px;height:18px}
.nv-rich b{display:block;font-weight:600;line-height:1.35}
.nv-rich small{display:block;margin-top:1px;color:var(--nv-muted);font-size:.8rem;line-height:1.4}
.nv-plain{display:block;padding:8px 10px;border-radius:8px;color:var(--nv-ink);font-weight:500;text-decoration:none;transition:background-color .15s}
.nv-plain:hover{background:var(--nv-hover);color:var(--nv-ink)}
.nv-foot{display:flex;align-items:center;justify-content:space-between;margin:6px -8px -8px;padding:12px 18px;border-top:1px solid var(--nv-line);border-radius:0 0 14px 14px;
  background:#faf9fd;color:var(--nv-accent);font-weight:600;text-decoration:none}
.nv-foot:hover{background:var(--nv-hover);color:var(--nv-accent-dark)}
.nv-foot svg{width:16px;height:16px}
.nv-col h3{margin:0 0 4px;line-height:1.5;padding:4px 10px;color:var(--nv-muted);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nv-card{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:190px;padding:18px;border-radius:12px;color:#fff;text-decoration:none;white-space:normal;
  background:radial-gradient(circle at 80% 10%,rgba(250,204,21,.35),transparent 45%),linear-gradient(160deg,#166534,#14532d 70%)}
.nv-card:hover{color:#fff}
.nv-card small{color:#bbf7d0;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nv-card b{font-size:1.05rem;line-height:1.3}
.nv-card span{color:#dcfce7;font-size:.8rem;line-height:1.45}
.nv-card em{margin-top:6px;font-style:normal;font-weight:700}
.nv-card:focus-visible{outline-offset:3px}
.nv-bag{display:inline-flex;align-items:center;gap:6px}
@media (max-width:640px){
  .nv{padding-left:12px}
  .nv-hide{display:none}
  .nv-brand{margin-right:4px}
  .nv-dd{position:static}
  .nv-panel,.nv-panel.slim,.nv-panel.mega{left:8px;right:8px;width:auto}
  .nv-panel.mega{grid-template-columns:1fr 1fr}
  .nv-card{grid-column:1/-1;min-height:0}
}

@media (prefers-reduced-motion:reduce){.nv-panel.show{animation:none}.nv *{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-chev-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"/></symbol>
  <symbol id="i-flask" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 3.5h5M10 3.5v6L4.8 18a1.7 1.7 0 0 0 1.5 2.5h11.4a1.7 1.7 0 0 0 1.5-2.5L14 9.5v-6"/><path d="M7.5 14.5h9"/></symbol>
  <symbol id="i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="m10 8.8 5 3.2-5 3.2z"/></symbol>
  <symbol id="i-plug" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5v4M15 3.5v4M6.5 7.5h11v3a5.5 5.5 0 0 1-11 0zM12 16v4.5"/></symbol>
  <symbol id="i-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
  <symbol id="i-bag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 8h13l-1 12.5h-11z"/><path d="M9 10V6.5a3 3 0 0 1 6 0V10"/></symbol>
</svg>
<div class="col-span-full"><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Link dropdown with icons and descriptions</span>
<div class="relative min-h-[440px] rounded-[18px] border border-[#dfe3eb] bg-[#f8f9fc] bg-[radial-gradient(#d5dae4_1px,transparent_1px)] bg-size-[18px_18px] p-7 max-[600px]:p-5">
<nav class="relative flex items-center gap-1.5 rounded-[14px] border border-[#e5e3ee] bg-white py-2 pr-2 pl-4 text-[.875rem] shadow-[0_1px_2px_rgba(28,26,51,.05)] max-[640px]:pl-3" aria-label="Lumen">
<a class="mr-3.5 flex items-center gap-2 rounded-md text-[1rem] font-extrabold tracking-[-.02em] text-[#1c1a33] no-underline max-[640px]:mr-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#home"><i class="size-6 rounded-[7px] bg-[conic-gradient(from_210deg,#6366f1,#4338ca,#a855f7,#6366f1)]"></i>Lumen</a>
<ul class="m-0 flex list-none items-center gap-0.5 p-0">
<li class="relative max-[640px]:static"><button class="group inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-transparent px-2.5 font-semibold text-[#5b5872] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] hover:text-[#1c1a33] aria-expanded:bg-[#f3f2fa] aria-expanded:text-[#1c1a33] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" id="nv-product-btn" type="button" aria-expanded="false" aria-controls="nv-product" data-nav-dropdown >Product<svg class="size-[15px] transition-[rotate] duration-200 group-aria-expanded:rotate-180 motion-reduce:transition-none" aria-hidden="true"><use href="#i-chev-down"/></svg></button>
<div class="absolute top-[calc(100%+10px)] left-0 z-20 m-0 rounded-[14px] border border-[#e5e3ee] bg-white shadow-[0_2px_6px_rgba(28,26,51,.06),0_24px_48px_-16px_rgba(28,26,51,.3)] animate-menu-in motion-reduce:animate-none max-[640px]:right-2 max-[640px]:left-2 max-[640px]:w-auto w-[348px] p-2" id="nv-product" hidden><ul class="m-0 list-none p-0"><li><a class="flex items-start gap-3 rounded-[10px] p-2.5 text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#analytics"><span class="grid size-9 flex-none place-items-center rounded-[10px] bg-[#eeecfd] text-[#4338ca]"><svg class="size-[18px]" aria-hidden="true"><use href="#i-zap"/></svg></span><span><b class="block leading-[1.35] font-semibold">Analytics</b><small class="mt-px block text-[.8rem] leading-[1.4] text-[#5b5872]">Dashboards that refresh every minute</small></span></a></li><li><a class="flex items-start gap-3 rounded-[10px] p-2.5 text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#experiments"><span class="grid size-9 flex-none place-items-center rounded-[10px] bg-[#eeecfd] text-[#4338ca]"><svg class="size-[18px]" aria-hidden="true"><use href="#i-flask"/></svg></span><span><b class="block leading-[1.35] font-semibold">Experiments</b><small class="mt-px block text-[.8rem] leading-[1.4] text-[#5b5872]">A/B tests with guardrail metrics</small></span></a></li><li><a class="flex items-start gap-3 rounded-[10px] p-2.5 text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#replay"><span class="grid size-9 flex-none place-items-center rounded-[10px] bg-[#eeecfd] text-[#4338ca]"><svg class="size-[18px]" aria-hidden="true"><use href="#i-play"/></svg></span><span><b class="block leading-[1.35] font-semibold">Session replay</b><small class="mt-px block text-[.8rem] leading-[1.4] text-[#5b5872]">See exactly where visitors get stuck</small></span></a></li><li><a class="flex items-start gap-3 rounded-[10px] p-2.5 text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#integrations"><span class="grid size-9 flex-none place-items-center rounded-[10px] bg-[#eeecfd] text-[#4338ca]"><svg class="size-[18px]" aria-hidden="true"><use href="#i-plug"/></svg></span><span><b class="block leading-[1.35] font-semibold">Integrations</b><small class="mt-px block text-[.8rem] leading-[1.4] text-[#5b5872]">Connect Stripe, HubSpot and 120 more</small></span></a></li></ul><a class="-mx-2 -mb-2 mt-1.5 flex items-center justify-between rounded-b-[14px] border-t border-[#e5e3ee] bg-[#faf9fd] px-[18px] py-3 font-semibold text-[#4338ca] no-underline hover:bg-[#f3f2fa] hover:text-[#3730a3] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#changelog">What’s new in Lumen 4.2<svg class="size-4" aria-hidden="true"><use href="#i-arrow-right"/></svg></a></div></li>
<li class="relative max-[640px]:hidden"><button class="group inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-transparent px-2.5 font-semibold text-[#5b5872] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] hover:text-[#1c1a33] aria-expanded:bg-[#f3f2fa] aria-expanded:text-[#1c1a33] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" id="nv-solutions-btn" type="button" aria-expanded="false" aria-controls="nv-solutions" data-nav-dropdown >Solutions<svg class="size-[15px] transition-[rotate] duration-200 group-aria-expanded:rotate-180 motion-reduce:transition-none" aria-hidden="true"><use href="#i-chev-down"/></svg></button>
<ul class="absolute top-[calc(100%+10px)] left-0 z-20 m-0 rounded-[14px] border border-[#e5e3ee] bg-white shadow-[0_2px_6px_rgba(28,26,51,.06),0_24px_48px_-16px_rgba(28,26,51,.3)] animate-menu-in motion-reduce:animate-none max-[640px]:right-2 max-[640px]:left-2 max-[640px]:w-auto w-[230px] list-none p-2" id="nv-solutions" hidden><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#startups">For startups</a></li><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#agencies">For agencies</a></li><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#enterprise">For enterprise</a></li></ul></li>
<li class="max-[640px]:hidden"><a class="group inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-transparent px-2.5 font-semibold text-[#5b5872] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] hover:text-[#1c1a33] aria-expanded:bg-[#f3f2fa] aria-expanded:text-[#1c1a33] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#pricing">Pricing</a></li>
<li class="max-[640px]:hidden"><a class="group inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-transparent px-2.5 font-semibold text-[#5b5872] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] hover:text-[#1c1a33] aria-expanded:bg-[#f3f2fa] aria-expanded:text-[#1c1a33] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#docs">Docs</a></li>
</ul>
<div class="ml-auto flex items-center gap-1"><a class="group inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-transparent px-2.5 font-semibold text-[#5b5872] no-underline transition-colors duration-150 hover:bg-[#f3f2fa] hover:text-[#1c1a33] aria-expanded:bg-[#f3f2fa] aria-expanded:text-[#1c1a33] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca] max-[640px]:hidden" href="#sign-in">Sign in</a><a class="inline-flex h-9 items-center whitespace-nowrap gap-1.5 rounded-[9px] bg-[#4338ca] px-3.5 font-semibold text-white no-underline transition-colors duration-150 hover:bg-[#3730a3] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4338ca]" href="#start">Start free</a></div>
</nav>
</div></div>
<div class="col-span-full"><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Small mega dropdown</span>
<div class="relative min-h-[360px] rounded-[18px] border border-[#dfe3eb] bg-[#f8f9fc] bg-[radial-gradient(#d5dae4_1px,transparent_1px)] bg-size-[18px_18px] p-7 max-[600px]:p-5 max-[640px]:min-h-[560px]">
<nav class="relative flex items-center gap-1.5 rounded-[14px] border border-[#e5e3ee] bg-white py-2 pr-2 pl-4 text-[.875rem] shadow-[0_1px_2px_rgba(28,26,51,.05)] max-[640px]:pl-3" aria-label="Trailhead">
<a class="mr-3.5 flex items-center gap-2 rounded-md text-[1rem] font-extrabold tracking-[-.02em] text-[#1c1a33] no-underline max-[640px]:mr-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#home"><i class="size-6 rounded-[50%_50%_50%_4px] bg-[linear-gradient(135deg,#22c55e,#166534)]"></i>Trailhead</a>
<ul class="m-0 flex list-none items-center gap-0.5 p-0">
<li class="relative max-[640px]:static"><button class="group inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-transparent px-2.5 font-semibold text-[#5b5872] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] hover:text-[#1c1a33] aria-expanded:bg-[#f1f6f2] aria-expanded:text-[#1c1a33] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" id="nv-shop-btn" type="button" aria-expanded="false" aria-controls="nv-shop" data-nav-dropdown >Shop<svg class="size-[15px] transition-[rotate] duration-200 group-aria-expanded:rotate-180 motion-reduce:transition-none" aria-hidden="true"><use href="#i-chev-down"/></svg></button>
<div class="absolute top-[calc(100%+10px)] left-0 z-20 m-0 rounded-[14px] border border-[#e5e3ee] bg-white shadow-[0_2px_6px_rgba(28,26,51,.06),0_24px_48px_-16px_rgba(28,26,51,.3)] animate-menu-in motion-reduce:animate-none max-[640px]:right-2 max-[640px]:left-2 max-[640px]:w-auto grid w-[620px] grid-cols-[1fr_1fr_1.25fr] gap-x-2 gap-y-1 p-4 max-[640px]:grid-cols-2" id="nv-shop" hidden><div><h3 class="m-0 mb-1 px-2.5 py-1 text-[.6875rem] leading-[1.5] font-bold tracking-[.08em] text-[#5b5872] uppercase" id="nv-shop-c">Clothing</h3><ul class="m-0 list-none p-0" aria-labelledby="nv-shop-c"><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#jackets">Jackets</a></li><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#base-layers">Base layers</a></li><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#trousers">Trousers</a></li><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#merino-socks">Merino socks</a></li></ul></div><div><h3 class="m-0 mb-1 px-2.5 py-1 text-[.6875rem] leading-[1.5] font-bold tracking-[.08em] text-[#5b5872] uppercase" id="nv-shop-g">Gear</h3><ul class="m-0 list-none p-0" aria-labelledby="nv-shop-g"><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#tents">Tents</a></li><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#backpacks">Backpacks</a></li><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#sleeping-bags">Sleeping bags</a></li><li><a class="block rounded-lg px-2.5 py-2 font-medium text-[#1c1a33] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#camp-stoves">Camp stoves</a></li></ul></div><a class="flex min-h-[190px] flex-col justify-end gap-1 rounded-xl bg-[radial-gradient(circle_at_80%_10%,rgba(250,204,21,.35),transparent_45%),linear-gradient(160deg,#166534,#14532d_70%)] p-[18px] text-white no-underline max-[640px]:col-span-full max-[640px]:min-h-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d] focus-visible:outline-offset-3" href="#layering-guide"><small class="text-[.7rem] font-bold tracking-[.08em] text-[#bbf7d0] uppercase">Journal</small><b class="text-[1.05rem] leading-[1.3]">The autumn layering guide</b><span class="text-[.8rem] leading-[1.45] text-[#dcfce7]">Stay warm on a three-day hike without carrying more.</span><em class="mt-1.5 font-bold not-italic">Read the guide →</em></a></div></li>
<li class="max-[640px]:hidden"><a class="group inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-transparent px-2.5 font-semibold text-[#5b5872] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] hover:text-[#1c1a33] aria-expanded:bg-[#f1f6f2] aria-expanded:text-[#1c1a33] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#journal">Journal</a></li>
<li class="max-[640px]:hidden"><a class="group inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-transparent px-2.5 font-semibold text-[#5b5872] no-underline transition-colors duration-150 hover:bg-[#f1f6f2] hover:text-[#1c1a33] aria-expanded:bg-[#f1f6f2] aria-expanded:text-[#1c1a33] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#stores">Stores</a></li>
</ul>
<div class="ml-auto flex items-center gap-1"><a class="inline-flex h-9 items-center whitespace-nowrap gap-1.5 rounded-[9px] bg-[#15803d] px-3.5 font-semibold text-white no-underline transition-colors duration-150 hover:bg-[#166534] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15803d]" href="#bag"><svg class="size-4" aria-hidden="true"><use href="#i-bag"/></svg>Bag (2)</a></div>
</nav>
</div></div>

CSS

@theme {
  --animate-menu-in: menu-in .16s ease-out;
  @keyframes menu-in { from { opacity: 0; translate: 0 -6px; } }
}

JavaScript

// Navigation dropdowns (WAI-ARIA disclosure pattern): each button has aria-expanded and aria-controls, the panel holds
// ordinary links. Click, Enter or Space toggles it; Esc closes it and returns focus; a click outside or moving focus away closes it.
(() => {
  const buttons = [...document.querySelectorAll('[data-nav-dropdown]')];
  const panelOf = b => document.getElementById(b.getAttribute('aria-controls'));
  const close = (b, focus) => {
    b.setAttribute('aria-expanded', 'false');
    panelOf(b).hidden = true;
    if (focus) b.focus();
  };
  buttons.forEach(b => {
    const item = b.parentElement;
    b.addEventListener('click', () => {
      const open = b.getAttribute('aria-expanded') !== 'true';
      buttons.forEach(o => { if (o !== b) close(o); });
      b.setAttribute('aria-expanded', String(open));
      panelOf(b).hidden = !open;
    });
    item.addEventListener('keydown', e => {
      if (e.key === 'Escape' && b.getAttribute('aria-expanded') === 'true') { e.preventDefault(); close(b, true); }
    });
    item.addEventListener('focusout', e => { if (e.relatedTarget && !item.contains(e.relatedTarget)) close(b); });
  });
  document.addEventListener('click', e => buttons.forEach(b => { if (!b.parentElement.contains(e.target)) close(b); }));
})();

About this set

Dropdowns inside a site navbar, built for navigation rather than commands. Link dropdown with icons and descriptions is a product site header with a Product panel of four links, each with an icon tile and a short description, and a footer link to the changelog; Solutions opens a plain list. Small mega dropdown is an outdoor shop header whose Shop panel has two headed link columns, Clothing and Gear, beside a featured journal card. Because these panels hold links to pages, they follow the WAI-ARIA disclosure pattern instead of role=”menu”: the button has aria-expanded and aria-controls, Tab moves through the links in order, Esc closes the panel and returns focus, and a click outside or tabbing away closes it. Link columns are lists labelled by their headings. Under 640px secondary links hide, and panels stretch to the width of the navbar with the mega columns rewrapped. The Bootstrap version uses .navbar with .dropdown items, which Bootstrap positions with CSS inside a navbar, and adds its arrow-key navigation.

What’s included

Disclosure pattern for navigation, not an ARIA menu
Rich links with icon tiles and descriptions
Two-column mega dropdown with a featured card
Esc, outside click and focus leaving all close the panel
Panels stretch to the navbar width on small screens

Accessibility

Each dropdown button exposes aria-expanded and aria-controls, the panels hold ordinary links in reading order, and link columns are lists labelled by their headings. Esc closes an open panel and returns focus to its button. Links and buttons have visible focus outlines, and the panel animation and chevron rotation stop under prefers-reduced-motion.

Customise it

The palette is the --nv-* custom properties on .nv; add the green class for the second colour scheme. Widths are .nv-panel (348px), .slim (230px) and .mega (620px). In Tailwind edit the hex values and the w-[...] utilities.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Dropdown Menus