Skip to content
← Mystery Meat Navigation
Edit Mystery Meat Navigation
Name
Also known as (comma separated)
Brief definition
Navigation where purpose is unclear until interacted with.
Notes
Tier
Core
Useful
Reference
Deleted
Controls schema (JSON array)
[ { "id": "activeLabel", "type": "text", "label": "Active label", "default": "Settings" }, { "id": "fixed", "type": "toggle", "label": "Fixed (labelled icons)", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]
Templates (JSON object keyed by format)
{ "html": "<div class=\"mm-demo\" style=\"--accent:{{accent}};\">\n <span class=\"mm-demo__badge{{#if fixed}} mm-demo__badge--good{{/if}}\">{{#if fixed}}✓ Better{{/if}}{{unless fixed}}✗ Anti-pattern: mystery meat navigation{{/unless}}</span>\n <nav class=\"mm-demo__nav{{#if fixed}} is-labelled{{/if}}\">\n <span class=\"mm-demo__item\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 12h16M4 6h16M4 18h16\" /></svg>{{#if fixed}}Menu{{/if}}</span>\n <span class=\"mm-demo__item\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 21c0-4 4-6 8-6s8 2 8 6\" /></svg>{{#if fixed}}Profile{{/if}}</span>\n <span class=\"mm-demo__item mm-demo__item--active\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\" /><path d=\"M4 12h2m12 0h2M12 4v2m0 12v2\" /></svg>{{#if fixed}}{{activeLabel}}{{/if}}</span>\n </nav>\n</div>\n<style>\n.mm-demo { width: 280px; font: 13px system-ui, sans-serif; color: #241430; }\n.mm-demo__badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-bottom: 10px; background: #b3261e; color: #FAF7F2; }\n.mm-demo__badge--good { background: #1a7a44; }\n.mm-demo__nav { display: flex; gap: 6px; padding: 8px; border-radius: 10px; background: #24143010; }\n.mm-demo__item { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; color: #241430aa; }\n.mm-demo__item--active { color: var(--accent); font-weight: 700; }\n.mm-demo__nav.is-labelled .mm-demo__item { background: #FAF7F2; }\n</style>", "tailwind": "<div style=\"width:280px;font-family:system-ui,sans-serif;color:#241430\">\n <span class=\"mm-tw-badge{{#if fixed}} mm-tw-badge--good{{/if}} inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5\">{{#if fixed}}✓ Better{{/if}}{{unless fixed}}✗ Anti-pattern: mystery meat navigation{{/unless}}</span>\n <nav class=\"mm-tw{{#if fixed}} is-labelled{{/if}} flex gap-1.5 p-2 rounded-xl bg-[#24143010]\">\n <span class=\"flex items-center gap-1.5 px-2.5 py-2 rounded-lg text-[#241430aa]\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 12h16M4 6h16M4 18h16\" /></svg>{{#if fixed}}Menu{{/if}}</span>\n <span class=\"flex items-center gap-1.5 px-2.5 py-2 rounded-lg text-[#241430aa]\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 21c0-4 4-6 8-6s8 2 8 6\" /></svg>{{#if fixed}}Profile{{/if}}</span>\n <span class=\"flex items-center gap-1.5 px-2.5 py-2 rounded-lg font-bold\" style=\"color:{{accent}}\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\" /><path d=\"M4 12h2m12 0h2M12 4v2m0 12v2\" /></svg>{{#if fixed}}{{activeLabel}}{{/if}}</span>\n </nav>\n</div>\n<style>\n.mm-tw.is-labelled span { background: #FAF7F2; }\n</style>", "react": "export function MysteryMeatNav({\n activeLabel = \"{{activeLabel}}\",\n fixed = {{fixed}},\n accent = \"{{accent}}\",\n}) {\n const item = { display: \"flex\", alignItems: \"center\", gap: 6, padding: \"8px 10px\", borderRadius: 8, color: \"#241430aa\", background: fixed ? \"#FAF7F2\" : \"transparent\" };\n return (\n <div style={{ width: 280, fontFamily: \"system-ui, sans-serif\", fontSize: 13, color: \"#241430\" }}>\n <span style={{ display: \"inline-block\", padding: \"3px 10px\", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? \"#1a7a44\" : \"#b3261e\", color: \"#FAF7F2\" }}>\n {fixed ? \"\\u2713 Better\" : \"\\u2717 Anti-pattern: mystery meat navigation\"}\n </span>\n <nav style={{ display: \"flex\", gap: 6, padding: 8, borderRadius: 10, background: \"#24143010\" }}>\n <span style={item}><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M4 12h16M4 6h16M4 18h16\" /></svg>{fixed && \"Menu\"}</span>\n <span style={item}><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"8\" r=\"4\" /><path d=\"M4 21c0-4 4-6 8-6s8 2 8 6\" /></svg>{fixed && \"Profile\"}</span>\n <span style={{ ...item, color: accent, fontWeight: 700 }}><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\" /><path d=\"M4 12h2m12 0h2M12 4v2m0 12v2\" /></svg>{fixed && activeLabel}</span>\n </nav>\n </div>\n );\n}" }
Save
History