Edit LTR

Name

Also known as (comma separated)

Brief definition Left-to-right text direction.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "lang", "type": "select", "label": "Language", "default": "en", "options": [ "en", "fr", "de" ] }, { "id": "showIcon", "type": "toggle", "label": "Show leading icon", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "badgeCount", "type": "number", "label": "Notification count", "default": 3, "min": 0, "max": 99, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<nav class=\"ltrnav ltrnav--{{lang}}\" dir=\"ltr\" lang=\"{{lang}}\">\n {{#if showIcon}}<span class=\"ltrnav__icon\" style=\"background:{{accent}};\" aria-hidden=\"true\">&#9776;</span>{{/if}}\n <span class=\"ltrnav__label ltrnav__label--en\">Dashboard</span>\n <span class=\"ltrnav__label ltrnav__label--fr\">Tableau de bord</span>\n <span class=\"ltrnav__label ltrnav__label--de\">&Uuml;bersicht</span>\n <span class=\"ltrnav__badge\" style=\"background:{{accent}};\">{{badgeCount}}</span>\n</nav>\n<style>\n.ltrnav { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px 16px; border-radius: 12px; width: 280px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; }\n.ltrnav__icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }\n.ltrnav__label { display: none; flex: 1; font-weight: 600; }\n.ltrnav--en .ltrnav__label--en, .ltrnav--fr .ltrnav__label--fr, .ltrnav--de .ltrnav__label--de { display: block; }\n.ltrnav__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #241430; }\n</style>", "tailwind": "<nav class=\"ltrnavtw ltrnavtw--{{lang}} font-sans text-[#241430] bg-[#FAF7F2] py-3.5 px-4 rounded-xl w-[280px] box-border flex items-center gap-2.5\" dir=\"ltr\" lang=\"{{lang}}\">\n {{#if showIcon}}<span class=\"w-[30px] h-[30px] rounded-lg grid place-items-center shrink-0\" style=\"background:{{accent}};\" aria-hidden=\"true\">&#9776;</span>{{/if}}\n <span class=\"ltrnavtw__label ltrnavtw__label--en hidden flex-1 font-semibold\">Dashboard</span>\n <span class=\"ltrnavtw__label ltrnavtw__label--fr hidden flex-1 font-semibold\">Tableau de bord</span>\n <span class=\"ltrnavtw__label ltrnavtw__label--de hidden flex-1 font-semibold\">&Uuml;bersicht</span>\n <span class=\"min-w-[20px] h-5 px-1.5 rounded-full grid place-items-center text-[11px] font-bold\" style=\"background:{{accent}};\">{{badgeCount}}</span>\n</nav>\n<style>\n.ltrnavtw--en .ltrnavtw__label--en, .ltrnavtw--fr .ltrnavtw__label--fr, .ltrnavtw--de .ltrnavtw__label--de { display: block; }\n</style>", "react": "export function Ltr({\n lang = \"{{lang}}\",\n showIcon = {{showIcon}},\n accent = \"{{accent}}\",\n badgeCount = {{badgeCount}},\n}) {\n const labels = { en: \"Dashboard\", fr: \"Tableau de bord\", de: \"\\u00DCbersicht\" };\n return (\n <nav dir=\"ltr\" lang={lang} style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: \"14px 16px\", borderRadius: 12, width: 280, boxSizing: \"border-box\", display: \"flex\", alignItems: \"center\", gap: 10 }}>\n {showIcon && <span aria-hidden=\"true\" style={{ width: 30, height: 30, borderRadius: 8, display: \"grid\", placeItems: \"center\", flexShrink: 0, background: accent }}>&#9776;</span>}\n <span style={{ flex: 1, fontWeight: 600 }}>{labels[lang]}</span>\n <span style={{ minWidth: 20, height: 20, padding: \"0 6px\", borderRadius: 999, display: \"grid\", placeItems: \"center\", fontSize: 11, fontWeight: 700, color: \"#241430\", background: accent }}>{badgeCount}</span>\n </nav>\n );\n}" }