Edit Hamburger Menu

Name

Also known as (comma separated)

Brief definition Collapsed mobile navigation trigger.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Accessible label", "default": "Menu" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "open", "type": "toggle", "label": "Open by default", "default": false }, { "id": "position", "type": "select", "label": "Panel position", "default": "left", "options": [ "left", "right" ] } ]

Templates (JSON object keyed by format) { "html": "<details class=\"burger burger--{{position}}\" style=\"--accent:{{accent}};\" {{#if open}}open{{/if}}>\n <summary class=\"burger__trigger\" aria-label=\"{{label}}\">\n <span class=\"burger__bar\"></span><span class=\"burger__bar\"></span><span class=\"burger__bar\"></span>\n </summary>\n <nav class=\"burger__panel\" aria-label=\"Mobile\">\n <a class=\"burger__link is-active\" href=\"#\" aria-current=\"page\">Home</a>\n <a class=\"burger__link\" href=\"#\">Shop</a>\n <a class=\"burger__link\" href=\"#\">About</a>\n <a class=\"burger__link\" href=\"#\">Contact</a>\n </nav>\n</details>\n<style>\n.burger { width: fit-content; font: 500 14px system-ui, sans-serif; }\n.burger__trigger { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 8px; width: 20px; }\n.burger__trigger::-webkit-details-marker { display: none; }\n.burger__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.burger__bar { display: block; height: 2px; background: #241430; border-radius: 2px; }\n.burger[open] .burger__trigger { background: var(--accent); }\n.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; }\n.burger--right { text-align: right; }\n.burger--right .burger__panel { margin-left: auto; }\n.burger__link { padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #241430; opacity: .7; }\n.burger__link.is-active { opacity: 1; font-weight: 600; color: var(--accent); }\n.burger__link:hover, .burger__link:focus-visible { background: #FAF7F2; outline: none; }\n</style>", "tailwind": "<details class=\"burger-tw burger-tw--{{position}} w-fit font-medium text-sm\" style=\"--accent:{{accent}};\" {{#if open}}open{{/if}}>\n <summary class=\"list-none cursor-pointer flex flex-col gap-1 p-2.5 rounded-lg w-5\" aria-label=\"{{label}}\">\n <span class=\"block h-0.5 bg-[#241430] rounded-full\"></span>\n <span class=\"block h-0.5 bg-[#241430] rounded-full\"></span>\n <span class=\"block h-0.5 bg-[#241430] rounded-full\"></span>\n </summary>\n <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\">\n <a class=\"px-2.5 py-2 rounded-lg no-underline font-semibold\" href=\"#\" aria-current=\"page\" style=\"color:{{accent}};\">Home</a>\n <a class=\"px-2.5 py-2 rounded-lg no-underline text-[#241430]/70 hover:bg-[#FAF7F2]\" href=\"#\">Shop</a>\n <a class=\"px-2.5 py-2 rounded-lg no-underline text-[#241430]/70 hover:bg-[#FAF7F2]\" href=\"#\">About</a>\n <a class=\"px-2.5 py-2 rounded-lg no-underline text-[#241430]/70 hover:bg-[#FAF7F2]\" href=\"#\">Contact</a>\n </nav>\n</details>\n<style>\n.burger-tw summary::-webkit-details-marker { display: none; }\n.burger-tw summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.burger-tw--right { text-align: right; }\n.burger-tw--right nav { margin-left: auto; }\n</style>", "react": "export function HamburgerMenu({\n label = \"{{label}}\",\n accent = \"{{accent}}\",\n open = {{open}},\n position = \"{{position}}\",\n}) {\n return (\n <details open={open} style={{ width: \"fit-content\", fontFamily: \"system-ui, sans-serif\", fontSize: 14, fontWeight: 500, textAlign: position === \"right\" ? \"right\" : \"left\" }}>\n <summary aria-label={label} style={{ listStyle: \"none\", cursor: \"pointer\", display: \"flex\", flexDirection: \"column\", gap: 4, padding: 10, borderRadius: 8, width: 20 }}>\n <span style={{ display: \"block\", height: 2, background: \"#241430\", borderRadius: 2 }} />\n <span style={{ display: \"block\", height: 2, background: \"#241430\", borderRadius: 2 }} />\n <span style={{ display: \"block\", height: 2, background: \"#241430\", borderRadius: 2 }} />\n </summary>\n <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 }}>\n <a href=\"#\" aria-current=\"page\" style={{ padding: \"8px 10px\", borderRadius: 8, textDecoration: \"none\", color: accent, fontWeight: 600 }}>Home</a>\n <a href=\"#\" style={{ padding: \"8px 10px\", borderRadius: 8, textDecoration: \"none\", color: \"#241430\", opacity: .7 }}>Shop</a>\n <a href=\"#\" style={{ padding: \"8px 10px\", borderRadius: 8, textDecoration: \"none\", color: \"#241430\", opacity: .7 }}>About</a>\n <a href=\"#\" style={{ padding: \"8px 10px\", borderRadius: 8, textDecoration: \"none\", color: \"#241430\", opacity: .7 }}>Contact</a>\n </nav>\n </details>\n );\n}" }