ComponentesComponents

Breadcrumbs

Muestra dónde estás dentro del sitio.Shows where you are in the site.

DiseñoDesign: coss ui (MIT) · breadcrumb.tsxMITambos · densidaddensity baja · sobriaMarkdownJSON

CódigoCode

<nav aria-label="Ruta">
  <ol class="c-breadcrumb__list">
    <li class="c-breadcrumb__item"><a class="c-breadcrumb__link" href="#">Inicio</a></li>
    <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>
    <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>
    <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>
    <li class="c-breadcrumb__item"><a class="c-breadcrumb__link" href="#componentes">Componentes</a></li>
    <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>
    <li class="c-breadcrumb__item"><span class="c-breadcrumb__page" aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

  1. Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
  2. Copia los archivos:Copy the files: breadcrumb.html, breadcrumb.css.
  3. Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

  • En sitios con 3 o más niveles.
  • In sites with 3 or more levels.

Mejor noAvoid

  • Como navegación principal.
  • As the main navigation.

AccesibilidadAccessibility

navigationlink
TabRecorre los enlacesMoves through the links
  • <nav aria-label> con una lista ordenada; la página actual lleva aria-current=page.
  • Los separadores están ocultos al lector.
  • <nav aria-label> with an ordered list; the current page has aria-current=page.
  • Separators are hidden from screen readers.

Cómo probarloHow to test it

  • El lector dice «Ruta, navegación, lista de 4».
  • The screen reader says “Breadcrumb, navigation, list of 4”.

CréditosCredits