# Breadcrumbs / Breadcrumbs > Shows where you are in the site. Page: https://componentes-lovat.vercel.app/c/breadcrumb/ License: MIT · Design: coss ui (MIT) · breadcrumb.tsx Requires: tokens.css Context: ambos · Density: baja · Tone: sobria ## Files - Tokens (once): https://componentes-lovat.vercel.app/tokens.css - HTML: https://componentes-lovat.vercel.app/raw/breadcrumb/breadcrumb.html - CSS: https://componentes-lovat.vercel.app/raw/breadcrumb/breadcrumb.css - Everything in one file: https://componentes-lovat.vercel.app/r/breadcrumb.html Dark theme: add class `dark` to ``. ## When to use - In sites with 3 or more levels. ## When not to use - As the main navigation. ## Accessibility Roles: navigation, link | Keys | Action | |---|---| | Tab | Moves through the links | -

with an ordered list; the current page has aria-current=page. - Separators are hidden from screen readers. ## Code ```html ``` ```css /* breadcrumb · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI). Generado por tools/build_css.py desde breadcrumb.tw.json. No editar a mano. Necesita tokens.css. */ .c-breadcrumb__list{display:flex} .c-breadcrumb__item{display:inline-flex} .c-breadcrumb__ellipsis{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)} .c-breadcrumb__list{flex-wrap:wrap;align-items:center} .c-breadcrumb__item{align-items:center} .c-breadcrumb__list{gap:calc(var(--spacing)*1.5)} .c-breadcrumb__item{gap:calc(var(--spacing)*1.5)} .c-breadcrumb__list{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))} .c-breadcrumb__page{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)} .c-breadcrumb__list{overflow-wrap:break-word} .c-breadcrumb__page{color:var(--foreground)} .c-breadcrumb__list{color:var(--muted-foreground)} .c-breadcrumb__separator{opacity:.8} .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))} @media (hover:hover){ .c-breadcrumb__link:hover{color:var(--foreground)} } @media (min-width:40rem){ .c-breadcrumb__list{gap:calc(var(--spacing)*2.5)} } .c-breadcrumb__separator>svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)} /* propio */ .c-breadcrumb__list{list-style:none;margin:0;padding:0} .c-breadcrumb__link{color:inherit;text-decoration:none;border-radius:4px} .c-breadcrumb__link:focus-visible{outline:2px solid var(--ring);outline-offset:2px} .c-breadcrumb__separator{display:inline-flex} .c-breadcrumb__ellipsis{display:inline-flex;align-items:center;justify-content:center} ``` ## Credits - coss ui (MIT) · breadcrumb.tsx: https://coss.com/ui - W3C WAI-ARIA APG, Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/