Mega Menu

Large multi-column navigation menu.

html

<details class="mega mega--cols-3" style="--accent:#A8E6C1;" >
  <summary class="mega__trigger">Products <span aria-hidden="true">&#9662;</span></summary>
  <nav class="mega__panel" aria-label="Products">
    <div class="mega__col">
      <h3 class="mega__heading">Platform</h3>
      <a class="mega__link" href="#">Analytics</a>
      <a class="mega__link" href="#">Automation</a>
      <a class="mega__link" href="#">Integrations</a>
    </div>
    <div class="mega__col">
      <h3 class="mega__heading">Solutions</h3>
      <a class="mega__link" href="#">For startups</a>
      <a class="mega__link" href="#">For enterprise</a>
      <a class="mega__link" href="#">For agencies</a>
    </div>
    <div class="mega__col mega__col--three">
      <h3 class="mega__heading">Resources</h3>
      <a class="mega__link" href="#">Documentation</a>
      <a class="mega__link" href="#">Changelog</a>
      <a class="mega__link" href="#">Community</a>
    </div>
  </nav>
</details>
<style>
.mega { position: relative; width: fit-content; font: 14px system-ui, sans-serif; }
.mega__trigger { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 8px; color: #241430; font-weight: 500; }
.mega__trigger::-webkit-details-marker { display: none; }
.mega__trigger:hover, .mega__trigger:focus-visible { background: #FAF7F2; outline: none; }
.mega[open] .mega__trigger { color: var(--accent); }
.mega__panel { position: absolute; top: calc(100% + 6px); left: 0; display: flex; gap: 28px; background: #fff; border: 1px solid rgba(36,20,48,.12); border-radius: 12px; box-shadow: 0 12px 32px rgba(36,20,48,.16); padding: 20px; z-index: 10; }
.mega__col { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.mega--cols-2 .mega__col--three { display: none; }
.mega__heading { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .5; color: #241430; }
.mega__link { padding: 6px 8px; margin: 0 -8px; border-radius: 6px; text-decoration: none; color: #241430; }
.mega__link:hover, .mega__link:focus-visible { background: #FAF7F2; outline: none; }
</style>

tailwind

<details class="mega-tw mega-tw--cols-3 relative w-fit font-sans text-sm" style="--accent:#A8E6C1;" >
  <summary class="list-none cursor-pointer inline-flex items-center gap-1.5 px-3.5 py-2.5 rounded-lg font-medium text-[#241430] hover:bg-[#FAF7F2]">Products <span aria-hidden="true">&#9662;</span></summary>
  <nav aria-label="Products" class="absolute top-1.5 left-0 flex gap-7 bg-white border border-[#241430]/10 rounded-xl shadow-xl p-5 z-10">
    <div class="flex flex-col gap-1 min-w-[140px]">
      <h3 class="m-0 mb-1.5 text-[11px] uppercase tracking-wide opacity-50 text-[#241430]">Platform</h3>
      <a class="-mx-2 px-2 py-1.5 rounded-md no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Analytics</a>
      <a class="-mx-2 px-2 py-1.5 rounded-md no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Automation</a>
      <a class="-mx-2 px-2 py-1.5 rounded-md no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Integrations</a>
    </div>
    <div class="flex flex-col gap-1 min-w-[140px]">
      <h3 class="m-0 mb-1.5 text-[11px] uppercase tracking-wide opacity-50 text-[#241430]">Solutions</h3>
      <a class="-mx-2 px-2 py-1.5 rounded-md no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">For startups</a>
      <a class="-mx-2 px-2 py-1.5 rounded-md no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">For enterprise</a>
      <a class="-mx-2 px-2 py-1.5 rounded-md no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">For agencies</a>
    </div>
    <div class="mega-tw__col--three flex flex-col gap-1 min-w-[140px]">
      <h3 class="m-0 mb-1.5 text-[11px] uppercase tracking-wide opacity-50 text-[#241430]">Resources</h3>
      <a class="-mx-2 px-2 py-1.5 rounded-md no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Documentation</a>
      <a class="-mx-2 px-2 py-1.5 rounded-md no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Changelog</a>
      <a class="-mx-2 px-2 py-1.5 rounded-md no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Community</a>
    </div>
  </nav>
</details>
<style>
.mega-tw--cols-2 .mega-tw__col--three { display: none; }
</style>

react

export function MegaMenu({
  trigger = "Products",
  columns = "3",
  accent = "#A8E6C1",
  open = false,
}) {
  const cols = [
    { heading: "Platform", links: ["Analytics", "Automation", "Integrations"] },
    { heading: "Solutions", links: ["For startups", "For enterprise", "For agencies"] },
    { heading: "Resources", links: ["Documentation", "Changelog", "Community"] },
  ].slice(0, Number(columns));
  return (
    <details open={open} style={{ position: "relative", width: "fit-content", fontFamily: "system-ui, sans-serif", fontSize: 14 }}>
      <summary style={{ listStyle: "none", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6, padding: "10px 14px", borderRadius: 8, color: open ? accent : "#241430", fontWeight: 500 }}>
        {trigger} <span aria-hidden="true">&#9662;</span>
      </summary>
      <nav aria-label={trigger} style={{ position: "absolute", top: "calc(100% + 6px)", left: 0, display: "flex", gap: 28, background: "#fff", border: "1px solid rgba(36,20,48,.12)", borderRadius: 12, boxShadow: "0 12px 32px rgba(36,20,48,.16)", padding: 20 }}>
        {cols.map((col) => (
          <div key={col.heading} style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 140 }}>
            <h3 style={{ margin: "0 0 6px", fontSize: 11, textTransform: "uppercase", letterSpacing: ".04em", opacity: .5, color: "#241430" }}>{col.heading}</h3>
            {col.links.map((l) => (
              <a key={l} href="#" style={{ padding: "6px 8px", margin: "0 -8px", borderRadius: 6, textDecoration: "none", color: "#241430" }}>{l}</a>
            ))}
          </div>
        ))}
      </nav>
    </details>
  );
}