Edit Bottom Navigation

Name

Also known as (comma separated)

Brief definition Mobile navigation at bottom of screen.

Notes **Responsive & Mobile UI:** Mobile navigation at screen bottom.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "activeLabel", "type": "text", "label": "Active item label", "default": "Home" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#BFD9F2", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "style", "type": "select", "label": "Style", "default": "labeled", "options": [ "labeled", "icon-only" ] }, { "id": "badge", "type": "toggle", "label": "Show alert badge", "default": true } ]

Templates (JSON object keyed by format) { "html": "<nav class=\"bottomnav bottomnav--{{style}}\" style=\"--accent:{{accent}};\" aria-label=\"Mobile\">\n <a class=\"bottomnav__item is-active\" href=\"#\" aria-current=\"page\">\n <span class=\"bottomnav__icon bottomnav__icon--home\" aria-hidden=\"true\"></span>\n <span class=\"bottomnav__label\">{{activeLabel}}</span>\n </a>\n <a class=\"bottomnav__item\" href=\"#\">\n <span class=\"bottomnav__icon bottomnav__icon--search\" aria-hidden=\"true\"></span>\n <span class=\"bottomnav__label\">Search</span>\n </a>\n <a class=\"bottomnav__item\" href=\"#\">\n <span class=\"bottomnav__icon bottomnav__icon--alerts\" aria-hidden=\"true\">{{#if badge}}<span class=\"bottomnav__badge\"></span>{{/if}}</span>\n <span class=\"bottomnav__label\">Alerts</span>\n </a>\n <a class=\"bottomnav__item\" href=\"#\">\n <span class=\"bottomnav__icon bottomnav__icon--profile\" aria-hidden=\"true\"></span>\n <span class=\"bottomnav__label\">Profile</span>\n </a>\n</nav>\n<style>\n.bottomnav { display: flex; justify-content: space-around; align-items: center; background: #FAF7F2; padding: 8px 4px; border-radius: 16px; width: 320px; font: 500 11px system-ui, sans-serif; }\n.bottomnav__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #241430; opacity: .55; text-decoration: none; padding: 4px 10px; border-radius: 10px; }\n.bottomnav__item.is-active { opacity: 1; color: var(--accent); }\n.bottomnav__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }\n.bottomnav__icon { position: relative; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 5px; }\n.bottomnav__icon--home { border-radius: 50% 50% 5px 5px; }\n.bottomnav__icon--search { border-radius: 50%; }\n.bottomnav__badge { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 2px solid #FAF7F2; }\n.bottomnav--icon-only .bottomnav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }\n</style>", "tailwind": "<nav aria-label=\"Mobile\" class=\"bottomnav-tw bottomnav-tw--{{style}} flex justify-around items-center bg-[#FAF7F2] px-1 py-2 rounded-2xl w-80 font-medium text-[11px]\" style=\"--accent:{{accent}};\">\n <a class=\"flex flex-col items-center gap-1 px-2.5 py-1 rounded-lg no-underline\" href=\"#\" aria-current=\"page\" style=\"color:{{accent}};\">\n <span class=\"w-[18px] h-[18px] border-2 rounded-t-full rounded-b-md\" aria-hidden=\"true\"></span>\n <span class=\"bottomnav-tw__label\">{{activeLabel}}</span>\n </a>\n <a class=\"flex flex-col items-center gap-1 px-2.5 py-1 rounded-lg text-[#241430]/55 no-underline\" href=\"#\">\n <span class=\"w-[18px] h-[18px] border-2 rounded-full\" aria-hidden=\"true\"></span>\n <span class=\"bottomnav-tw__label\">Search</span>\n </a>\n <a class=\"relative flex flex-col items-center gap-1 px-2.5 py-1 rounded-lg text-[#241430]/55 no-underline\" href=\"#\">\n <span class=\"relative w-[18px] h-[18px] border-2 rounded-md\" aria-hidden=\"true\">{{#if badge}}<span class=\"absolute -top-1 -right-1 w-1.5 h-1.5 rounded-full border-2 border-[#FAF7F2]\" style=\"background:{{accent}};\"></span>{{/if}}</span>\n <span class=\"bottomnav-tw__label\">Alerts</span>\n </a>\n <a class=\"flex flex-col items-center gap-1 px-2.5 py-1 rounded-lg text-[#241430]/55 no-underline\" href=\"#\">\n <span class=\"w-[18px] h-[18px] border-2 rounded-md\" aria-hidden=\"true\"></span>\n <span class=\"bottomnav-tw__label\">Profile</span>\n </a>\n</nav>\n<style>\n.bottomnav-tw a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.bottomnav-tw--icon-only .bottomnav-tw__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }\n</style>", "react": "export function BottomNavigation({\n activeLabel = \"{{activeLabel}}\",\n accent = \"{{accent}}\",\n style = \"{{style}}\",\n badge = {{badge}},\n}) {\n const iconOnly = style === \"icon-only\";\n const labelStyle = iconOnly\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: \"Search\" },\n { label: \"Alerts\", badge },\n { label: \"Profile\" },\n ];\n return (\n <nav aria-label=\"Mobile\" style={{ display: \"flex\", justifyContent: \"space-around\", alignItems: \"center\", background: \"#FAF7F2\", padding: \"8px 4px\", borderRadius: 16, width: 320, fontFamily: \"system-ui, sans-serif\", fontSize: 11, fontWeight: 500 }}>\n {items.map((item) => (\n <a key={item.label} href=\"#\" aria-current={item.active ? \"page\" : undefined} style={{ position: \"relative\", display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 4, padding: \"4px 10px\", borderRadius: 10, textDecoration: \"none\", color: item.active ? accent : \"#241430\", opacity: item.active ? 1 : .55 }}>\n <span style={{ position: \"relative\", width: 18, height: 18, border: \"2px solid currentColor\", borderRadius: 5 }}>\n {item.badge && <span style={{ position: \"absolute\", top: -3, right: -3, width: 7, height: 7, borderRadius: \"50%\", background: accent, border: \"2px solid #FAF7F2\" }} />}\n </span>\n <span style={labelStyle}>{item.label}</span>\n </a>\n ))}\n </nav>\n );\n}" }