Edit Back Navigation

Name

Also known as (comma separated)

Brief definition Returns to previous view.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Back to Projects" }, { "id": "style", "type": "select", "label": "Style", "default": "link", "options": [ "link", "button" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showIcon", "type": "toggle", "label": "Show chevron", "default": true } ]

Templates (JSON object keyed by format) { "html": "<a class=\"backnav backnav--{{style}}\" href=\"#\" style=\"--accent:{{accent}};\">\n {{#if showIcon}}<span class=\"backnav__chevron\" aria-hidden=\"true\"></span>{{/if}}\n <span>{{label}}</span>\n</a>\n<style>\n.backnav { display: inline-flex; align-items: center; gap: 6px; font: 500 14px system-ui, sans-serif; color: #241430; text-decoration: none; padding: 8px 12px; border-radius: 8px; }\n.backnav:hover { background: #FAF7F2; }\n.backnav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.backnav__chevron { width: 7px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); flex: none; }\n.backnav--button { background: #FAF7F2; border: 1px solid rgba(36,20,48,.12); }\n.backnav--button:hover { background: #F0EAE0; }\n</style>", "tailwind": "<a class=\"backnav-tw backnav-tw--{{style}} inline-flex items-center gap-1.5 px-3 py-2 rounded-lg font-medium text-sm text-[#241430] no-underline hover:bg-[#FAF7F2]\" href=\"#\" style=\"--accent:{{accent}};\">\n {{#if showIcon}}<span class=\"w-[7px] h-[7px] border-l-2 border-b-2 rotate-45 flex-none\" style=\"border-color:{{accent}};\" aria-hidden=\"true\"></span>{{/if}}\n <span>{{label}}</span>\n</a>\n<style>\n.backnav-tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.backnav-tw--button { background: #FAF7F2; border: 1px solid rgba(36,20,48,.12); }\n.backnav-tw--button:hover { background: #F0EAE0; }\n</style>", "react": "export function BackNavigation({\n label = \"{{label}}\",\n style = \"{{style}}\",\n accent = \"{{accent}}\",\n showIcon = {{showIcon}},\n}) {\n const button = style === \"button\";\n return (\n <a href=\"#\" style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, fontFamily: \"system-ui, sans-serif\", fontSize: 14, fontWeight: 500, color: \"#241430\", textDecoration: \"none\", padding: \"8px 12px\", borderRadius: 8, background: button ? \"#FAF7F2\" : \"transparent\", border: button ? \"1px solid rgba(36,20,48,.12)\" : \"none\" }}>\n {showIcon && <span aria-hidden=\"true\" style={{ width: 7, height: 7, borderLeft: \"2px solid \" + accent, borderBottom: \"2px solid \" + accent, transform: \"rotate(45deg)\", flex: \"none\" }} />}\n <span>{label}</span>\n </a>\n );\n}" }