Edit Sidebar Navigation

Name

Also known as (comma separated)

Brief definition Navigation presented vertically.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "collapsed", "type": "toggle", "label": "Collapsed", "default": false }, { "id": "width", "type": "number", "label": "Width (px)", "default": 220, "min": 160, "max": 320, "step": 10 }, { "id": "activeLabel", "type": "text", "label": "Active item label", "default": "Overview" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#BFD9F2", "#F5C2E0", "#E8A020", "#241430" ] }, { "id": "variant", "type": "select", "label": "Variant", "default": "light", "options": [ "light", "dark" ] } ]

Templates (JSON object keyed by format) { "html": "<nav class=\"sidenav sidenav--{{variant}} {{#if collapsed}}sidenav--collapsed{{/if}}\" style=\"--accent:{{accent}}; --w:{{width}}px;\" aria-label=\"Sidebar\">\n <a class=\"sidenav__item is-active\" href=\"#\" aria-current=\"page\"><span class=\"sidenav__icon\" aria-hidden=\"true\"></span><span class=\"sidenav__label\">{{activeLabel}}</span></a>\n <a class=\"sidenav__item\" href=\"#\"><span class=\"sidenav__icon\" aria-hidden=\"true\"></span><span class=\"sidenav__label\">Projects</span></a>\n <a class=\"sidenav__item\" href=\"#\"><span class=\"sidenav__icon\" aria-hidden=\"true\"></span><span class=\"sidenav__label\">Team</span></a>\n <a class=\"sidenav__item\" href=\"#\"><span class=\"sidenav__icon\" aria-hidden=\"true\"></span><span class=\"sidenav__label\">Settings</span></a>\n</nav>\n<style>\n.sidenav { display: flex; flex-direction: column; gap: 2px; width: var(--w); padding: 10px; border-radius: 12px; font: 500 14px system-ui, sans-serif; }\n@media (prefers-reduced-motion: no-preference) {\n .sidenav { transition: width .15s ease; }\n}\n.sidenav--light { background: #FAF7F2; color: #241430; }\n.sidenav--dark { background: #241430; color: #FAF7F2; }\n.sidenav--collapsed { width: 60px; }\n.sidenav__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: inherit; opacity: .7; }\n.sidenav__item.is-active { opacity: 1; background: var(--accent); color: #241430; }\n.sidenav__item:hover, .sidenav__item:focus-visible { opacity: 1; outline: none; }\n.sidenav__icon { width: 16px; height: 16px; border-radius: 5px; border: 2px solid currentColor; flex: none; }\n.sidenav--collapsed .sidenav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }\n</style>", "tailwind": "<nav aria-label=\"Sidebar\" class=\"sidenav-tw sidenav-tw--{{variant}} {{#if collapsed}}sidenav-tw--collapsed{{/if}} flex flex-col gap-0.5 p-2.5 rounded-xl font-medium text-sm\" style=\"--accent:{{accent}}; width:{{width}}px;\">\n <a class=\"flex items-center gap-2.5 px-2.5 py-2 rounded-lg no-underline font-semibold\" href=\"#\" aria-current=\"page\" style=\"background:{{accent}};color:#241430;\"><span class=\"sidenav-tw__icon w-4 h-4 rounded-md border-2 border-current flex-none\" aria-hidden=\"true\"></span><span class=\"sidenav-tw__label\">{{activeLabel}}</span></a>\n <a class=\"flex items-center gap-2.5 px-2.5 py-2 rounded-lg no-underline opacity-70 hover:opacity-100\" href=\"#\" style=\"color:inherit;\"><span class=\"sidenav-tw__icon w-4 h-4 rounded-md border-2 border-current flex-none\" aria-hidden=\"true\"></span><span class=\"sidenav-tw__label\">Projects</span></a>\n <a class=\"flex items-center gap-2.5 px-2.5 py-2 rounded-lg no-underline opacity-70 hover:opacity-100\" href=\"#\" style=\"color:inherit;\"><span class=\"sidenav-tw__icon w-4 h-4 rounded-md border-2 border-current flex-none\" aria-hidden=\"true\"></span><span class=\"sidenav-tw__label\">Team</span></a>\n <a class=\"flex items-center gap-2.5 px-2.5 py-2 rounded-lg no-underline opacity-70 hover:opacity-100\" href=\"#\" style=\"color:inherit;\"><span class=\"sidenav-tw__icon w-4 h-4 rounded-md border-2 border-current flex-none\" aria-hidden=\"true\"></span><span class=\"sidenav-tw__label\">Settings</span></a>\n</nav>\n<style>\n.sidenav-tw--light { background: #FAF7F2; color: #241430; }\n.sidenav-tw--dark { background: #241430; color: #FAF7F2; }\n.sidenav-tw--collapsed { width: 60px !important; }\n.sidenav-tw--collapsed .sidenav-tw__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }\n</style>", "react": "export function SidebarNavigation({\n collapsed = {{collapsed}},\n width = {{width}},\n activeLabel = \"{{activeLabel}}\",\n accent = \"{{accent}}\",\n variant = \"{{variant}}\",\n}) {\n const dark = variant === \"dark\";\n const labelStyle = collapsed\n ? { position: \"absolute\", width: 1, height: 1, overflow: \"hidden\", clip: \"rect(0,0,0,0)\", whiteSpace: \"nowrap\" }\n : {};\n const items = [\n { label: activeLabel, active: true },\n { label: \"Projects\" },\n { label: \"Team\" },\n { label: \"Settings\" },\n ];\n return (\n <nav aria-label=\"Sidebar\" style={{ display: \"flex\", flexDirection: \"column\", gap: 2, width: collapsed ? 60 : width, padding: 10, borderRadius: 12, fontFamily: \"system-ui, sans-serif\", fontSize: 14, fontWeight: 500, background: dark ? \"#241430\" : \"#FAF7F2\", color: dark ? \"#FAF7F2\" : \"#241430\" }}>\n {items.map((item) => (\n <a key={item.label} href=\"#\" aria-current={item.active ? \"page\" : undefined} style={{ display: \"flex\", alignItems: \"center\", gap: 10, padding: \"9px 10px\", borderRadius: 8, textDecoration: \"none\", color: item.active ? \"#241430\" : \"inherit\", opacity: item.active ? 1 : .7, background: item.active ? accent : \"transparent\" }}>\n <span aria-hidden=\"true\" style={{ width: 16, height: 16, borderRadius: 5, border: \"2px solid currentColor\", flex: \"none\" }} />\n <span style={labelStyle}>{item.label}</span>\n </a>\n ))}\n </nav>\n );\n}" }