{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "breadcrumbs",
  "name": "Breadcrumbs",
  "category": "Navigation",
  "description": "Where you are in a hierarchy, with links back up.",
  "tags": [
    "breadcrumbs",
    "breadcrumb",
    "path",
    "hierarchy"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "breadcrumbs",
      "where am i",
      "category path"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/breadcrumbs",
  "markdownUrl": "https://mian.ro/ai/components/breadcrumbs.md",
  "classes": [
    {
      "name": "mn-breadcrumbs",
      "description": "On a <nav>, containing an <ol>."
    }
  ],
  "accessibility": [
    "<nav aria-label=\"Breadcrumb\">, an ordered list, and aria-current=\"page\" on the last item."
  ],
  "examples": [
    {
      "title": "Basic",
      "description": null,
      "html": "<nav class=\"mn-breadcrumbs\" aria-label=\"Breadcrumb\"><ol>\n  <li><a href=\"#breadcrumbs\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 11 12 3l9 8\"/><path d=\"M5 10v10h14V10\"/></svg><span class=\"mn-sr-only\">Home</span></a></li>\n  <li><a href=\"#breadcrumbs\">Components</a></li>\n  <li><a href=\"#breadcrumbs\">Navigation</a></li>\n  <li><span aria-current=\"page\">Breadcrumbs</span></li>\n</ol></nav>"
    }
  ],
  "css": ".mn-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: var(--mn-text-sm); color: var(--mn-muted); }\n.mn-breadcrumbs li { display: inline-flex; align-items: center; gap: .4rem; }\n.mn-breadcrumbs li + li::before { content: \"\"; width: .35rem; height: .35rem; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; margin-inline-end: .2rem; }\n.mn-breadcrumbs a { color: inherit; text-decoration: none; border-radius: 4px; }\n.mn-breadcrumbs a:hover { color: var(--mn-fg); }\n.mn-breadcrumbs a:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-breadcrumbs [aria-current=\"page\"] { color: var(--mn-fg); font-weight: 500; }\n.mn-breadcrumbs svg { width: .95rem; height: .95rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/breadcrumbs.json"
  }
}