{
  "name": "breadcrumb",
  "title": {
    "es": "Breadcrumbs",
    "en": "Breadcrumbs"
  },
  "summary": {
    "es": "Muestra dónde estás dentro del sitio.",
    "en": "Shows where you are in the site."
  },
  "category": "navigation",
  "status": "stable",
  "nivel": "componentes",
  "updated": "2026-09-29",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/breadcrumb/",
  "requires": [],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/breadcrumb/breadcrumb.html",
      "content": "<nav aria-label=\"Ruta\">\n  <ol class=\"c-breadcrumb__list\">\n    <li class=\"c-breadcrumb__item\"><a class=\"c-breadcrumb__link\" href=\"#\">Inicio</a></li>\n    <li class=\"c-breadcrumb__separator\" role=\"presentation\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"/></svg></li>\n    <li class=\"c-breadcrumb__item\"><span class=\"c-breadcrumb__ellipsis\" role=\"img\" aria-label=\"Más niveles\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" width=\"16\" height=\"16\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/></svg></span></li>\n    <li class=\"c-breadcrumb__separator\" role=\"presentation\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"/></svg></li>\n    <li class=\"c-breadcrumb__item\"><a class=\"c-breadcrumb__link\" href=\"#componentes\">Componentes</a></li>\n    <li class=\"c-breadcrumb__separator\" role=\"presentation\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"/></svg></li>\n    <li class=\"c-breadcrumb__item\"><span class=\"c-breadcrumb__page\" aria-current=\"page\">Breadcrumbs</span></li>\n  </ol>\n</nav>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/breadcrumb/breadcrumb.css",
      "content": "/* breadcrumb · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde breadcrumb.tw.json. No editar a mano. Necesita tokens.css. */\n.c-breadcrumb__list{display:flex}\n.c-breadcrumb__item{display:inline-flex}\n.c-breadcrumb__ellipsis{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}\n.c-breadcrumb__list{flex-wrap:wrap;align-items:center}\n.c-breadcrumb__item{align-items:center}\n.c-breadcrumb__list{gap:calc(var(--spacing)*1.5)}\n.c-breadcrumb__item{gap:calc(var(--spacing)*1.5)}\n.c-breadcrumb__list{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-breadcrumb__page{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}\n.c-breadcrumb__list{overflow-wrap:break-word}\n.c-breadcrumb__page{color:var(--foreground)}\n.c-breadcrumb__list{color:var(--muted-foreground)}\n.c-breadcrumb__separator{opacity:.8}\n.c-breadcrumb__link{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}\n@media (hover:hover){\n.c-breadcrumb__link:hover{color:var(--foreground)}\n}\n@media (min-width:40rem){\n.c-breadcrumb__list{gap:calc(var(--spacing)*2.5)}\n}\n.c-breadcrumb__separator>svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}\n/* propio */\n.c-breadcrumb__list{list-style:none;margin:0;padding:0}\n.c-breadcrumb__link{color:inherit;text-decoration:none;border-radius:4px}\n.c-breadcrumb__link:focus-visible{outline:2px solid var(--ring);outline-offset:2px}\n.c-breadcrumb__separator{display:inline-flex}\n.c-breadcrumb__ellipsis{display:inline-flex;align-items:center;justify-content:center}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/breadcrumb.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "ambos",
  "densidad": "baja",
  "tono": "sobria",
  "states": [
    "rest",
    "hover",
    "focus",
    "current"
  ],
  "use": {
    "es": [
      "En sitios con 3 o más niveles."
    ],
    "en": [
      "In sites with 3 or more levels."
    ]
  },
  "avoid": {
    "es": [
      "Como navegación principal."
    ],
    "en": [
      "As the main navigation."
    ]
  },
  "a11y": {
    "roles": [
      "navigation",
      "link"
    ],
    "keyboard": [
      {
        "keys": "Tab",
        "es": "Recorre los enlaces",
        "en": "Moves through the links"
      }
    ],
    "notes": {
      "es": [
        "<nav aria-label> con una lista ordenada; la página actual lleva aria-current=page.",
        "Los separadores están ocultos al lector."
      ],
      "en": [
        "<nav aria-label> with an ordered list; the current page has aria-current=page.",
        "Separators are hidden from screen readers."
      ]
    },
    "test": {
      "es": [
        "El lector dice «Ruta, navegación, lista de 4»."
      ],
      "en": [
        "The screen reader says “Breadcrumb, navigation, list of 4”."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "coss ui (MIT) · breadcrumb.tsx",
      "url": "https://coss.com/ui"
    },
    {
      "source": "W3C WAI-ARIA APG, Breadcrumb",
      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/"
    }
  ],
  "changes": [
    {
      "date": "2026-09-29",
      "es": "Diseño de coss ui en HTML, CSS y JS sin dependencias",
      "en": "coss ui design in dependency-free HTML, CSS and JS"
    }
  ],
  "partes": [],
  "pieza": "https://componentes-lovat.vercel.app/r/breadcrumb.html"
}