Megamenu
A navigation bar where an item can open a wide panel: a head with a title and a count, a directory with counts down the side, tabbed selections of ranked cards, a cloud of tags, a feature, an aside with recent items, an in-panel filter and a foot. The server sends links and panels; without JavaScript the panels open on hover and focus on large screens and sit open inline on small ones. On init the toggles and the close button appear, hover becomes intentional (short open and close delays), the keyboard gets arrows and Escape, an overlay dims the page, closed panels become inert and a caret points at the open item. Below the staticFrom breakpoint the panels turn into an accordion.
CSS: css/components/megamenu.css (in ivolt.css). JS: @intervolutions/ivolt/megamenu or auto.js. Added in v0.4, rebuilt for 1.0.
<nav class="iv-megamenu iv-megamenu--full" data-iv-component="megamenu" style="--iv-megamenu-art-ratio: 16 / 10; --iv-megamenu-cols: 3" aria-label="Sample magazine navigation. Every headline, date, count and tag below is made up for this demo.">
<ul class="iv-megamenu__list">
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-full-note">Video games</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-vg" hidden><span class="iv-u-sr-only">Open Video games</span></button>
<section class="iv-megamenu__panel" id="mm-vg" aria-labelledby="mm-vg-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">// Section</p>
<h2 class="iv-megamenu__title" id="mm-vg-title">Video games <span class="iv-megamenu__count">75 reviews</span></h2>
<p class="iv-megamenu__tagline">Made-up reviews of made-up hardware, written for this demo.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Video games" hidden></button>
</header>
<div class="iv-megamenu__body">
<aside class="iv-megamenu__directory">
<h3 class="iv-megamenu__heading">And before that</h3>
<ul class="iv-megamenu__dirlist">
<li><a href="#mm-full-note"><span>World of Warcraft: the hard genre, made easy</span><small>04</small></a></li>
<li><a href="#mm-full-note"><span>Taito Station: the arcade as an urban service</span><small>05</small></a></li>
<li><a href="#mm-full-note"><span>Game Boy Advance: the handheld that bought its own catalogue</span><small>06</small></a></li>
</ul>
<a class="iv-megamenu__all" href="#mm-full-note">See the section</a>
</aside>
<div class="iv-megamenu__discover">
<div class="iv-megamenu__tabs" role="tablist" aria-label="Video game selections">
<a class="iv-megamenu__tab" role="tab" id="mm-vg-tab-0" href="#mm-vg-set-0" aria-selected="true">Latest</a>
<a class="iv-megamenu__tab" role="tab" id="mm-vg-tab-1" href="#mm-vg-set-1" aria-selected="false">From the archive</a>
</div>
<div class="iv-megamenu__set" id="mm-vg-set-0" role="tabpanel" aria-labelledby="mm-vg-tab-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="sandbox rules">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf1" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#094D63"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf1)"/><circle cx="160" cy="92" r="60" fill="none" stroke="#73DFFF" stroke-opacity=".7" stroke-width="3"/><circle cx="160" cy="92" r="22" fill="#73DFFF" fill-opacity=".32"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Minecraft: few rules, applied without exception</span>
<span class="iv-megamenu__meta">30 Aug 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="arcade friction">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf2" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#4F5BE6"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf2)"/><path d="M-10 160 96 88 176 136 249 60 330 144V210H-10z" fill="#04070F" fill-opacity=".7"/><circle cx="243" cy="48" r="24" fill="#C2C8FF" fill-opacity=".85"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Air hockey: the machine that only removes friction</span>
<span class="iv-megamenu__meta">22 Aug 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="handheld power">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf3" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0F1D4D"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf3)"/><path d="M19 200 160 24 300 200z" fill="#66B1FF" fill-opacity=".24"/><path d="M105 200 160 120 214 200z" fill="#EAF4FF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Handhelds: winning without competing on power</span>
<span class="iv-megamenu__meta">2 Aug 2026</span>
</a></li>
</ul>
</div>
<div class="iv-megamenu__set" id="mm-vg-set-1" role="tabpanel" aria-labelledby="mm-vg-tab-1" hidden>
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="format cartridge">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf4" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1C2544"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf4)"/><path d="M25 132q67-72 134 0t134 0" fill="none" stroke="#8FE3FF" stroke-opacity=".75" stroke-width="4"/><path d="M25 164q67-48 134 0t134 0" fill="none" stroke="#66B1FF" stroke-opacity=".5" stroke-width="3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Cartridges: the format that refused to die</span>
<span class="iv-megamenu__meta">18 Jul 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="sound chip">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf5" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#172F7A"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf5)"/><rect x="48" y="40" width="224" height="115" rx="10" fill="none" stroke="#FF9AA4" stroke-opacity=".6" stroke-width="3"/><path d="M89 124h64M89 98h140M89 72h102" stroke="#FF9AA4" stroke-opacity=".65" stroke-width="6" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Sound chips: three voices and a whole decade</span>
<span class="iv-megamenu__meta">9 Jul 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="isometric dimension">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf6" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#0B6B8A"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf6)"/><circle cx="108" cy="76" r="52" fill="#66B1FF" fill-opacity=".38"/><circle cx="217" cy="120" r="68" fill="#73DFFF" fill-opacity=".26"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Isometry: the trick that faked a third dimension</span>
<span class="iv-megamenu__meta">1 Jul 2026</span>
</a></li>
</ul>
</div>
<a class="iv-megamenu__feature" href="#mm-full-note">
<span class="iv-megamenu__flag">Most read</span>
<span class="iv-megamenu__feature-title">I Have No Mouth, and I Must Scream: the game that turned guilt into a mechanic</span>
<span class="iv-megamenu__feature-meta"><b>2,381</b> reads</span>
</a>
<section class="iv-megamenu__cloud">
<h3 class="iv-megamenu__heading">Search by</h3>
<a href="#mm-full-note">Retro <small>90</small></a>
<a href="#mm-full-note">Arcades <small>32</small></a>
<a href="#mm-full-note">Eighties games <small>20</small></a>
<a href="#mm-full-note">Peripherals <small>15</small></a>
<a href="#mm-full-note">Nineties games <small>15</small></a>
<a href="#mm-full-note">History of technology <small>11</small></a>
<a href="#mm-full-note">Consoles <small>9</small></a>
</section>
</div>
</div>
<footer class="iv-megamenu__foot">
<span class="iv-megamenu__crumb">Magazine <b aria-hidden="true">/</b> Video games</span>
<a class="iv-megamenu__foot-link" href="#mm-full-note">Pitch a review</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">magazine:~$</span><span class="iv-megamenu__cmd">ls /video-games</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">Esc to close</span></p>
</footer>
<ol class="iv-megamenu__ticker">
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">01</span>Adobe Audition: the editor that fixes what is not broken</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">02</span>Folding phones: a moving part under the screen</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">03</span>Minecraft: few rules, applied without exception</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">04</span>BlackBerry: the network that tied its own hands</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">05</span>Wrist sensors: measuring the light that comes back</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">06</span>Mechanical keyboards: the sound of a decision</a></li>
</ol>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-full-note">Hardware</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-hw" hidden><span class="iv-u-sr-only">Open Hardware</span></button>
<section class="iv-megamenu__panel" id="mm-hw" aria-labelledby="mm-hw-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">// Section</p>
<h2 class="iv-megamenu__title" id="mm-hw-title">Hardware <span class="iv-megamenu__count">48 reviews</span></h2>
<p class="iv-megamenu__tagline">Nothing here was tested: the bench figures are invented.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Hardware" hidden></button>
</header>
<div class="iv-megamenu__body">
<aside class="iv-megamenu__directory">
<h3 class="iv-megamenu__heading">And before that</h3>
<ul class="iv-megamenu__dirlist">
<li><a href="#mm-full-note"><span>Thermal paste: the half degree nobody feels</span><small>04</small></a></li>
<li><a href="#mm-full-note"><span>Fan curves: quiet is a setting, not a feature</span><small>05</small></a></li>
<li><a href="#mm-full-note"><span>Power supplies: the part that is only noticed once</span><small>06</small></a></li>
</ul>
<a class="iv-megamenu__all" href="#mm-full-note">See the section</a>
</aside>
<div class="iv-megamenu__discover">
<div class="iv-megamenu__tabs" role="tablist" aria-label="Hardware selections">
<a class="iv-megamenu__tab" role="tab" id="mm-hw-tab-0" href="#mm-hw-set-0" aria-selected="true">Latest</a>
<a class="iv-megamenu__tab" role="tab" id="mm-hw-tab-1" href="#mm-hw-set-1" aria-selected="false">Bench notes</a>
</div>
<div class="iv-megamenu__set" id="mm-hw-set-0" role="tabpanel" aria-labelledby="mm-hw-tab-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf7" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#313996"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf7)"/><rect x="48" y="40" width="224" height="115" rx="10" fill="none" stroke="#8B95FF" stroke-opacity=".6" stroke-width="3"/><path d="M89 124h64M89 98h140M89 72h102" stroke="#C2C8FF" stroke-opacity=".65" stroke-width="6" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Keyboards: the sound of a decision</span>
<span class="iv-megamenu__meta">28 Aug 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf8" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#172F7A"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf8)"/><circle cx="108" cy="76" r="52" fill="#66B1FF" fill-opacity=".38"/><circle cx="217" cy="120" r="68" fill="#66B1FF" fill-opacity=".26"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Monitors: the frame that arrives too late</span>
<span class="iv-megamenu__meta">19 Aug 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf9" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf9)"/><circle cx="160" cy="92" r="60" fill="none" stroke="#8FE3FF" stroke-opacity=".7" stroke-width="3"/><circle cx="160" cy="92" r="22" fill="#8FE3FF" fill-opacity=".32"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Docks: one cable, six compromises</span>
<span class="iv-megamenu__meta">7 Aug 2026</span>
</a></li>
</ul>
</div>
<div class="iv-megamenu__set" id="mm-hw-set-1" role="tabpanel" aria-labelledby="mm-hw-tab-1" hidden>
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf10" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#FBBF24"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf10)"/><path d="M-10 160 96 88 176 136 249 60 330 144V210H-10z" fill="#04070F" fill-opacity=".7"/><circle cx="243" cy="48" r="24" fill="#FF9AA4" fill-opacity=".85"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Idle draw: the watt that never sleeps</span>
<span class="iv-megamenu__meta">12 Jul 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf11" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#094D63"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf11)"/><path d="M19 200 160 24 300 200z" fill="#73DFFF" fill-opacity=".24"/><path d="M105 200 160 120 214 200z" fill="#E6FBFF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Fan noise: measuring what the ear forgives</span>
<span class="iv-megamenu__meta">3 Jul 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf12" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#262C6E"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf12)"/><path d="M25 132q67-72 134 0t134 0" fill="none" stroke="#8B95FF" stroke-opacity=".75" stroke-width="4"/><path d="M25 164q67-48 134 0t134 0" fill="none" stroke="#66B1FF" stroke-opacity=".5" stroke-width="3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Screen coatings: light that leaves twice</span>
<span class="iv-megamenu__meta">26 Jun 2026</span>
</a></li>
</ul>
</div>
<section class="iv-megamenu__cloud">
<h3 class="iv-megamenu__heading">Search by</h3>
<a href="#mm-full-note">Keyboards <small>21</small></a>
<a href="#mm-full-note">Displays <small>17</small></a>
<a href="#mm-full-note">Storage <small>12</small></a>
<a href="#mm-full-note">Cooling <small>8</small></a>
</section>
</div>
</div>
<footer class="iv-megamenu__foot">
<span class="iv-megamenu__crumb">Magazine <b aria-hidden="true">/</b> Hardware</span>
<a class="iv-megamenu__foot-link" href="#mm-full-note">Pitch a review</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">magazine:~$</span><span class="iv-megamenu__cmd">ls /hardware</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">Esc to close</span></p>
</footer>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-full-note">Software</a>
</li>
</ul>
</nav>
<p id="mm-full-note">Sample magazine header, not a real publication: every headline, date, read count and tag is invented, and every link on this page points to this note. The panel opens edge to edge under the bar (<code>iv-megamenu--full</code>) and closes the row with a strip of six numbered headlines.</p>
<section class="iv-stack" style="min-block-size: 60vh">
<h2>Room below the bar</h2>
<p>Filler text, so the full-width panel has a page to cover while it is open. Nothing on this page is fetched from anywhere.</p>
</section>.iv-root {
--iv-megamenu-art-ratio: 16 / 10;
--iv-megamenu-cols: 3;
}// data-iv-component="megamenu"
{
keywords: "sandbox rules",
}01
Anatomy
Only iv-megamenu__head and iv-megamenu__body are required inside a panel; every other region is optional and they combine freely.
The bar is iv-megamenu with iv-megamenu__list, and each iv-megamenu__item carries an iv-megamenu__link, an iv-megamenu__toggle and an iv-megamenu__panel.
| Region | Holds |
|---|---|
iv-megamenu__head | iv-megamenu__overline, iv-megamenu__title with an iv-megamenu__count pill, iv-megamenu__tagline and iv-megamenu__close (served hidden; init shows it). |
iv-megamenu__filter | A search iv-input with iv-megamenu__filter-input and an iv-megamenu__kbd hint. Served hidden: without JavaScript it would filter nothing. |
iv-megamenu__body | Up to three columns: iv-megamenu__directory (14rem), iv-megamenu__discover (the rest) and iv-megamenu__aside (16rem). |
iv-megamenu__directory | An iv-megamenu__heading, an iv-megamenu__dirlist whose rows are <span> plus <small> (the count, in tabular figures) and an iv-megamenu__all button across the foot of the column. |
iv-megamenu__discover | iv-megamenu__tabs with iv-megamenu__tab, one iv-megamenu__set per tab holding iv-megamenu__cards of iv-megamenu__card (iv-megamenu__art with iv-megamenu__rank and iv-megamenu__arrow, then iv-megamenu__name and iv-megamenu__meta), plus an optional iv-megamenu__cloud of tags and an iv-megamenu__feature with its iv-megamenu__flag, iv-megamenu__feature-title and iv-megamenu__feature-meta. |
iv-megamenu__aside | iv-megamenu__recent rows of iv-megamenu__thumb, iv-megamenu__recent-title and iv-megamenu__date, and iv-megamenu__facets, which reads like the dirlist. |
iv-megamenu__foot | iv-megamenu__crumb, iv-megamenu__foot-link and an iv-megamenu__status line written as a terminal: iv-megamenu__prompt, iv-megamenu__cmd, iv-megamenu__caret-blink and iv-megamenu__hint. |
iv-megamenu__ticker | A strip of up to six numbered headlines under the panel. A plain ordered list without JavaScript. |
Two more elements belong to the running component and are never written by hand: iv-megamenu__overlay, the scrim init inserts to dim the page behind an open panel, and iv-megamenu__empty, the line the filter shows when a query matches nothing.
02
A bar with three panels
The default panel is centred under the bar, capped at --iv-megamenu-width, with a caret pointing at the open item.
<nav class="iv-megamenu" data-iv-component="megamenu" aria-label="Sample main navigation. Every section, title, count and studio below is made up for this demo.">
<ul class="iv-megamenu__list">
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-note">Games</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-games" hidden><span class="iv-u-sr-only">Open Games</span></button>
<section class="iv-megamenu__panel" id="mm-games" aria-labelledby="mm-games-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">Explore the archive</p>
<h2 class="iv-megamenu__title" id="mm-games-title">Games <span class="iv-megamenu__count">959</span></h2>
<p class="iv-megamenu__tagline">Your next game starts here. Nothing on this page is a real catalogue.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Games" hidden></button>
</header>
<div class="iv-megamenu__body">
<aside class="iv-megamenu__directory">
<h3 class="iv-megamenu__heading">Pick a genre</h3>
<ul class="iv-megamenu__dirlist">
<li><a href="#mm-note"><span>Graphic adventure</span><small>131</small></a></li>
<li><a href="#mm-note"><span>Adventure</span><small>182</small></a></li>
<li><a href="#mm-note"><span>Racing</span><small>58</small></a></li>
<li><a href="#mm-note"><span>Sport</span><small>32</small></a></li>
<li><a href="#mm-note"><span>Shooters</span><small>162</small></a></li>
<li><a href="#mm-note"><span>Strategy</span><small>139</small></a></li>
<li><a href="#mm-note"><span>Board games</span><small>23</small></a></li>
<li><a href="#mm-note"><span>Role-playing</span><small>79</small></a></li>
</ul>
<a class="iv-megamenu__all" href="#mm-note">Browse the catalogue</a>
</aside>
<div class="iv-megamenu__discover">
<div class="iv-megamenu__tabs" role="tablist" aria-label="Game selections">
<a class="iv-megamenu__tab" role="tab" id="mm-games-tab-0" href="#mm-games-set-0" aria-selected="true">Most popular</a>
<a class="iv-megamenu__tab" role="tab" id="mm-games-tab-1" href="#mm-games-set-1" aria-selected="false">Best rated</a>
</div>
<div class="iv-megamenu__set" id="mm-games-set-0" role="tabpanel" aria-labelledby="mm-games-tab-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="adventure signal">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb1" x1="0" y1="0" x2="300" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#094D63"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb1)"/><circle cx="150" cy="176" r="87" fill="none" stroke="#73DFFF" stroke-opacity=".7" stroke-width="3"/><circle cx="150" cy="176" r="33" fill="#73DFFF" fill-opacity=".3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Orbit Signal</span>
<span class="iv-megamenu__meta">Adventure · 1997</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="strategy harbour">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb2" x1="0" y1="400" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#4F5BE6"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb2)"/><path d="M-10 304 90 192l69 80 81-120 81 96v160H-10z" fill="#04070F" fill-opacity=".72"/><circle cx="225" cy="92" r="30" fill="#C2C8FF" fill-opacity=".85"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Quiet Harbour</span>
<span class="iv-megamenu__meta">Strategy · 1999</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="role summit">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><radialGradient id="mmb3" cx="150" cy="140" r="240" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0F1D4D"/></radialGradient></defs><rect width="300" height="400" fill="url(#mmb3)"/><path d="M21 400 150 40 279 400z" fill="#66B1FF" fill-opacity=".22"/><path d="M96 400 150 236 204 400z" fill="#EAF4FF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Paper Summit</span>
<span class="iv-megamenu__meta">Role-playing · 2003</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="shooter dial">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb4" x1="0" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1C2544"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb4)"/><path d="M30 248q60-136 120 0t120 0" fill="none" stroke="#8FE3FF" stroke-opacity=".75" stroke-width="4"/><path d="M30 312q60-88 120 0t120 0" fill="none" stroke="#66B1FF" stroke-opacity=".5" stroke-width="3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">04</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Long Dial</span>
<span class="iv-megamenu__meta">Shooters · 2004</span>
</a></li>
</ul>
</div>
<div class="iv-megamenu__set" id="mm-games-set-1" role="tabpanel" aria-labelledby="mm-games-tab-1" hidden>
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="board notes">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb5" x1="300" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#172F7A"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb5)"/><rect x="48" y="96" width="204" height="200" rx="10" fill="none" stroke="#FF9AA4" stroke-opacity=".6" stroke-width="3"/><path d="M90 248h60M90 200h120M90 152h90" stroke="#FF9AA4" stroke-opacity=".65" stroke-width="6" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Field Notes</span>
<span class="iv-megamenu__meta">Board games · 1994</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="racing sun">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb6" x1="0" y1="0" x2="300" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb6)"/><circle cx="108" cy="144" r="66" fill="#66B1FF" fill-opacity=".4"/><circle cx="198" cy="224" r="90" fill="#73DFFF" fill-opacity=".25"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Second Sun</span>
<span class="iv-megamenu__meta">Racing · 1998</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="adventure kite">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb7" x1="0" y1="400" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#262C6E"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb7)"/><path d="M150 56 258 200 150 344 42 200z" fill="none" stroke="#8B95FF" stroke-opacity=".7" stroke-width="3"/><circle cx="150" cy="200" r="24" fill="#8B95FF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Hollow Kite</span>
<span class="iv-megamenu__meta">Adventure · 2001</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="sport meridian">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb8" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0F1D4D"/><stop offset=".55" stop-color="#2266D8"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb8)"/><path d="M0 280h300" stroke="#66B1FF" stroke-opacity=".6" stroke-width="3"/><path d="M60 280 102 152 150 231 198 104 245 280" fill="none" stroke="#EAF4FF" stroke-opacity=".8" stroke-width="4" stroke-linejoin="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">04</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Tin Meridian</span>
<span class="iv-megamenu__meta">Sport · 2006</span>
</a></li>
</ul>
</div>
<section class="iv-megamenu__cloud">
<h3 class="iv-megamenu__heading">The names behind the games</h3>
<a href="#mm-note">Northlight <small>24</small></a>
<a href="#mm-note">Paper Anvil <small>18</small></a>
<a href="#mm-note">Dinamic Hall <small>15</small></a>
<a href="#mm-note">Slow Signal <small>12</small></a>
<a href="#mm-note">Blue Meridian <small>9</small></a>
<a href="#mm-note">Hollow Works <small>7</small></a>
</section>
</div>
</div>
<footer class="iv-megamenu__foot">
<span class="iv-megamenu__crumb">Archive <b aria-hidden="true">/</b> Games</span>
<a class="iv-megamenu__foot-link" href="#mm-note">Suggest a classic</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">archive:~$</span><span class="iv-megamenu__cmd">ls /games</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">Esc to close</span></p>
</footer>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-note">Films</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-films" hidden><span class="iv-u-sr-only">Open Films</span></button>
<section class="iv-megamenu__panel" id="mm-films" aria-labelledby="mm-films-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">Explore the archive</p>
<h2 class="iv-megamenu__title" id="mm-films-title">Films <span class="iv-megamenu__count">412</span></h2>
<p class="iv-megamenu__tagline">Invented titles, invented years, invented studios.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Films" hidden></button>
</header>
<div class="iv-megamenu__body">
<aside class="iv-megamenu__directory">
<h3 class="iv-megamenu__heading">Pick a genre</h3>
<ul class="iv-megamenu__dirlist">
<li><a href="#mm-note"><span>Noir</span><small>44</small></a></li>
<li><a href="#mm-note"><span>Science fiction</span><small>61</small></a></li>
<li><a href="#mm-note"><span>Documentary</span><small>28</small></a></li>
<li><a href="#mm-note"><span>Animation</span><small>37</small></a></li>
<li><a href="#mm-note"><span>Shorts</span><small>19</small></a></li>
</ul>
<a class="iv-megamenu__all" href="#mm-note">Browse the shelf</a>
</aside>
<div class="iv-megamenu__discover">
<div class="iv-megamenu__tabs" role="tablist" aria-label="Film selections">
<a class="iv-megamenu__tab" role="tab" id="mm-films-tab-0" href="#mm-films-set-0" aria-selected="true">Most watched</a>
<a class="iv-megamenu__tab" role="tab" id="mm-films-tab-1" href="#mm-films-set-1" aria-selected="false">Restored</a>
</div>
<div class="iv-megamenu__set" id="mm-films-set-0" role="tabpanel" aria-labelledby="mm-films-tab-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><radialGradient id="mmb9" cx="150" cy="140" r="240" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0C1330"/></radialGradient></defs><rect width="300" height="400" fill="url(#mmb9)"/><path d="M21 400 150 40 279 400z" fill="#8FE3FF" fill-opacity=".22"/><path d="M96 400 150 236 204 400z" fill="#F5F7FC" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Cold Aperture</span>
<span class="iv-megamenu__meta">Noir · 1962</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb10" x1="0" y1="0" x2="300" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0F1D4D"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb10)"/><circle cx="150" cy="176" r="87" fill="none" stroke="#FF9AA4" stroke-opacity=".7" stroke-width="3"/><circle cx="150" cy="176" r="33" fill="#FF9AA4" fill-opacity=".3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Signal Drift</span>
<span class="iv-megamenu__meta">Science fiction · 1978</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb11" x1="300" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#052F3D"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb11)"/><rect x="48" y="96" width="204" height="200" rx="10" fill="none" stroke="#73DFFF" stroke-opacity=".6" stroke-width="3"/><path d="M90 248h60M90 200h120M90 152h90" stroke="#A6EFFF" stroke-opacity=".65" stroke-width="6" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">The Slow Room</span>
<span class="iv-megamenu__meta">Documentary · 1985</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb12" x1="0" y1="400" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#262C6E"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb12)"/><path d="M150 56 258 200 150 344 42 200z" fill="none" stroke="#8B95FF" stroke-opacity=".7" stroke-width="3"/><circle cx="150" cy="200" r="24" fill="#8B95FF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">04</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Paper Moonlight</span>
<span class="iv-megamenu__meta">Animation · 1991</span>
</a></li>
</ul>
</div>
<div class="iv-megamenu__set" id="mm-films-set-1" role="tabpanel" aria-labelledby="mm-films-tab-1" hidden>
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb13" x1="0" y1="0" x2="300" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb13)"/><circle cx="108" cy="144" r="66" fill="#66B1FF" fill-opacity=".4"/><circle cx="198" cy="224" r="90" fill="#66B1FF" fill-opacity=".25"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Second Reel</span>
<span class="iv-megamenu__meta">Shorts · 1969</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb14" x1="0" y1="400" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#1D4FC4"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb14)"/><path d="M-10 304 90 192l69 80 81-120 81 96v160H-10z" fill="#04070F" fill-opacity=".72"/><circle cx="225" cy="92" r="30" fill="#D6E9FF" fill-opacity=".85"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Quiet Tide</span>
<span class="iv-megamenu__meta">Noir · 1974</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb15" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0F1D4D"/><stop offset=".55" stop-color="#FBBF24"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb15)"/><path d="M0 280h300" stroke="#FF9AA4" stroke-opacity=".6" stroke-width="3"/><path d="M60 280 102 152 150 231 198 104 245 280" fill="none" stroke="#FFF8E6" stroke-opacity=".8" stroke-width="4" stroke-linejoin="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Wire and Salt</span>
<span class="iv-megamenu__meta">Documentary · 1988</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb16" x1="0" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0B6B8A"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb16)"/><path d="M30 248q60-136 120 0t120 0" fill="none" stroke="#73DFFF" stroke-opacity=".75" stroke-width="4"/><path d="M30 312q60-88 120 0t120 0" fill="none" stroke="#66B1FF" stroke-opacity=".5" stroke-width="3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">04</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Blue Orbit</span>
<span class="iv-megamenu__meta">Science fiction · 1994</span>
</a></li>
</ul>
</div>
<section class="iv-megamenu__cloud">
<h3 class="iv-megamenu__heading">Distributors</h3>
<a href="#mm-note">Lumen Reels <small>14</small></a>
<a href="#mm-note">Anvil Pictures <small>11</small></a>
<a href="#mm-note">Slow Frame <small>8</small></a>
<a href="#mm-note">Hollow Lab <small>6</small></a>
</section>
</div>
</div>
<footer class="iv-megamenu__foot">
<span class="iv-megamenu__crumb">Archive <b aria-hidden="true">/</b> Films</span>
<a class="iv-megamenu__foot-link" href="#mm-note">Suggest a print</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">archive:~$</span><span class="iv-megamenu__cmd">ls /films</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">Esc to close</span></p>
</footer>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-note">Stories</a>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-note">Forums</a>
</li>
</ul>
</nav>
<p id="mm-note">Sample navigation, not a real site: every link above points to this note, and the counts, titles, years and studios are invented for the demo. Without JavaScript the two panels open on hover and on keyboard focus from the <code>lg</code> breakpoint upwards, the tabs are links that reveal their own set, and everything stays open inline below that breakpoint. With JavaScript the chevrons and the close button appear, a caret points at the open item, the page dims behind the panel and the panels become an accordion on narrow screens.</p>// data-iv-component="megamenu"
{
keywords: "adventure signal",
}03
Filter, glass and dense cards
iv-megamenu--glass blurs what sits behind the panel, iv-megamenu--dense trades card size for more of them, and the filter narrows everything in the panel at once.
<nav class="iv-megamenu iv-megamenu--glass iv-megamenu--dense" data-iv-component="megamenu" aria-label="Sample archive navigation. Every sector, file count, date and heading below is made up for this demo.">
<ul class="iv-megamenu__list">
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-filter-note">Files</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-files" hidden><span class="iv-u-sr-only">Open Files</span></button>
<section class="iv-megamenu__panel" id="mm-files" aria-labelledby="mm-files-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">Archive sectors</p>
<h2 class="iv-megamenu__title" id="mm-files-title">Sectors <span class="iv-megamenu__count">9 sectors</span> <span class="iv-megamenu__count">Encrypted</span></h2>
<p class="iv-megamenu__tagline">A fictional archive: the sectors, counts and dates are written for this demo.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Sectors" hidden></button>
</header>
<div class="iv-megamenu__filter" hidden>
<label class="iv-u-sr-only" for="mm-files-q">Filter sectors</label>
<input class="iv-input iv-megamenu__filter-input" id="mm-files-q" type="search" placeholder="Filter sectors…">
<kbd class="iv-megamenu__kbd">Esc</kbd>
</div>
<div class="iv-megamenu__body">
<div class="iv-megamenu__discover">
<div class="iv-megamenu__set" id="mm-files-set-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="declassified paper">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq1" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#094D63"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq1)"/><circle cx="160" cy="100" r="64" fill="none" stroke="#73DFFF" stroke-opacity=".65" stroke-width="3"/><circle cx="160" cy="100" r="24" fill="#73DFFF" fill-opacity=".3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Declassified files</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="bases places">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq2" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#4F5BE6"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq2)"/><path d="M-10 164 89 92 172 140 249 64 330 148V210H-10z" fill="#04070F" fill-opacity=".68"/><circle cx="249" cy="48" r="26" fill="#C2C8FF" fill-opacity=".8"/></svg><span class="iv-megamenu__rank" aria-hidden="true">13</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Bases and forbidden places</span>
<span class="iv-megamenu__meta">13 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="cryptohistory mystery">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq3" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0F1D4D"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq3)"/><path d="M16 200 160 32 304 200z" fill="#66B1FF" fill-opacity=".22"/><path d="M108 200 160 124 211 200z" fill="#EAF4FF" fill-opacity=".5"/></svg><span class="iv-megamenu__rank" aria-hidden="true">14</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Cryptohistory of the mystery</span>
<span class="iv-megamenu__meta">14 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="state shadow">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq4" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1C2544"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq4)"/><path d="M19 136q70-80 140 0t140 0" fill="none" stroke="#8FE3FF" stroke-opacity=".7" stroke-width="4"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">The state and the shadow</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="figures enigma">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq5" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#172F7A"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq5)"/><rect x="57" y="44" width="204" height="112" rx="10" fill="none" stroke="#FF9AA4" stroke-opacity=".55" stroke-width="3"/><path d="M96 124h57M96 100h128M96 76h89" stroke="#FF9AA4" stroke-opacity=".6" stroke-width="5" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Figures of the enigma</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="signals noise">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq6" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#0B6B8A"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq6)"/><circle cx="102" cy="80" r="60" fill="#66B1FF" fill-opacity=".35"/><circle cx="224" cy="124" r="76" fill="#73DFFF" fill-opacity=".24"/></svg><span class="iv-megamenu__rank" aria-hidden="true">17</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Signals and noise</span>
<span class="iv-megamenu__meta">17 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="technology">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq7" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#171A45"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq7)"/><circle cx="160" cy="100" r="64" fill="none" stroke="#8B95FF" stroke-opacity=".65" stroke-width="3"/><circle cx="160" cy="100" r="24" fill="#8B95FF" fill-opacity=".3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Non-human technology</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="skies sightings">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq8" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#2266D8"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq8)"/><path d="M-10 164 89 92 172 140 249 64 330 148V210H-10z" fill="#04070F" fill-opacity=".68"/><circle cx="249" cy="48" r="26" fill="#B3D6FF" fill-opacity=".8"/></svg><span class="iv-megamenu__rank" aria-hidden="true">22</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Skies and sightings</span>
<span class="iv-megamenu__meta">22 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="whistleblowers witnesses">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq9" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq9)"/><path d="M16 200 160 32 304 200z" fill="#8FE3FF" fill-opacity=".22"/><path d="M108 200 160 124 211 200z" fill="#F5F7FC" fill-opacity=".5"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Whistleblowers and witnesses</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
</ul>
</div>
</div>
<aside class="iv-megamenu__aside">
<h3 class="iv-megamenu__heading">Latest files</h3>
<ul class="iv-megamenu__recent">
<li><a href="#mm-filter-note"><span class="iv-megamenu__thumb"><svg viewBox="0 0 80 80" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq10" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0F1D4D"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="80" height="80" fill="url(#mmq10)"/><circle cx="40" cy="40" r="25" fill="none" stroke="#FF9AA4" stroke-opacity=".65" stroke-width="3"/><circle cx="40" cy="40" r="9" fill="#FF9AA4" fill-opacity=".3"/></svg></span><span class="iv-megamenu__recent-title">Flying Saucer Working Party: five agents against the sky</span><time class="iv-megamenu__date" datetime="2026-09-15">15.09.26</time></a></li>
<li><a href="#mm-filter-note"><span class="iv-megamenu__thumb"><svg viewBox="0 0 80 80" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq11" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#17AAD6"/></linearGradient></defs><rect width="80" height="80" fill="url(#mmq11)"/><path d="M-10 65 22 36 43 56 62 25 90 59V90H-10z" fill="#04070F" fill-opacity=".68"/><circle cx="62" cy="19" r="10" fill="#A6EFFF" fill-opacity=".8"/></svg></span><span class="iv-megamenu__recent-title">Project Sign and the step to Grudge: when the file changed name</span><time class="iv-megamenu__date" datetime="2026-09-15">15.09.26</time></a></li>
<li><a href="#mm-filter-note"><span class="iv-megamenu__thumb"><svg viewBox="0 0 80 80" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq12" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#171A45"/></linearGradient></defs><rect width="80" height="80" fill="url(#mmq12)"/><path d="M4 80 40 12 76 80z" fill="#8B95FF" fill-opacity=".22"/><path d="M27 80 40 49 52 80z" fill="#EEF0FF" fill-opacity=".5"/></svg></span><span class="iv-megamenu__recent-title">Psychophonics: how a brain manufactures a voice</span><time class="iv-megamenu__date" datetime="2026-09-15">06.09.26</time></a></li>
<li><a href="#mm-filter-note"><span class="iv-megamenu__thumb"><svg viewBox="0 0 80 80" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq13" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#172F7A"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="80" height="80" fill="url(#mmq13)"/><path d="M4 54q17-32 35 0t35 0" fill="none" stroke="#66B1FF" stroke-opacity=".7" stroke-width="4"/></svg></span><span class="iv-megamenu__recent-title">The Taos hum: four laboratories, one motor</span><time class="iv-megamenu__date" datetime="2026-09-15">05.09.26</time></a></li>
</ul>
<h3 class="iv-megamenu__heading">By type of record</h3>
<ul class="iv-megamenu__facets">
<li><a href="#mm-filter-note"><span>Documents</span><small>15</small></a></li>
<li><a href="#mm-filter-note"><span>Events</span><small>7</small></a></li>
<li><a href="#mm-filter-note"><span>Testimonies</span><small>12</small></a></li>
<li><a href="#mm-filter-note"><span>People</span><small>24</small></a></li>
</ul>
</aside>
</div>
<footer class="iv-megamenu__foot">
<a class="iv-megamenu__foot-link" href="#mm-filter-note">Open the whole archive</a>
<a class="iv-megamenu__foot-link" href="#mm-filter-note">Send a lead</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">archive:~$</span><span class="iv-megamenu__cmd">ls /sectors</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">// end of index</span></p>
</footer>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-filter-note">Central</a>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-filter-note">Comms</a>
</li>
</ul>
</nav>
<p id="mm-filter-note">Sample archive navigation, not a real archive: every sector, count, date and file name is invented, and every link on this page points to this note. With JavaScript the panel gains a filter: type in it and only the cards, recent files and headings that match stay on screen, with the number of matches announced to screen readers. Without JavaScript the filter stays hidden, because nothing would filter.</p>
<section class="iv-stack" style="min-block-size: 70vh">
<h2>Something to read through the glass</h2>
<p>Filler text under the bar, so the frosted panel has a page behind it. Nothing on this page is fetched from anywhere, and no lead is sent anywhere.</p>
<p>The panel is a <code>iv-megamenu--glass</code> surface with <code>iv-megamenu--dense</code> cards: a wider frame of art and three columns instead of four.</p>
</section>// data-iv-component="megamenu"
{
keywords: "declassified paper",
}Typing in the filter leaves visible only the cards, dirlist rows, cloud tags, recent rows and ticker headlines whose text — or data-iv-keywords — matches, ignoring diacritics. Groups left with nothing are hidden, iv-megamenu__empty appears with emptyText, and the foot status line announces the count with countText to assistive technology. Escape with text in the field clears it before it closes the panel.
04
Options
| Option | Attribute | Default | Effect |
|---|---|---|---|
hover | data-iv-hover | true | Open on intentional hover with fine pointers; false opens only on click and keyboard. |
openDelay, closeDelay | data-iv-open-delay, data-iv-close-delay | 120, 320 | Milliseconds before a hover opens or closes a panel. |
staticFrom | data-iv-static-from | lg | Breakpoint from which panels float; below it they behave as an accordion. |
overlay | data-iv-overlay | true | Dim the page behind an open panel. A megamenu hosted in a navbar should set it to false: the bar is already the raised surface. |
closeOthers | data-iv-close-others | true | Opening an item closes the others. |
filter | data-iv-filter | true | Reveal and wire the iv-megamenu__filter of a panel that has one. false leaves the field hidden. |
emptyText | data-iv-empty-text | "No matches" | The line shown when a query matches nothing. |
countText | data-iv-count-text | "{count} results" | Announced after each filter run; {count} is replaced by the number left visible. |
closeText | data-iv-close-text | "Close" | Accessible name of a close button that has none of its own. |
Locals: --iv-megamenu-width, --iv-megamenu-offset, --iv-megamenu-cols, --iv-megamenu-art-ratio and --iv-megamenu-accent. The component writes --iv-megamenu-caret-x on the root to place the caret under the open toggle, and the sheet counts entrance steps with --iv-i. A megamenu whose bar is not centred on the page — inside a header, for instance — should set --iv-megamenu-width to something like 56rem, or the panel hangs off the viewport. The header of this site does exactly that.
05
Methods and events
Methods: open(itemOrIndex), close(reason), toggle(itemOrIndex), selectTab(item, index) to show a selection from script, filter(item, query) to run the filter without typing, and destroy(). Read openItem. Indices count every item in the bar, and an item without a panel is a no-op.
Events on the root: iv:open and iv:close (cancelable) then iv:opened and iv:closed, with detail.item and a reason. iv:change is cancelable and fires before a tab changes, followed by iv:changed, with the item and the index. iv:filter fires after each filter run and is not cancelable; its detail carries the query, the number of rows left visible and the item being filtered.
06
Keyboard and assistive technology
Tab reaches links and toggles in order; Enter, Space or Down on a toggle opens its panel, Left and Right move between toggles and Home and End jump. Escape closes and returns focus to the toggle; Tab out of a panel closes it. Inside a panel the tabs are a proper tablist: role="tab", aria-selected, a roving tabindex, Left and Right between them. Toggles carry aria-expanded and aria-controls; closed panels are inert. The links stay plain links, so no menu roles are used.
07
Without JavaScript
Each link navigates. From staticFrom up a panel shows while its item is hovered or focused; below it the panels are open inline under their links. The toggles, the close button and the filter stay hidden, and a tab is a link to its own set, shown by :target.
08
Common mistakes
- Putting essential links only inside panels: the item link itself should lead to the section.
- More than five or six items: a megamenu is wide; consider a sidebar or a search.
- Counts that are decoration. A number beside a name is read as a promise; if it is not real, leave it out.
- Very tall panels: keep them under the viewport height or they will scroll internally.