20 CSS Mega Menus
14 / 20

All 20 in 20 CSS Mega Menus

  1. 01Mega Menu Reference Build with Focus Within
  2. 02Hover Intent Delay to Stop Panel Flicker
  3. 03The Safe Triangle Diagonal Pointer Problem
  4. 04Mega Menu Column Layout with CSS Grid
  5. 05Panel Positioning and Viewport Edge Collision
  6. 06Full Bleed Panel Inside a Constrained Header
  7. 07Keyboard Accessible Mega Menu with Escape
  8. 08Arrow Key Navigation Across Menu Columns
  9. 09ARIA for Disclosure Style Navigation Panels
  10. 10Mega Menu Touch and Double Tap Behavior
  11. 11Screen Reader Announcements on Panel Open
  12. 12Shared Panel That Swaps Content Between Items
  13. 13Mega Menu Entry Transition with Starting Style
  14. 14How a Mega Menu Should Collapse on Mobile
  15. 15Editorial Mega Menu with Featured Image
  16. 16Dashboard Mega Menu with Live Status Panel
  17. 17Mega Menu with Category Image Cards
  18. 18Department Store Mega Menu Grid
  19. 19Product Finder Mega Menu with Filters
  20. 20Promotional Mega Menu with Offer Panel
Pure CSSMIT licensed

How a Mega Menu Should Collapse on Mobile

A multi-column panel cannot survive a 360px viewport, and shrinking it produces an unusable wall of links. Below the breakpoint it becomes a different component: an accordion inside a drawer, where each top-level item expands its section in place. Both forms of the same clinic navigation are shipped here — the desktop panel and the phone drawer — from one markup pattern.

Live Demo
Plain CSSTailwind v4
Try it

Nucleo: 44,000+ SVG icons in five families · All Icons Bundle $149

Nucleo · Affiliate link

Get the Nucleo bundle

The code

<section class="mm-14" aria-labelledby="mm-14-title">
  <h2 class="mm-14__sr" id="mm-14-title">Vale Health</h2>

  <div class="mm-14__theme">
    <input class="mm-14__theme-input" type="checkbox" id="mm-14-theme">
    <label class="mm-14__theme-label" for="mm-14-theme">
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 3.5a8.5 8.5 0 0 0 0 17Z" fill="currentColor"/></svg>
      <span class="mm-14__sr">Toggle dark theme</span>
    </label>
  </div>

  <div class="mm-14__stage">
    <div class="mm-14__desktop">
      <header class="mm-14__header">
        <div class="mm-14__bar">
          <a class="mm-14__brand" href="#mm-14-title">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 20s-7-4.4-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4.6-7 9-7 9Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
            Vale Health
          </a>

          <nav class="mm-14__nav" aria-label="Primary">
            <ul class="mm-14__list">
              <li class="mm-14__item">
                <button class="mm-14__trigger" type="button" aria-expanded="false" aria-controls="mm-14-panel-care">Care</button>
                <div class="mm-14__panel" id="mm-14-panel-care" aria-label="Care">
                  <div class="mm-14__panel-inner">
                    <section class="mm-14__col" aria-labelledby="mm-14-h-gp">
                      <h3 class="mm-14__col-head" id="mm-14-h-gp">Everyday care</h3>
                      <ul class="mm-14__links"><li><a href="#mm-14-title">Book a GP</a></li><li><a href="#mm-14-title">Repeat prescriptions</a></li><li><a href="#mm-14-title">Vaccinations</a></li><li><a href="#mm-14-title">Health checks</a></li></ul>
                    </section>
                    <section class="mm-14__col" aria-labelledby="mm-14-h-spec">
                      <h3 class="mm-14__col-head" id="mm-14-h-spec">Specialists</h3>
                      <ul class="mm-14__links"><li><a href="#mm-14-title">Dermatology</a></li><li><a href="#mm-14-title">Physiotherapy</a></li><li><a href="#mm-14-title">Cardiology</a></li></ul>
                    </section>
                    <section class="mm-14__col" aria-labelledby="mm-14-h-mind">
                      <h3 class="mm-14__col-head" id="mm-14-h-mind">Mental health</h3>
                      <ul class="mm-14__links"><li><a href="#mm-14-title">Talking therapies</a></li><li><a href="#mm-14-title">Self-referral</a></li><li><a href="#mm-14-title">Crisis support</a></li></ul>
                    </section>
                    <section class="mm-14__col" aria-labelledby="mm-14-h-urgent">
                      <h3 class="mm-14__col-head" id="mm-14-h-urgent">Urgent</h3>
                      <ul class="mm-14__links"><li><a href="#mm-14-title">Same-day clinic</a></li><li><a href="#mm-14-title">Out of hours</a></li></ul>
                    </section>
                  </div>
                </div>
              </li>
              <li class="mm-14__item"><a class="mm-14__plain" href="#mm-14-title">Clinics</a></li>
              <li class="mm-14__item"><a class="mm-14__plain" href="#mm-14-title">Pricing</a></li>
              <li class="mm-14__item"><a class="mm-14__plain" href="#mm-14-title">About</a></li>
            </ul>
          </nav>

          <a class="mm-14__cta" href="#mm-14-title">Book an appointment</a>
        </div>
      </header>

      <div class="mm-14__page">
        <p class="mm-14__kicker">42 clinics &middot; same-day appointments</p>
        <h1 class="mm-14__h1">Care that fits around the rest of your life.</h1>
        <p class="mm-14__sub">Evening and weekend slots at every clinic. Most people are seen within 48 hours.</p>
      </div>
    </div>

    <div class="mm-14__phone">
      <div class="mm-14__drawer-top">
        <span class="mm-14__brand mm-14__brand--sm">Vale Health</span>
        <span class="mm-14__close" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false"><path d="m6 6 12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </span>
      </div>
      <nav class="mm-14__acc-nav" aria-label="Vale Health mobile">
        <details class="mm-14__acc" name="mm-14-acc" open>
          <summary class="mm-14__acc-head">Care
            <svg class="mm-14__acc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          </summary>
          <ul class="mm-14__acc-links">
            <li><a href="#mm-14-title">Book a GP</a></li>
            <li><a href="#mm-14-title">Repeat prescriptions</a></li>
            <li><a href="#mm-14-title">Specialists</a></li>
            <li><a href="#mm-14-title">Mental health</a></li>
            <li><a href="#mm-14-title">Same-day clinic</a></li>
          </ul>
        </details>
        <details class="mm-14__acc" name="mm-14-acc">
          <summary class="mm-14__acc-head">Clinics
            <svg class="mm-14__acc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          </summary>
          <ul class="mm-14__acc-links"><li><a href="#mm-14-title">Find a clinic</a></li><li><a href="#mm-14-title">Opening hours</a></li></ul>
        </details>
        <a class="mm-14__acc-plain" href="#mm-14-title">Pricing</a>
        <a class="mm-14__acc-plain" href="#mm-14-title">About</a>
        <a class="mm-14__acc-cta" href="#mm-14-title">Book an appointment</a>
      </nav>
    </div>
  </div>
</section>
.mm-14 {
  --mm-14-bg: #f7f5f1;
  --mm-14-surf: #ffffff;
  --mm-14-line: #e2ded6;
  --mm-14-ink: #1a1917;
  --mm-14-mut: #6c6862;
  --mm-14-acc: #0f6d8c;
  --mm-14-acc: oklch(48% 0.11 220);
  --mm-14-on-acc: #ffffff;
  --mm-14-row: 48px;
  --mm-14-font-display: "Helvetica Neue", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  position: relative;
  box-sizing: border-box;
  background: var(--mm-14-bg);
  color: var(--mm-14-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}

.mm-14 *,
.mm-14 *::before,
.mm-14 *::after {
  box-sizing: border-box;
}

.mm-14 :focus-visible {
  outline: 2px solid var(--mm-14-acc);
  outline-offset: 3px;
  border-radius: 4px;
}

.mm-14__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mm-14:has(.mm-14__theme-input:checked) {
  --mm-14-bg: #0f0f0e;
  --mm-14-surf: #191817;
  --mm-14-line: #2c2a27;
  --mm-14-ink: #f3f1ed;
  --mm-14-mut: #a5a09a;
  --mm-14-acc: #5ec8e8;
  --mm-14-acc: oklch(80% 0.11 220);
  --mm-14-on-acc: #12100e;
}

@media (prefers-color-scheme: dark) {
  .mm-14 {
    --mm-14-bg: #0f0f0e;
    --mm-14-surf: #191817;
    --mm-14-line: #2c2a27;
    --mm-14-ink: #f3f1ed;
    --mm-14-mut: #a5a09a;
    --mm-14-acc: #5ec8e8;
    --mm-14-acc: oklch(80% 0.11 220);
    --mm-14-on-acc: #12100e;
  }

  .mm-14:has(.mm-14__theme-input:checked) {
    --mm-14-bg: #f7f5f1;
    --mm-14-surf: #ffffff;
    --mm-14-line: #e2ded6;
    --mm-14-ink: #1a1917;
    --mm-14-mut: #6c6862;
    --mm-14-acc: #0f6d8c;
    --mm-14-acc: oklch(48% 0.11 220);
    --mm-14-on-acc: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  .mm-14:has(.mm-14__theme-input:checked) {
    --mm-14-bg: #0f0f0e;
    --mm-14-surf: #191817;
    --mm-14-line: #2c2a27;
    --mm-14-ink: #f3f1ed;
    --mm-14-mut: #a5a09a;
    --mm-14-acc: #5ec8e8;
    --mm-14-acc: oklch(80% 0.11 220);
    --mm-14-on-acc: #12100e;
  }
}

.mm-14__theme {
  position: absolute;
  inset-block-start: clamp(0.75rem, 3vw, 1.5rem);
  inset-inline-end: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 60;
}

.mm-14__theme-input {
  position: absolute;
  opacity: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  cursor: pointer;
}

.mm-14__theme-label {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--mm-14-line);
  background: var(--mm-14-surf);
  color: var(--mm-14-ink);
  cursor: pointer;
}

.mm-14__theme-label svg {
  inline-size: 20px;
  block-size: 20px;
}

.mm-14__theme-input:focus-visible + .mm-14__theme-label {
  outline: 2px solid var(--mm-14-acc);
  outline-offset: 3px;
}

.mm-14__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: start;
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding: clamp(3.5rem, 8vw, 5rem) clamp(0.75rem, 3vw, 2.5rem) clamp(2rem, 6vw, 4rem);
}

@media (min-width: 66rem) {
  .mm-14__stage {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }
}

.mm-14__desktop {
  min-inline-size: 0;
  container-type: inline-size;
  border: 1px solid var(--mm-14-line);
  background: var(--mm-14-surf);
}

.mm-14__header {
  position: relative;
  z-index: 10;
}

.mm-14__bar {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
  flex-wrap: wrap;
  min-block-size: 64px;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--mm-14-line);
}

.mm-14__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--mm-14-ink);
  text-decoration: none;
  font: 700 1rem/1 var(--mm-14-font-display);
  letter-spacing: 0.04em;
}

.mm-14__brand svg {
  inline-size: 22px;
  block-size: 22px;
  color: var(--mm-14-acc);
}

.mm-14__nav {
  min-inline-size: 0;
}

.mm-14__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.mm-14__item {
  position: static;
}

.mm-14__trigger,
.mm-14__plain {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 0.85rem;
  border: 0;
  background: transparent;
  color: var(--mm-14-ink);
  font: 600 0.8rem/1 var(--mm-14-font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.mm-14__item--open > .mm-14__trigger,
.mm-14__item:hover > .mm-14__trigger,
.mm-14__item:focus-within > .mm-14__trigger {
  color: var(--mm-14-acc);
  box-shadow: inset 0 -2px 0 var(--mm-14-acc);
}

.mm-14__plain:hover,
.mm-14__trigger:hover {
  color: var(--mm-14-acc);
}

.mm-14__cta {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: 1rem;
  background: var(--mm-14-acc);
  color: var(--mm-14-on-acc);
  text-decoration: none;
  font: 600 0.76rem/1 var(--mm-14-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mm-14__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 30;
  background: var(--mm-14-surf);
  border-block-end: 1px solid var(--mm-14-line);
  box-shadow: 0 24px 50px -34px rgba(26, 25, 23, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.mm-14__item--open > .mm-14__panel,
.mm-14__item:focus-within > .mm-14__panel {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (hover: hover) {
  .mm-14__item:hover > .mm-14__panel {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

.mm-14__panel-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: clamp(0.75rem, 2.4vw, 1.75rem);
  padding: clamp(0.9rem, 2.6vw, 1.5rem) 1rem;
}

.mm-14__col {
  min-inline-size: 0;
}

.mm-14__col-head {
  margin: 0 0 0.3rem;
  font: 700 0.66rem/1 var(--mm-14-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-14-mut);
}

.mm-14__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.mm-14__links a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--mm-14-ink);
  text-decoration: none;
  font-size: 0.89rem;
  min-inline-size: 0;
}

.mm-14__links a:hover {
  color: var(--mm-14-acc);
}

.mm-14__page {
  padding: clamp(1.5rem, 5vw, 3rem) 1rem clamp(2rem, 6vw, 3.5rem);
  display: grid;
  gap: 0.5rem;
}

.mm-14__kicker {
  margin: 0;
  font: 600 0.68rem/1 var(--mm-14-font-display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mm-14-acc);
}

.mm-14__h1 {
  margin: 0;
  max-inline-size: 22ch;
  font: 700 clamp(1.6rem, 4.5vw, 2.6rem)/1.08 var(--mm-14-font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mm-14__sub {
  margin: 0;
  max-inline-size: 40ch;
  color: var(--mm-14-mut);
  font-size: 0.95rem;
  text-wrap: pretty;
}

.mm-14__phone {
  inline-size: min(21rem, 100%);
  justify-self: center;
  border: 1px solid var(--mm-14-line);
  border-radius: 26px;
  background: var(--mm-14-surf);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(26, 25, 23, 0.6);
}

.mm-14__drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 56px;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--mm-14-line);
}

.mm-14__brand--sm {
  font-size: 0.9rem;
}

.mm-14__close {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: -0.6rem;
  color: var(--mm-14-mut);
}

.mm-14__close svg {
  inline-size: 20px;
  block-size: 20px;
}

.mm-14__acc-nav {
  display: grid;
}

.mm-14__acc {
  border-block-end: 1px solid var(--mm-14-line);
}

.mm-14__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-block-size: var(--mm-14-row);
  padding-inline: 1rem;
  font: 600 0.92rem/1 system-ui, sans-serif;
  cursor: pointer;
  list-style: none;
}

.mm-14__acc-head::-webkit-details-marker {
  display: none;
}

.mm-14__acc-chev {
  inline-size: 18px;
  block-size: 18px;
  color: var(--mm-14-mut);
  transition: transform 180ms ease;
}

.mm-14__acc[open] .mm-14__acc-head {
  color: var(--mm-14-acc);
}

.mm-14__acc[open] .mm-14__acc-chev {
  transform: rotate(180deg);
}

.mm-14__acc-links {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: grid;
}

.mm-14__acc-links a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 1.6rem;
  color: var(--mm-14-mut);
  text-decoration: none;
  font-size: 0.88rem;
}

.mm-14__acc-links a:hover {
  color: var(--mm-14-acc);
  background: color-mix(in oklab, var(--mm-14-acc) 8%, transparent);
}

.mm-14__acc-plain {
  display: flex;
  align-items: center;
  min-block-size: var(--mm-14-row);
  padding-inline: 1rem;
  border-block-end: 1px solid var(--mm-14-line);
  color: var(--mm-14-ink);
  text-decoration: none;
  font: 600 0.92rem/1 system-ui, sans-serif;
}

.mm-14__acc-cta {
  display: grid;
  place-items: center;
  min-block-size: 52px;
  margin: 0.9rem 1rem 1.2rem;
  background: var(--mm-14-acc);
  color: var(--mm-14-on-acc);
  text-decoration: none;
  font: 600 0.78rem/1 var(--mm-14-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@container (max-width: 40rem) {
  .mm-14__bar {
    flex-direction: column;
    align-items: stretch;
    padding-block: 0.5rem;
  }

  .mm-14__list {
    flex-direction: column;
  }

  .mm-14__cta {
    margin-inline-start: 0;
    justify-content: center;
  }

  .mm-14__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    display: none;
  }

  .mm-14__item--open > .mm-14__panel {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-14__panel,
    .mm-14__acc-chev {
    transition-duration: 1ms;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mm-14__trigger {
    position: relative;
  }

  .mm-14__item:hover > .mm-14__trigger::after,
    .mm-14__item:focus-within > .mm-14__trigger::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: 16px;
  }
}
/* Entry signature — columns arrive from the end edge, links fade behind them */

.mm-14__col {
  opacity: 0;
  translate: 12px 0;
  transition: opacity 200ms ease, translate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mm-14__item:hover > .mm-14__panel .mm-14__col,
.mm-14__item:focus-within > .mm-14__panel .mm-14__col,
.mm-14__item--open > .mm-14__panel .mm-14__col {
  opacity: 1;
  translate: 0 0;
}

.mm-14__col:nth-child(1) {
  transition-delay: 20ms;
}

.mm-14__col:nth-child(2) {
  transition-delay: 85ms;
}

.mm-14__col:nth-child(3) {
  transition-delay: 150ms;
}

.mm-14__col:nth-child(4) {
  transition-delay: 215ms;
}

.mm-14__col:nth-child(n+5) {
  transition-delay: 215ms;
}

.mm-14__links li {
  opacity: 0;
  transition: opacity 240ms ease;
}

.mm-14__item:hover > .mm-14__panel .mm-14__links li,
.mm-14__item:focus-within > .mm-14__panel .mm-14__links li,
.mm-14__item--open > .mm-14__panel .mm-14__links li {
  opacity: 1;
}

.mm-14__links li:nth-child(1) {
  transition-delay: 120ms;
}

.mm-14__links li:nth-child(2) {
  transition-delay: 150ms;
}

.mm-14__links li:nth-child(3) {
  transition-delay: 180ms;
}

.mm-14__links li:nth-child(4) {
  transition-delay: 210ms;
}

.mm-14__links li:nth-child(5) {
  transition-delay: 240ms;
}

.mm-14__links li:nth-child(6) {
  transition-delay: 270ms;
}

.mm-14__links li:nth-child(n+7) {
  transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
  .mm-14__col,
    .mm-14__links li {
    transition-duration: 1ms;
    transition-delay: 0s;
    animation: none;
  }

  .mm-14__col {
    opacity: 1;
    translate: none;
  }

  .mm-14__links li {
    opacity: 1;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Mega Menu from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: How a Mega Menu Should Collapse on Mobile
Source: https://codefronts.com/navigation/css-mega-menus/how-a-mega-menu-should-collapse-on-mobile/

A multi-column panel cannot survive a 360px viewport, and shrinking it produces an unusable wall of links. Below the breakpoint it becomes a different component: an accordion inside a drawer, where each top-level item expands its section in place. Both forms of the same clinic navigation are shipped here &mdash; the desktop panel and the phone drawer &mdash; from one markup pattern.
## HTML
```html
<section class="mm-14" aria-labelledby="mm-14-title">
  <h2 class="mm-14__sr" id="mm-14-title">Vale Health</h2>

  <div class="mm-14__theme">
    <input class="mm-14__theme-input" type="checkbox" id="mm-14-theme">
    <label class="mm-14__theme-label" for="mm-14-theme">
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 3.5a8.5 8.5 0 0 0 0 17Z" fill="currentColor"/></svg>
      <span class="mm-14__sr">Toggle dark theme</span>
    </label>
  </div>

  <div class="mm-14__stage">
    <div class="mm-14__desktop">
      <header class="mm-14__header">
        <div class="mm-14__bar">
          <a class="mm-14__brand" href="#mm-14-title">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 20s-7-4.4-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4.6-7 9-7 9Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
            Vale Health
          </a>

          <nav class="mm-14__nav" aria-label="Primary">
            <ul class="mm-14__list">
              <li class="mm-14__item">
                <button class="mm-14__trigger" type="button" aria-expanded="false" aria-controls="mm-14-panel-care">Care</button>
                <div class="mm-14__panel" id="mm-14-panel-care" aria-label="Care">
                  <div class="mm-14__panel-inner">
                    <section class="mm-14__col" aria-labelledby="mm-14-h-gp">
                      <h3 class="mm-14__col-head" id="mm-14-h-gp">Everyday care</h3>
                      <ul class="mm-14__links"><li><a href="#mm-14-title">Book a GP</a></li><li><a href="#mm-14-title">Repeat prescriptions</a></li><li><a href="#mm-14-title">Vaccinations</a></li><li><a href="#mm-14-title">Health checks</a></li></ul>
                    </section>
                    <section class="mm-14__col" aria-labelledby="mm-14-h-spec">
                      <h3 class="mm-14__col-head" id="mm-14-h-spec">Specialists</h3>
                      <ul class="mm-14__links"><li><a href="#mm-14-title">Dermatology</a></li><li><a href="#mm-14-title">Physiotherapy</a></li><li><a href="#mm-14-title">Cardiology</a></li></ul>
                    </section>
                    <section class="mm-14__col" aria-labelledby="mm-14-h-mind">
                      <h3 class="mm-14__col-head" id="mm-14-h-mind">Mental health</h3>
                      <ul class="mm-14__links"><li><a href="#mm-14-title">Talking therapies</a></li><li><a href="#mm-14-title">Self-referral</a></li><li><a href="#mm-14-title">Crisis support</a></li></ul>
                    </section>
                    <section class="mm-14__col" aria-labelledby="mm-14-h-urgent">
                      <h3 class="mm-14__col-head" id="mm-14-h-urgent">Urgent</h3>
                      <ul class="mm-14__links"><li><a href="#mm-14-title">Same-day clinic</a></li><li><a href="#mm-14-title">Out of hours</a></li></ul>
                    </section>
                  </div>
                </div>
              </li>
              <li class="mm-14__item"><a class="mm-14__plain" href="#mm-14-title">Clinics</a></li>
              <li class="mm-14__item"><a class="mm-14__plain" href="#mm-14-title">Pricing</a></li>
              <li class="mm-14__item"><a class="mm-14__plain" href="#mm-14-title">About</a></li>
            </ul>
          </nav>

          <a class="mm-14__cta" href="#mm-14-title">Book an appointment</a>
        </div>
      </header>

      <div class="mm-14__page">
        <p class="mm-14__kicker">42 clinics &middot; same-day appointments</p>
        <h1 class="mm-14__h1">Care that fits around the rest of your life.</h1>
        <p class="mm-14__sub">Evening and weekend slots at every clinic. Most people are seen within 48 hours.</p>
      </div>
    </div>

    <div class="mm-14__phone">
      <div class="mm-14__drawer-top">
        <span class="mm-14__brand mm-14__brand--sm">Vale Health</span>
        <span class="mm-14__close" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false"><path d="m6 6 12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </span>
      </div>
      <nav class="mm-14__acc-nav" aria-label="Vale Health mobile">
        <details class="mm-14__acc" name="mm-14-acc" open>
          <summary class="mm-14__acc-head">Care
            <svg class="mm-14__acc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          </summary>
          <ul class="mm-14__acc-links">
            <li><a href="#mm-14-title">Book a GP</a></li>
            <li><a href="#mm-14-title">Repeat prescriptions</a></li>
            <li><a href="#mm-14-title">Specialists</a></li>
            <li><a href="#mm-14-title">Mental health</a></li>
            <li><a href="#mm-14-title">Same-day clinic</a></li>
          </ul>
        </details>
        <details class="mm-14__acc" name="mm-14-acc">
          <summary class="mm-14__acc-head">Clinics
            <svg class="mm-14__acc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          </summary>
          <ul class="mm-14__acc-links"><li><a href="#mm-14-title">Find a clinic</a></li><li><a href="#mm-14-title">Opening hours</a></li></ul>
        </details>
        <a class="mm-14__acc-plain" href="#mm-14-title">Pricing</a>
        <a class="mm-14__acc-plain" href="#mm-14-title">About</a>
        <a class="mm-14__acc-cta" href="#mm-14-title">Book an appointment</a>
      </nav>
    </div>
  </div>
</section>
```
## CSS
```css
.mm-14 {
  --mm-14-bg: #f7f5f1;
  --mm-14-surf: #ffffff;
  --mm-14-line: #e2ded6;
  --mm-14-ink: #1a1917;
  --mm-14-mut: #6c6862;
  --mm-14-acc: #0f6d8c;
  --mm-14-acc: oklch(48% 0.11 220);
  --mm-14-on-acc: #ffffff;
  --mm-14-row: 48px;
  --mm-14-font-display: "Helvetica Neue", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  position: relative;
  box-sizing: border-box;
  background: var(--mm-14-bg);
  color: var(--mm-14-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}

.mm-14 *,
.mm-14 *::before,
.mm-14 *::after {
  box-sizing: border-box;
}

.mm-14 :focus-visible {
  outline: 2px solid var(--mm-14-acc);
  outline-offset: 3px;
  border-radius: 4px;
}

.mm-14__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mm-14:has(.mm-14__theme-input:checked) {
  --mm-14-bg: #0f0f0e;
  --mm-14-surf: #191817;
  --mm-14-line: #2c2a27;
  --mm-14-ink: #f3f1ed;
  --mm-14-mut: #a5a09a;
  --mm-14-acc: #5ec8e8;
  --mm-14-acc: oklch(80% 0.11 220);
  --mm-14-on-acc: #12100e;
}

@media (prefers-color-scheme: dark) {
  .mm-14 {
    --mm-14-bg: #0f0f0e;
    --mm-14-surf: #191817;
    --mm-14-line: #2c2a27;
    --mm-14-ink: #f3f1ed;
    --mm-14-mut: #a5a09a;
    --mm-14-acc: #5ec8e8;
    --mm-14-acc: oklch(80% 0.11 220);
    --mm-14-on-acc: #12100e;
  }

  .mm-14:has(.mm-14__theme-input:checked) {
    --mm-14-bg: #f7f5f1;
    --mm-14-surf: #ffffff;
    --mm-14-line: #e2ded6;
    --mm-14-ink: #1a1917;
    --mm-14-mut: #6c6862;
    --mm-14-acc: #0f6d8c;
    --mm-14-acc: oklch(48% 0.11 220);
    --mm-14-on-acc: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  .mm-14:has(.mm-14__theme-input:checked) {
    --mm-14-bg: #0f0f0e;
    --mm-14-surf: #191817;
    --mm-14-line: #2c2a27;
    --mm-14-ink: #f3f1ed;
    --mm-14-mut: #a5a09a;
    --mm-14-acc: #5ec8e8;
    --mm-14-acc: oklch(80% 0.11 220);
    --mm-14-on-acc: #12100e;
  }
}

.mm-14__theme {
  position: absolute;
  inset-block-start: clamp(0.75rem, 3vw, 1.5rem);
  inset-inline-end: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 60;
}

.mm-14__theme-input {
  position: absolute;
  opacity: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  cursor: pointer;
}

.mm-14__theme-label {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--mm-14-line);
  background: var(--mm-14-surf);
  color: var(--mm-14-ink);
  cursor: pointer;
}

.mm-14__theme-label svg {
  inline-size: 20px;
  block-size: 20px;
}

.mm-14__theme-input:focus-visible + .mm-14__theme-label {
  outline: 2px solid var(--mm-14-acc);
  outline-offset: 3px;
}

.mm-14__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: start;
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding: clamp(3.5rem, 8vw, 5rem) clamp(0.75rem, 3vw, 2.5rem) clamp(2rem, 6vw, 4rem);
}

@media (min-width: 66rem) {
  .mm-14__stage {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }
}

.mm-14__desktop {
  min-inline-size: 0;
  container-type: inline-size;
  border: 1px solid var(--mm-14-line);
  background: var(--mm-14-surf);
}

.mm-14__header {
  position: relative;
  z-index: 10;
}

.mm-14__bar {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
  flex-wrap: wrap;
  min-block-size: 64px;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--mm-14-line);
}

.mm-14__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--mm-14-ink);
  text-decoration: none;
  font: 700 1rem/1 var(--mm-14-font-display);
  letter-spacing: 0.04em;
}

.mm-14__brand svg {
  inline-size: 22px;
  block-size: 22px;
  color: var(--mm-14-acc);
}

.mm-14__nav {
  min-inline-size: 0;
}

.mm-14__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.mm-14__item {
  position: static;
}

.mm-14__trigger,
.mm-14__plain {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 0.85rem;
  border: 0;
  background: transparent;
  color: var(--mm-14-ink);
  font: 600 0.8rem/1 var(--mm-14-font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.mm-14__item--open > .mm-14__trigger,
.mm-14__item:hover > .mm-14__trigger,
.mm-14__item:focus-within > .mm-14__trigger {
  color: var(--mm-14-acc);
  box-shadow: inset 0 -2px 0 var(--mm-14-acc);
}

.mm-14__plain:hover,
.mm-14__trigger:hover {
  color: var(--mm-14-acc);
}

.mm-14__cta {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: 1rem;
  background: var(--mm-14-acc);
  color: var(--mm-14-on-acc);
  text-decoration: none;
  font: 600 0.76rem/1 var(--mm-14-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mm-14__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 30;
  background: var(--mm-14-surf);
  border-block-end: 1px solid var(--mm-14-line);
  box-shadow: 0 24px 50px -34px rgba(26, 25, 23, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.mm-14__item--open > .mm-14__panel,
.mm-14__item:focus-within > .mm-14__panel {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (hover: hover) {
  .mm-14__item:hover > .mm-14__panel {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

.mm-14__panel-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: clamp(0.75rem, 2.4vw, 1.75rem);
  padding: clamp(0.9rem, 2.6vw, 1.5rem) 1rem;
}

.mm-14__col {
  min-inline-size: 0;
}

.mm-14__col-head {
  margin: 0 0 0.3rem;
  font: 700 0.66rem/1 var(--mm-14-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-14-mut);
}

.mm-14__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.mm-14__links a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--mm-14-ink);
  text-decoration: none;
  font-size: 0.89rem;
  min-inline-size: 0;
}

.mm-14__links a:hover {
  color: var(--mm-14-acc);
}

.mm-14__page {
  padding: clamp(1.5rem, 5vw, 3rem) 1rem clamp(2rem, 6vw, 3.5rem);
  display: grid;
  gap: 0.5rem;
}

.mm-14__kicker {
  margin: 0;
  font: 600 0.68rem/1 var(--mm-14-font-display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mm-14-acc);
}

.mm-14__h1 {
  margin: 0;
  max-inline-size: 22ch;
  font: 700 clamp(1.6rem, 4.5vw, 2.6rem)/1.08 var(--mm-14-font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mm-14__sub {
  margin: 0;
  max-inline-size: 40ch;
  color: var(--mm-14-mut);
  font-size: 0.95rem;
  text-wrap: pretty;
}

.mm-14__phone {
  inline-size: min(21rem, 100%);
  justify-self: center;
  border: 1px solid var(--mm-14-line);
  border-radius: 26px;
  background: var(--mm-14-surf);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(26, 25, 23, 0.6);
}

.mm-14__drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 56px;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--mm-14-line);
}

.mm-14__brand--sm {
  font-size: 0.9rem;
}

.mm-14__close {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: -0.6rem;
  color: var(--mm-14-mut);
}

.mm-14__close svg {
  inline-size: 20px;
  block-size: 20px;
}

.mm-14__acc-nav {
  display: grid;
}

.mm-14__acc {
  border-block-end: 1px solid var(--mm-14-line);
}

.mm-14__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-block-size: var(--mm-14-row);
  padding-inline: 1rem;
  font: 600 0.92rem/1 system-ui, sans-serif;
  cursor: pointer;
  list-style: none;
}

.mm-14__acc-head::-webkit-details-marker {
  display: none;
}

.mm-14__acc-chev {
  inline-size: 18px;
  block-size: 18px;
  color: var(--mm-14-mut);
  transition: transform 180ms ease;
}

.mm-14__acc[open] .mm-14__acc-head {
  color: var(--mm-14-acc);
}

.mm-14__acc[open] .mm-14__acc-chev {
  transform: rotate(180deg);
}

.mm-14__acc-links {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: grid;
}

.mm-14__acc-links a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 1.6rem;
  color: var(--mm-14-mut);
  text-decoration: none;
  font-size: 0.88rem;
}

.mm-14__acc-links a:hover {
  color: var(--mm-14-acc);
  background: color-mix(in oklab, var(--mm-14-acc) 8%, transparent);
}

.mm-14__acc-plain {
  display: flex;
  align-items: center;
  min-block-size: var(--mm-14-row);
  padding-inline: 1rem;
  border-block-end: 1px solid var(--mm-14-line);
  color: var(--mm-14-ink);
  text-decoration: none;
  font: 600 0.92rem/1 system-ui, sans-serif;
}

.mm-14__acc-cta {
  display: grid;
  place-items: center;
  min-block-size: 52px;
  margin: 0.9rem 1rem 1.2rem;
  background: var(--mm-14-acc);
  color: var(--mm-14-on-acc);
  text-decoration: none;
  font: 600 0.78rem/1 var(--mm-14-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@container (max-width: 40rem) {
  .mm-14__bar {
    flex-direction: column;
    align-items: stretch;
    padding-block: 0.5rem;
  }

  .mm-14__list {
    flex-direction: column;
  }

  .mm-14__cta {
    margin-inline-start: 0;
    justify-content: center;
  }

  .mm-14__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    display: none;
  }

  .mm-14__item--open > .mm-14__panel {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-14__panel,
    .mm-14__acc-chev {
    transition-duration: 1ms;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mm-14__trigger {
    position: relative;
  }

  .mm-14__item:hover > .mm-14__trigger::after,
    .mm-14__item:focus-within > .mm-14__trigger::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: 16px;
  }
}
/* Entry signature — columns arrive from the end edge, links fade behind them */

.mm-14__col {
  opacity: 0;
  translate: 12px 0;
  transition: opacity 200ms ease, translate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mm-14__item:hover > .mm-14__panel .mm-14__col,
.mm-14__item:focus-within > .mm-14__panel .mm-14__col,
.mm-14__item--open > .mm-14__panel .mm-14__col {
  opacity: 1;
  translate: 0 0;
}

.mm-14__col:nth-child(1) {
  transition-delay: 20ms;
}

.mm-14__col:nth-child(2) {
  transition-delay: 85ms;
}

.mm-14__col:nth-child(3) {
  transition-delay: 150ms;
}

.mm-14__col:nth-child(4) {
  transition-delay: 215ms;
}

.mm-14__col:nth-child(n+5) {
  transition-delay: 215ms;
}

.mm-14__links li {
  opacity: 0;
  transition: opacity 240ms ease;
}

.mm-14__item:hover > .mm-14__panel .mm-14__links li,
.mm-14__item:focus-within > .mm-14__panel .mm-14__links li,
.mm-14__item--open > .mm-14__panel .mm-14__links li {
  opacity: 1;
}

.mm-14__links li:nth-child(1) {
  transition-delay: 120ms;
}

.mm-14__links li:nth-child(2) {
  transition-delay: 150ms;
}

.mm-14__links li:nth-child(3) {
  transition-delay: 180ms;
}

.mm-14__links li:nth-child(4) {
  transition-delay: 210ms;
}

.mm-14__links li:nth-child(5) {
  transition-delay: 240ms;
}

.mm-14__links li:nth-child(6) {
  transition-delay: 270ms;
}

.mm-14__links li:nth-child(n+7) {
  transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
  .mm-14__col,
    .mm-14__links li {
    transition-duration: 1ms;
    transition-delay: 0s;
    animation: none;
  }

  .mm-14__col {
    opacity: 1;
    translate: none;
  }

  .mm-14__links li {
    opacity: 1;
  }
}
```

How this works

It is not a responsive panel, it is a second component. Four columns of links at 360px means either eight-point text or a 3000px-tall scroll. Neither is navigation. The pattern that works is an accordion: the top-level items become a vertical list, tapping one expands its section in place, and the user only ever sees one section at a time. That is a different interaction model, and pretending otherwise is where mobile mega menus go wrong.

<details> does most of it for free. Expand and collapse, keyboard operation, the right announcement, and state that survives a print or a find-in-page — all built in. The name attribute makes a group of them exclusive, so opening one closes the others without a line of script. That single attribute replaces the accordion library most projects reach for.

Three things change at the line, and all three are easy to forget. Hover opening switches off, because there is no hover: the open delay and the close delay stop being relevant and the safe triangle is meaningless. aria-expanded changes what it describes — on desktop an overlay panel, on mobile an in-flow disclosure — which matters when the same component renders both. And focus management becomes mandatory: opening a drawer that covers the page means focus has to move into it and come back out, which is not required for a panel that sits below a bar.

Pick the line from the content, not from a device list. The breakpoint is wherever the widest column stops fitting twice over, which for most panels is somewhere between 48 and 62rem. A container query is better than a media query here because the component might be in a narrow region on a wide screen. And the same honesty applies as everywhere else in this collection: if the site has under about twenty destinations, the mobile version should be a plain list and the desktop version probably should not be a mega menu at all.

Make it yours

  • Move the breakpoint by editing the single @container condition; nothing else is width-dependent.
  • Remove the name attribute from the <details> elements to allow several sections open at once.
  • Swap the container query for a media query if the component is always full width in your layout.
  • Change the chevron rotation in the [open] rule, or replace it with a plus-to-minus mark.
  • Retune --mm-14-row to change the accordion's row height; 48px is comfortable, 44px is the floor.
  • Recolour with the two --mm-14-acc declarations, hex first then oklch.

Gotchas — read before shipping

  • Shrinking a four-column panel instead of changing the component gives a 360px viewport a wall of links with no hierarchy, which tests fine and fails in the field.
  • A drawer that covers the page without moving focus into it leaves keyboard and screen reader users behind the overlay, still tabbing through the page underneath.
  • Leaving hover intent timers running below the breakpoint means a stray touch can queue an open that fires after the user has moved on.
  • <details> inside a display: grid parent needs care: the marker and the content are separate boxes, so gap can add space you did not intend.
  • Animating a <details> open requires grid-template-rows or the discrete-display transition from demo 13. The naive height: auto transition still does not work.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by :has(), oklch(), color-mix(), @container, text-wrap as this demo is written. The core technique itself goes back further — Chrome 111+.

the exclusive-accordion name attribute on <details> sets the Safari floor at 17 (Chrome 120, Firefox 130 for the attribute itself, which degrades to independently opening sections rather than breaking); container queries need Chrome 105, Safari 16 and Firefox 110, and oklch() with the :has() toggle sets the rest. Without the name attribute several sections can be open at once, which is a preference rather than a failure.

Techniques used in this demo

<details name="">MDN ↗:focus-withinMDN ↗container queriesMDN ↗clip-pathMDN ↗text-wrap: prettyMDN ↗:has()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →