Mega Menu — `<mv-mega-menu>`

E-commerce navigation with mega panels: opens on hover with intent (delay, instant switch between categories) or on click, a shared surface whose height animates while panels cross-fade, link columns with badges, promo tiles, a page scrim; full keyboard support; below the breakpoint (host width, ResizeObserver), a burger menu in a <dialog> drawer with drill-down screens and a back button.

Category	Blocks
Type	Block (ready-made section) (`<mv-mega-menu>`)
Status	stable
Keywords	mega-menu, navigation, menu, header, drawer, drill-down, e-commerce, block

When to use

An online store has many categories that need large hover panels with link columns and promo tiles
Mobile shoppers must drill down through nested categories in a drawer with a back button
Category navigation must switch instantly between panels without flicker

Avoid when

A marketing or SaaS site needs a sticky top bar with a few dropdown menus → use Navbar instead
The navigation belongs to a logged-in app with a persistent side menu → use Sidebar instead

Install

node scripts/add.mjs mega-menu --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["mega-menu"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/dismiss.js, core/dom.js, core/element.js, core/focus.js, core/motion.js, components/mega-menu/mega-menu.js, components/mega-menu/mega-menu.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div id="mm-demo" style="width:100%;min-height:36rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);overflow:clip;background:var(--mv-bg)">
  <style>
    #mm-demo .promo-bar { padding:.5rem 1rem; background:var(--mv-fg); color:var(--mv-bg); font-size:.75rem; text-align:center; letter-spacing:.02em }
    #mm-demo .hero { display:grid; gap:1rem; padding:clamp(2rem,6vw,4.5rem) clamp(1rem,5vw,3rem); }
    #mm-demo .hero h1 { margin:0; max-width:18ch; font-size:clamp(1.75rem,5vw,3.25rem); line-height:1.05; letter-spacing:-.03em }
    #mm-demo .hero p { margin:0; max-width:46ch; color:var(--mv-fg-muted) }
    #mm-demo .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap:1rem; padding:0 clamp(1rem,5vw,3rem) 3rem }
    #mm-demo .tiles img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--mv-radius-xl); display:block }
  </style>
  <p class="promo-bar">Free shipping on orders over $60 · Free 30-day returns</p>
  <mv-mega-menu breakpoint="60rem" id="mm-menu">
    <nav class="mv-mega-menu" aria-label="Main navigation">
      <a class="mv-mega-menu-brand" href="#home">Lumen</a>
      <ul class="mv-mega-menu-list">
        <li class="mv-mega-menu-item">
          <button class="mv-mega-menu-trigger">Women</button>
          <div class="mv-mega-menu-panel">
            <div class="mv-mega-menu-columns">
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">New in</p>
                <ul><li><a class="mv-mega-menu-link" href="#new-collection" data-featured>New collection <span class="mv-mega-menu-badge">Fall</span></a></li><li><a class="mv-mega-menu-link" href="#best-sellers">Best sellers</a></li><li><a class="mv-mega-menu-link" href="#merino-essentials">Merino essentials</a></li><li><a class="mv-mega-menu-link" href="#limited-edition">Limited edition</a></li></ul>
              </div>
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">Clothing</p>
                <ul><li><a class="mv-mega-menu-link" href="#sweaters-and-cardigans">Sweaters &amp; cardigans</a></li><li><a class="mv-mega-menu-link" href="#shirts-and-blouses">Shirts &amp; blouses</a></li><li><a class="mv-mega-menu-link" href="#dresses">Dresses</a></li><li><a class="mv-mega-menu-link" href="#pants">Pants</a></li><li><a class="mv-mega-menu-link" href="#coats-and-jackets">Coats &amp; jackets</a></li><li><a class="mv-mega-menu-link mv-mega-menu-all" href="#all-clothing">All clothing <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></li></ul>
              </div>
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">Accessories</p>
                <ul><li><a class="mv-mega-menu-link" href="#bags-and-totes">Bags &amp; totes</a></li><li><a class="mv-mega-menu-link" href="#scarves-and-beanies">Scarves &amp; beanies</a></li><li><a class="mv-mega-menu-link" href="#jewelry">Jewelry</a></li><li><a class="mv-mega-menu-link" href="#shoes">Shoes</a></li></ul>
              </div>
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">Edits</p>
                <ul><li><a class="mv-mega-menu-link" href="#organic-cotton">Organic cotton</a></li><li><a class="mv-mega-menu-link" href="#made-in-portugal">Made in Portugal</a></li><li><a class="mv-mega-menu-link" href="#last-chance" data-tone="sale">Last chance</a></li></ul>
              </div>
            </div>
            <div class="mv-mega-menu-promos">
              <a class="mv-mega-menu-promo" href="#powder-pink-knit"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.97 0.012 20)'/%3E%3Cstop offset='1' stop-color='oklch(0.9 0.03 15)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cdefs%3E%3Cpattern id='k' width='12' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0l6 8 6-8' fill='none' stroke='black' stroke-opacity='.09' stroke-width='1.6'/%3E%3C/pattern%3E%3C/defs%3E%3Cellipse cx='200' cy='420' rx='150' ry='18' fill='url(%23fl)' opacity='1'/%3E%3Cpath d='M160 118 Q200 142 240 118 L276 128 Q300 140 310 176 L336 318 L300 331 L268 222 L267 388 Q200 397 133 388 L132 222 L100 331 L64 318 L90 176 Q100 140 124 128 Z' fill='oklch(0.8 0.07 15)'/%3E%3Cpath d='M160 118 Q200 142 240 118 L276 128 Q300 140 310 176 L336 318 L300 331 L268 222 L267 388 Q200 397 133 388 L132 222 L100 331 L64 318 L90 176 Q100 140 124 128 Z' fill='url(%23k)'/%3E%3Cpath d='M160 118 Q200 142 240 118 L276 128 Q300 140 310 176 L336 318 L300 331 L268 222 L267 388 Q200 397 133 388 L132 222 L100 331 L64 318 L90 176 Q100 140 124 128 Z' fill='url(%23sh)'/%3E%3Cpath d='M160 118 Q200 152 240 118 Q200 136 160 118Z' fill='black' fill-opacity='.22'/%3E%3Cpath d='M154 116 Q200 160 246 116' fill='none' stroke='black' stroke-opacity='.12' stroke-width='5'/%3E%3Cpath d='M133 370 Q200 379 267 370 L267 388 Q200 397 133 388 Z' fill='black' fill-opacity='.1'/%3E%3Cpath d='M64 318 L100 331 L103 316 L68 303 Z' fill='black' fill-opacity='.1'/%3E%3Cpath d='M336 318 L300 331 L297 316 L332 303 Z' fill='black' fill-opacity='.1'/%3E%3Cpath d='M132 222 L133 380 M268 222 L267 380' stroke='black' stroke-opacity='.08' stroke-width='3'/%3E%3C/svg%3E" alt=""><span class="mv-mega-menu-promo-eyebrow">New</span><span class="mv-mega-menu-promo-title">The powder-pink knit</span><span class="mv-mega-menu-promo-cta">Discover</span></a>
              <a class="mv-mega-menu-promo" href="#everyday-tote"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.97 0.02 85)'/%3E%3Cstop offset='1' stop-color='oklch(0.9 0.04 80)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cellipse cx='200' cy='418' rx='140' ry='16' fill='url(%23fl)' opacity='1'/%3E%3Cpath d='M150 170 C150 100 250 100 250 170' fill='none' stroke='oklch(0.62 0.06 60)' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M168 172 C168 118 232 118 232 172' fill='none' stroke='oklch(0.55 0.06 60)' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M102 170 L298 170 L318 410 Q200 420 82 410 Z' fill='oklch(0.74 0.13 75)'/%3E%3Cpath d='M102 170 L298 170 L318 410 Q200 420 82 410 Z' fill='url(%23sh)'/%3E%3Crect x='140' y='150' width='20' height='40' rx='4' fill='oklch(0.55 0.06 60)'/%3E%3Crect x='240' y='150' width='20' height='40' rx='4' fill='oklch(0.55 0.06 60)'/%3E%3Ctext x='200' y='300' text-anchor='middle' font-family='Georgia,serif' font-size='30' letter-spacing='8' fill='black' fill-opacity='.55'%3ELUMEN%3C/text%3E%3Ctext x='200' y='326' text-anchor='middle' font-family='Arial,sans-serif' font-size='10' letter-spacing='4' fill='black' fill-opacity='.45'%3ESTUDIO %C2%B7 BROOKLYN%3C/text%3E%3Cpath d='M102 170 L298 170' stroke='black' stroke-opacity='.15' stroke-width='6'/%3E%3C/svg%3E" alt=""><span class="mv-mega-menu-promo-eyebrow">Accessories</span><span class="mv-mega-menu-promo-title">The everyday tote</span><span class="mv-mega-menu-promo-cta">Shop the edit</span></a>
            </div>
          </div>
        </li>
        <li class="mv-mega-menu-item">
          <button class="mv-mega-menu-trigger">Men</button>
          <div class="mv-mega-menu-panel">
            <div class="mv-mega-menu-columns">
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">New in</p>
                <ul><li><a class="mv-mega-menu-link" href="#new-collection" data-featured>New collection</a></li><li><a class="mv-mega-menu-link" href="#best-sellers">Best sellers</a></li><li><a class="mv-mega-menu-link" href="#fall-wardrobe">The fall wardrobe</a></li></ul>
              </div>
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">Clothing</p>
                <ul><li><a class="mv-mega-menu-link" href="#sweaters-and-cardigans">Sweaters &amp; cardigans</a></li><li><a class="mv-mega-menu-link" href="#shirts">Shirts</a></li><li><a class="mv-mega-menu-link" href="#t-shirts-and-polos">T-shirts &amp; polos</a></li><li><a class="mv-mega-menu-link" href="#pants-and-chinos">Pants &amp; chinos</a></li><li><a class="mv-mega-menu-link" href="#jackets">Jackets</a></li><li><a class="mv-mega-menu-link mv-mega-menu-all" href="#all-clothing">All clothing <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></li></ul>
              </div>
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">Shoes</p>
                <ul><li><a class="mv-mega-menu-link" href="#leather-sneakers">Leather sneakers</a></li><li><a class="mv-mega-menu-link" href="#ankle-boots">Ankle boots</a></li><li><a class="mv-mega-menu-link" href="#loafers">Loafers</a></li></ul>
              </div>
            </div>
            <div class="mv-mega-menu-promos">
              <a class="mv-mega-menu-promo" href="#pebbled-leather-sneakers"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.95 0.01 90)'/%3E%3Cstop offset='1' stop-color='oklch(0.87 0.02 85)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cellipse cx='210' cy='372' rx='170' ry='16' fill='url(%23fl)' opacity='1'/%3E%3Cg transform='translate(40 70) scale(.85)'%3E%3Cpath d='M62 300 L358 300 C362 320 350 336 328 336 L86 336 C68 336 58 320 62 300 Z' fill='oklch(0.97 0.005 90)'/%3E%3Cpath d='M62 318 L360 318' stroke='black' stroke-opacity='.08' stroke-width='3'/%3E%3Cpath d='M68 300 C66 252 106 236 150 232 L206 198 C226 186 252 188 264 204 L292 240 C324 250 348 262 352 286 L354 300 Z' fill='oklch(0.93 0.02 90)'/%3E%3Cpath d='M68 300 C66 252 106 236 150 232 L206 198 C226 186 252 188 264 204 L292 240 C324 250 348 262 352 286 L354 300 Z' fill='url(%23sh)'/%3E%3Cpath d='M292 240 C324 250 348 262 352 286 L354 300 L318 300 C318 278 306 256 292 240Z' fill='black' fill-opacity='.08'/%3E%3Cpath d='M140 292 C184 258 236 250 306 264' fill='none' stroke='white' stroke-opacity='.85' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M214 206 l26 36 M226 200 l26 36 M200 214 l28 34' stroke='oklch(0.97 0.005 90)' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M206 198 C226 186 252 188 264 204' fill='none' stroke='black' stroke-opacity='.18' stroke-width='5'/%3E%3Ccircle cx='96' cy='262' r='5' fill='white' fill-opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(-10 30) scale(.85)' opacity='1'%3E%3Cpath d='M62 300 L358 300 C362 320 350 336 328 336 L86 336 C68 336 58 320 62 300 Z' fill='oklch(0.97 0.005 90)'/%3E%3Cpath d='M62 318 L360 318' stroke='black' stroke-opacity='.08' stroke-width='3'/%3E%3Cpath d='M68 300 C66 252 106 236 150 232 L206 198 C226 186 252 188 264 204 L292 240 C324 250 348 262 352 286 L354 300 Z' fill='oklch(0.93 0.02 90)'/%3E%3Cpath d='M68 300 C66 252 106 236 150 232 L206 198 C226 186 252 188 264 204 L292 240 C324 250 348 262 352 286 L354 300 Z' fill='url(%23sh)'/%3E%3Cpath d='M292 240 C324 250 348 262 352 286 L354 300 L318 300 C318 278 306 256 292 240Z' fill='black' fill-opacity='.08'/%3E%3Cpath d='M140 292 C184 258 236 250 306 264' fill='none' stroke='white' stroke-opacity='.85' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M214 206 l26 36 M226 200 l26 36 M200 214 l28 34' stroke='oklch(0.97 0.005 90)' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M206 198 C226 186 252 188 264 204' fill='none' stroke='black' stroke-opacity='.18' stroke-width='5'/%3E%3Ccircle cx='96' cy='262' r='5' fill='white' fill-opacity='.8'/%3E%3C/g%3E%3C/svg%3E" alt=""><span class="mv-mega-menu-promo-eyebrow">Best seller</span><span class="mv-mega-menu-promo-title">Pebbled leather sneakers</span><span class="mv-mega-menu-promo-cta">Discover</span></a>
              <a class="mv-mega-menu-promo" href="#midnight-blue-sweater"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.95 0.012 250)'/%3E%3Cstop offset='1' stop-color='oklch(0.87 0.025 255)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cdefs%3E%3Cpattern id='k' width='12' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0l6 8 6-8' fill='none' stroke='black' stroke-opacity='.09' stroke-width='1.6'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' width='400' height='500' fill='white' fill-opacity='.18'/%3E%3Cpath d='M200 58 q0-16 12-16 q12 0 12 12 q0 10-12 14 L200 78' fill='none' stroke='oklch(0.55 0.02 60)' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M200 78 L96 124 L304 124 Z' fill='none' stroke='oklch(0.6 0.08 60)' stroke-width='8' stroke-linejoin='round'/%3E%3Cg transform='translate(40 30) scale(.8)'%3E%3Cpath d='M160 118 Q200 142 240 118 L276 128 Q300 140 310 176 L336 318 L300 331 L268 222 L267 388 Q200 397 133 388 L132 222 L100 331 L64 318 L90 176 Q100 140 124 128 Z' fill='oklch(0.34 0.05 262)'/%3E%3Cpath d='M160 118 Q200 142 240 118 L276 128 Q300 140 310 176 L336 318 L300 331 L268 222 L267 388 Q200 397 133 388 L132 222 L100 331 L64 318 L90 176 Q100 140 124 128 Z' fill='url(%23k)'/%3E%3Cpath d='M160 118 Q200 142 240 118 L276 128 Q300 140 310 176 L336 318 L300 331 L268 222 L267 388 Q200 397 133 388 L132 222 L100 331 L64 318 L90 176 Q100 140 124 128 Z' fill='url(%23sh)'/%3E%3Cpath d='M160 118 Q200 152 240 118 Q200 136 160 118Z' fill='black' fill-opacity='.2'/%3E%3Cpath d='M133 372 Q200 380 267 372 L267 388 Q200 397 133 388 Z' fill='black' fill-opacity='.1'/%3E%3C/g%3E%3Cpath d='M300 470 c-4-60 6-110 30-150 c-2 50-10 100-12 150z' fill='oklch(0.55 0.08 150)' opacity='.55'/%3E%3Cpath d='M318 470 c8-52 30-86 58-104 c-14 38-30 72-40 104z' fill='oklch(0.5 0.08 150)' opacity='.5'/%3E%3Crect x='292' y='452' width='64' height='48' rx='6' fill='oklch(0.72 0.06 55)' opacity='.9'/%3E%3C/svg%3E" alt=""><span class="mv-mega-menu-promo-eyebrow">Essential</span><span class="mv-mega-menu-promo-title">The midnight-blue sweater</span><span class="mv-mega-menu-promo-cta">Shop now</span></a>
            </div>
          </div>
        </li>
        <li class="mv-mega-menu-item">
          <button class="mv-mega-menu-trigger">Home</button>
          <div class="mv-mega-menu-panel">
            <div class="mv-mega-menu-columns">
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">Tableware</p>
                <ul><li><a class="mv-mega-menu-link" href="#mugs-and-cups">Mugs &amp; cups</a></li><li><a class="mv-mega-menu-link" href="#plates">Plates</a></li><li><a class="mv-mega-menu-link" href="#carafes-and-glasses">Carafes &amp; glasses</a></li><li><a class="mv-mega-menu-link" href="#table-linens">Table linens</a></li></ul>
              </div>
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">Decor</p>
                <ul><li><a class="mv-mega-menu-link" href="#scented-candles">Scented candles</a></li><li><a class="mv-mega-menu-link" href="#lighting">Lighting <span class="mv-mega-menu-badge">New</span></a></li><li><a class="mv-mega-menu-link" href="#vases">Vases</a></li><li><a class="mv-mega-menu-link" href="#throws-and-pillows">Throws &amp; pillows</a></li><li><a class="mv-mega-menu-link mv-mega-menu-all" href="#all-home">All home <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></li></ul>
              </div>
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">By room</p>
                <ul><li><a class="mv-mega-menu-link" href="#living-room">Living room</a></li><li><a class="mv-mega-menu-link" href="#kitchen">Kitchen</a></li><li><a class="mv-mega-menu-link" href="#bedroom">Bedroom</a></li><li><a class="mv-mega-menu-link" href="#bathroom">Bathroom</a></li></ul>
              </div>
            </div>
            <div class="mv-mega-menu-promos">
              <a class="mv-mega-menu-promo" href="#halo-lamp"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.3 0.02 270)'/%3E%3Cstop offset='1' stop-color='oklch(0.18 0.015 270)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cdefs%3E%3CradialGradient id='gl'%3E%3Cstop offset='0' stop-color='oklch(0.95 0.08 85)' stop-opacity='.9'/%3E%3Cstop offset='.45' stop-color='oklch(0.85 0.1 75)' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='oklch(0.8 0.1 70)' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gb' cx='.38' cy='.34'%3E%3Cstop offset='0' stop-color='white'/%3E%3Cstop offset='1' stop-color='oklch(0.97 0.05 90)' stop-opacity='.85'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='200' cy='200' r='220' fill='url(%23gl)'/%3E%3Cellipse cx='200' cy='424' rx='110' ry='12' fill='url(%23fl)' opacity='1'/%3E%3Ccircle cx='200' cy='210' r='118' fill='url(%23gb)'/%3E%3Cpath d='M168 318 L232 318 L246 404 Q200 420 154 404 Z' fill='oklch(0.74 0.13 75)'/%3E%3Cpath d='M168 318 L232 318 L246 404 Q200 420 154 404 Z' fill='url(%23sh)'/%3E%3Crect x='160' y='312' width='80' height='12' rx='6' fill='oklch(0.72 0.1 80)'/%3E%3C/svg%3E" alt=""><span class="mv-mega-menu-promo-eyebrow">New</span><span class="mv-mega-menu-promo-title">The Halo lamp</span><span class="mv-mega-menu-promo-cta">Discover</span></a>
              <a class="mv-mega-menu-promo" href="#candles-poured-in-brooklyn"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.96 0.015 145)'/%3E%3Cstop offset='1' stop-color='oklch(0.89 0.03 150)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cdefs%3E%3ClinearGradient id='gls' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.55'/%3E%3Cstop offset='.3' stop-color='white' stop-opacity='.1'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='.35'/%3E%3C/linearGradient%3E%3CradialGradient id='fg'%3E%3Cstop offset='0' stop-color='oklch(0.95 0.12 90)' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='oklch(0.9 0.12 80)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='200' cy='170' r='120' fill='url(%23fg)'/%3E%3Cellipse cx='200' cy='404' rx='120' ry='14' fill='url(%23fl)' opacity='1'/%3E%3Crect x='120' y='200' width='160' height='200' rx='18' fill='oklch(0.7 0.06 150)'/%3E%3Crect x='120' y='200' width='160' height='200' rx='18' fill='url(%23sh)'/%3E%3Crect x='120' y='200' width='160' height='200' rx='18' fill='url(%23gls)'/%3E%3Cellipse cx='200' cy='214' rx='72' ry='10' fill='oklch(0.95 0.02 85)'/%3E%3Cpath d='M200 214 v-18' stroke='oklch(0.25 0.01 60)' stroke-width='3'/%3E%3Cpath d='M200 150 q14 22 0 42 q-14-20 0-42' fill='oklch(0.85 0.15 75)'/%3E%3Cpath d='M200 166 q6 12 0 24 q-6-12 0-24' fill='white'/%3E%3Crect x='144' y='270' width='112' height='70' rx='4' fill='oklch(0.97 0.01 90)'/%3E%3Ctext x='200' y='302' text-anchor='middle' font-family='Georgia,serif' font-size='18' fill='oklch(0.3 0.02 60)'%3EFig Leaf%3C/text%3E%3Ctext x='200' y='322' text-anchor='middle' font-family='Arial,sans-serif' font-size='9' letter-spacing='2' fill='oklch(0.45 0.02 60)'%3ESOY WAX %C2%B7 6 OZ%3C/text%3E%3C/svg%3E" alt=""><span class="mv-mega-menu-promo-eyebrow">Studio</span><span class="mv-mega-menu-promo-title">Candles poured in Brooklyn</span><span class="mv-mega-menu-promo-cta">View all</span></a>
            </div>
          </div>
        </li>
        <li class="mv-mega-menu-item">
          <button class="mv-mega-menu-trigger">Gifts</button>
          <div class="mv-mega-menu-panel">
            <div class="mv-mega-menu-columns">
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">By budget</p>
                <ul><li><a class="mv-mega-menu-link" href="#under-30">Under $30</a></li><li><a class="mv-mega-menu-link" href="#30-to-60">$30 to $60</a></li><li><a class="mv-mega-menu-link" href="#60-to-120">$60 to $120</a></li><li><a class="mv-mega-menu-link" href="#gift-cards">Gift cards</a></li></ul>
              </div>
              <div class="mv-mega-menu-group">
                <p class="mv-mega-menu-heading">Who’s it for?</p>
                <ul><li><a class="mv-mega-menu-link" href="#for-her">For her</a></li><li><a class="mv-mega-menu-link" href="#for-him">For him</a></li><li><a class="mv-mega-menu-link" href="#for-the-home">For the home</a></li><li><a class="mv-mega-menu-link" href="#for-kids">For kids</a></li></ul>
              </div>
            </div>
            <div class="mv-mega-menu-promos">
              <a class="mv-mega-menu-promo" href="#breakfast-gift-box"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.96 0.015 45)'/%3E%3Cstop offset='1' stop-color='oklch(0.89 0.035 40)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cellipse cx='200' cy='392' rx='130' ry='16' fill='url(%23fl)' opacity='1'/%3E%3Cpath d='M290 220 q64 0 64 60 q0 60-64 60' fill='none' stroke='oklch(0.58 0.13 38)' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M110 170 L290 170 L284 370 Q200 392 116 370 Z' fill='oklch(0.86 0.03 75)'/%3E%3Cpath d='M110 170 L290 170 L287 270 C250 286 236 256 206 280 C176 300 150 266 113 284 Z' fill='oklch(0.58 0.13 38)'/%3E%3Cpath d='M110 170 L290 170 L284 370 Q200 392 116 370 Z' fill='url(%23sh)'/%3E%3Cellipse cx='200' cy='170' rx='90' ry='16' fill='oklch(0.36 0.05 55)'/%3E%3Cellipse cx='200' cy='170' rx='90' ry='16' fill='none' stroke='oklch(0.58 0.13 38)' stroke-width='6' style='filter:brightness(1.1)'/%3E%3C/svg%3E" alt=""><span class="mv-mega-menu-promo-eyebrow">Gift idea</span><span class="mv-mega-menu-promo-title">The breakfast gift box</span><span class="mv-mega-menu-promo-cta">Gift it</span></a>
            </div>
          </div>
        </li>
        <li class="mv-mega-menu-item"><a class="mv-mega-menu-top" href="#journal">Journal</a></li>
        <li class="mv-mega-menu-item"><a class="mv-mega-menu-top" href="#private-sale" data-tone="sale">Private sale</a></li>
        <li class="mv-mega-menu-item" data-mobile-only><a class="mv-mega-menu-link" href="#account">My account</a></li>
        <li class="mv-mega-menu-item" data-mobile-only><a class="mv-mega-menu-link" href="#help-and-contact">Help &amp; contact</a></li>
      </ul>
      <div class="mv-mega-menu-actions">
        <a class="mv-mega-menu-action" href="#search" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></a>
        <a class="mv-mega-menu-action" href="#account" aria-label="My account" data-desktop-only><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg></a>
        <a class="mv-mega-menu-action" href="#wishlist" aria-label="Wishlist" data-desktop-only><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 10c0 5.65-7 10-7 10Z"/></svg></a>
        <a class="mv-mega-menu-action" href="#cart" aria-label="Cart, 3 items"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 8h14l-1.2 12H6.2L5 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg><span class="mv-mega-menu-count" aria-hidden="true">3</span></a>
      </div>
    </nav>
  </mv-mega-menu>
  <section class="hero">
    <h1>Essentials made to last</h1>
    <p>Merino knits, organic cotton and glazed stoneware: a fall collection designed in Brooklyn and made in small batches.</p>
  </section>
  <div class="tiles">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.97 0.012 80)'/%3E%3Cstop offset='1' stop-color='oklch(0.91 0.025 75)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cdefs%3E%3Cpattern id='k' width='12' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0l6 8 6-8' fill='none' stroke='black' stroke-opacity='.09' stroke-width='1.6'/%3E%3C/pattern%3E%3C/defs%3E%3Cellipse cx='200' cy='420' rx='150' ry='18' fill='url(%23fl)' opacity='1'/%3E%3Cpath d='M160 118 Q200 142 240 118 L276 128 Q300 140 310 176 L336 318 L300 331 L268 222 L267 388 Q200 397 133 388 L132 222 L100 331 L64 318 L90 176 Q100 140 124 128 Z' fill='oklch(0.8 0.05 75)'/%3E%3Cpath d='M160 118 Q200 142 240 118 L276 128 Q300 140 310 176 L336 318 L300 331 L268 222 L267 388 Q200 397 133 388 L132 222 L100 331 L64 318 L90 176 Q100 140 124 128 Z' fill='url(%23k)'/%3E%3Cpath d='M160 118 Q200 142 240 118 L276 128 Q300 140 310 176 L336 318 L300 331 L268 222 L267 388 Q200 397 133 388 L132 222 L100 331 L64 318 L90 176 Q100 140 124 128 Z' fill='url(%23sh)'/%3E%3Cpath d='M160 118 Q200 152 240 118 Q200 136 160 118Z' fill='black' fill-opacity='.22'/%3E%3Cpath d='M154 116 Q200 160 246 116' fill='none' stroke='black' stroke-opacity='.12' stroke-width='5'/%3E%3Cpath d='M133 370 Q200 379 267 370 L267 388 Q200 397 133 388 Z' fill='black' fill-opacity='.1'/%3E%3Cpath d='M64 318 L100 331 L103 316 L68 303 Z' fill='black' fill-opacity='.1'/%3E%3Cpath d='M336 318 L300 331 L297 316 L332 303 Z' fill='black' fill-opacity='.1'/%3E%3Cpath d='M132 222 L133 380 M268 222 L267 380' stroke='black' stroke-opacity='.08' stroke-width='3'/%3E%3C/svg%3E" alt="">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.96 0.015 145)'/%3E%3Cstop offset='1' stop-color='oklch(0.89 0.03 150)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cellipse cx='200' cy='392' rx='130' ry='16' fill='url(%23fl)' opacity='1'/%3E%3Cpath d='M290 220 q64 0 64 60 q0 60-64 60' fill='none' stroke='oklch(0.7 0.06 150)' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M110 170 L290 170 L284 370 Q200 392 116 370 Z' fill='oklch(0.86 0.03 75)'/%3E%3Cpath d='M110 170 L290 170 L287 270 C250 286 236 256 206 280 C176 300 150 266 113 284 Z' fill='oklch(0.7 0.06 150)'/%3E%3Cpath d='M110 170 L290 170 L284 370 Q200 392 116 370 Z' fill='url(%23sh)'/%3E%3Cellipse cx='200' cy='170' rx='90' ry='16' fill='oklch(0.36 0.05 55)'/%3E%3Cellipse cx='200' cy='170' rx='90' ry='16' fill='none' stroke='oklch(0.7 0.06 150)' stroke-width='6' style='filter:brightness(1.1)'/%3E%3C/svg%3E" alt="">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.95 0.01 90)'/%3E%3Cstop offset='1' stop-color='oklch(0.87 0.02 85)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cdefs%3E%3CradialGradient id='gb' cx='.38' cy='.34'%3E%3Cstop offset='0' stop-color='white'/%3E%3Cstop offset='1' stop-color='oklch(0.97 0.01 90)' stop-opacity='.85'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='200' cy='424' rx='110' ry='12' fill='url(%23fl)' opacity='1'/%3E%3Ccircle cx='200' cy='210' r='118' fill='url(%23gb)'/%3E%3Ccircle cx='200' cy='210' r='118' fill='none' stroke='black' stroke-opacity='.06' stroke-width='2'/%3E%3Cpath d='M168 318 L232 318 L246 404 Q200 420 154 404 Z' fill='oklch(0.93 0.02 90)'/%3E%3Cpath d='M168 318 L232 318 L246 404 Q200 420 154 404 Z' fill='url(%23sh)'/%3E%3Crect x='160' y='312' width='80' height='12' rx='6' fill='oklch(0.72 0.1 80)'/%3E%3C/svg%3E" alt="">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='oklch(0.96 0.015 230)'/%3E%3Cstop offset='1' stop-color='oklch(0.88 0.035 235)'/%3E%3C/linearGradient%3E%3CradialGradient id='fl'%3E%3Cstop offset='0' stop-color='black' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23bg)'/%3E%3Cellipse cx='200' cy='414' rx='160' ry='14' fill='url(%23fl)' opacity='1'/%3E%3Crect x='96' y='108' width='88' height='300' rx='40' fill='oklch(0.7 0.06 150)'/%3E%3Crect x='96' y='108' width='88' height='300' rx='40' fill='url(%23sh)'/%3E%3Crect x='110' y='70' width='60' height='50' rx='12' fill='oklch(0.3 0.01 270)'/%3E%3Crect x='96' y='170' width='88' height='14' fill='black' fill-opacity='.08'/%3E%3Ctext x='140' y='300' text-anchor='middle' font-family='Arial,sans-serif' font-size='12' letter-spacing='4' fill='white' fill-opacity='.8' transform='rotate(-90 140 300)'%3ELUMEN %C2%B7 750 ML%3C/text%3E%3Crect x='216' y='108' width='88' height='300' rx='40' fill='oklch(0.78 0.07 235)'/%3E%3Crect x='216' y='108' width='88' height='300' rx='40' fill='url(%23sh)'/%3E%3Crect x='230' y='70' width='60' height='50' rx='12' fill='oklch(0.3 0.01 270)'/%3E%3Crect x='216' y='170' width='88' height='14' fill='black' fill-opacity='.08'/%3E%3Ctext x='260' y='300' text-anchor='middle' font-family='Arial,sans-serif' font-size='12' letter-spacing='4' fill='white' fill-opacity='.8' transform='rotate(-90 260 300)'%3ELUMEN %C2%B7 750 ML%3C/text%3E%3C/svg%3E" alt="">
  </div>
</div>

API

Attributes

Name	Type	Default	Description
`breakpoint`	length	`60rem`	Host width below which the menu switches to the mobile drawer (px or rem).
`open-delay / close-delay`	number (ms)	`110 / 260`	Hover intent: open delay (zero when a panel is already open) and close delay when the pointer leaves.
`label`	string	`Menu`	Mobile drawer title and burger button label.
`data-mode`	desktop \| mobile		Set by the component on the host.
`data-mobile-only`	boolean		On a .mv-mega-menu-item: shown only in the drawer (account, help).
`data-desktop-only`	boolean		On a .mv-mega-menu-action: hidden in mobile mode.
`data-featured / data-tone=sale`	boolean / string		On a link: bold highlight / sale color.

Properties

Name	Type	Description
`mode`	'desktop' \| 'mobile'	Current mode (read-only).
`openItem`	HTMLElement \| null	Open top-level item.

Methods

Name	Description
`open(item \| index) / close({ focus })`	Desktop panel.
`openDrawer() / closeDrawer()`	Mobile drawer.

Events

Name	Description
`mv-open / mv-close`	detail: { item, index, via: hover \| click \| keyboard \| api } or { mode: 'mobile' }.
`mv-navigate`	Link click; detail { href, label }. The menu closes.
`mv-mode`	Desktop ⇄ mobile switch; detail { mode }.

Content structure

Name	Description
`nav.mv-mega-menu`	.mv-mega-menu-brand, ul.mv-mega-menu-list, .mv-mega-menu-actions (.mv-mega-menu-action, .mv-mega-menu-count).
`li.mv-mega-menu-item`	button.mv-mega-menu-trigger + .mv-mega-menu-panel, or a.mv-mega-menu-top.
`.mv-mega-menu-panel`	.mv-mega-menu-columns > .mv-mega-menu-group (.mv-mega-menu-heading, ul > a.mv-mega-menu-link, .mv-mega-menu-all, .mv-mega-menu-badge) and .mv-mega-menu-promos > a.mv-mega-menu-promo (img, -eyebrow, -title, -cta).

CSS classes

Name	Description
`mv-mega-menu / -brand / -list / -item / -trigger / -top / -chevron / -panel / -columns / -group / -heading / -link / -all / -badge / -promos / -promo / -actions / -action / -count / -surface / -scrim / -toggle / -drawer / -drawer-header / -drawer-body / -back / -close`	Structure.

Accessibility

“Disclosure navigation” pattern (no role=menu): <button> triggers with aria-expanded/aria-controls, natural tab order. Left/Right arrows and Home/End move between top-level entries (an open panel follows focus), Down arrow opens and enters the panel, Up/Down move between links, Escape closes and returns focus to the trigger; the panel closes when focus leaves it or on outside click. Hover only applies to mouse input. Mobile: modal <dialog> drawer, root screen inert while a sub-screen is shown, “Back” button, Escape goes up one level then closes, focus returns to the burger.