Hamburger Menu

Collapsed mobile navigation trigger.

html

<details class="burger burger--left" style="--accent:#F5C2E0;" >
  <summary class="burger__trigger" aria-label="Menu">
    <span class="burger__bar"></span><span class="burger__bar"></span><span class="burger__bar"></span>
  </summary>
  <nav class="burger__panel" aria-label="Mobile">
    <a class="burger__link is-active" href="#" aria-current="page">Home</a>
    <a class="burger__link" href="#">Shop</a>
    <a class="burger__link" href="#">About</a>
    <a class="burger__link" href="#">Contact</a>
  </nav>
</details>
<style>
.burger { width: fit-content; font: 500 14px system-ui, sans-serif; }
.burger__trigger { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 8px; width: 20px; }
.burger__trigger::-webkit-details-marker { display: none; }
.burger__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.burger__bar { display: block; height: 2px; background: #241430; border-radius: 2px; }
.burger[open] .burger__trigger { background: var(--accent); }
.burger__panel { margin-top: 6px; width: 180px; background: #fff; border: 1px solid rgba(36,20,48,.12); border-radius: 10px; box-shadow: 0 8px 24px rgba(36,20,48,.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.burger--right { text-align: right; }
.burger--right .burger__panel { margin-left: auto; }
.burger__link { padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #241430; opacity: .7; }
.burger__link.is-active { opacity: 1; font-weight: 600; color: var(--accent); }
.burger__link:hover, .burger__link:focus-visible { background: #FAF7F2; outline: none; }
</style>

tailwind

<details class="burger-tw burger-tw--left w-fit font-medium text-sm" style="--accent:#F5C2E0;" >
  <summary class="list-none cursor-pointer flex flex-col gap-1 p-2.5 rounded-lg w-5" aria-label="Menu">
    <span class="block h-0.5 bg-[#241430] rounded-full"></span>
    <span class="block h-0.5 bg-[#241430] rounded-full"></span>
    <span class="block h-0.5 bg-[#241430] rounded-full"></span>
  </summary>
  <nav aria-label="Mobile" class="mt-1.5 w-44 bg-white border border-[#241430]/10 rounded-xl shadow-lg p-1.5 flex flex-col gap-0.5">
    <a class="px-2.5 py-2 rounded-lg no-underline font-semibold" href="#" aria-current="page" style="color:#F5C2E0;">Home</a>
    <a class="px-2.5 py-2 rounded-lg no-underline text-[#241430]/70 hover:bg-[#FAF7F2]" href="#">Shop</a>
    <a class="px-2.5 py-2 rounded-lg no-underline text-[#241430]/70 hover:bg-[#FAF7F2]" href="#">About</a>
    <a class="px-2.5 py-2 rounded-lg no-underline text-[#241430]/70 hover:bg-[#FAF7F2]" href="#">Contact</a>
  </nav>
</details>
<style>
.burger-tw summary::-webkit-details-marker { display: none; }
.burger-tw summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.burger-tw--right { text-align: right; }
.burger-tw--right nav { margin-left: auto; }
</style>

react

export function HamburgerMenu({
  label = "Menu",
  accent = "#F5C2E0",
  open = false,
  position = "left",
}) {
  return (
    <details open={open} style={{ width: "fit-content", fontFamily: "system-ui, sans-serif", fontSize: 14, fontWeight: 500, textAlign: position === "right" ? "right" : "left" }}>
      <summary aria-label={label} style={{ listStyle: "none", cursor: "pointer", display: "flex", flexDirection: "column", gap: 4, padding: 10, borderRadius: 8, width: 20 }}>
        <span style={{ display: "block", height: 2, background: "#241430", borderRadius: 2 }} />
        <span style={{ display: "block", height: 2, background: "#241430", borderRadius: 2 }} />
        <span style={{ display: "block", height: 2, background: "#241430", borderRadius: 2 }} />
      </summary>
      <nav aria-label="Mobile" style={{ marginTop: 6, marginLeft: position === "right" ? "auto" : 0, width: 180, background: "#fff", border: "1px solid rgba(36,20,48,.12)", borderRadius: 10, boxShadow: "0 8px 24px rgba(36,20,48,.14)", padding: 6, display: "flex", flexDirection: "column", gap: 2 }}>
        <a href="#" aria-current="page" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: accent, fontWeight: 600 }}>Home</a>
        <a href="#" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430", opacity: .7 }}>Shop</a>
        <a href="#" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430", opacity: .7 }}>About</a>
        <a href="#" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430", opacity: .7 }}>Contact</a>
      </nav>
    </details>
  );
}