Components / Layout & Navigation / Breadcrumbs

Breadcrumbs beta

Where you are, as a path. The last crumb is the page itself — not a link.

Preview

<nav aria-label="Breadcrumb"><ol class="k-crumbs">
  <li><a href="#">Home</a><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></li>
  <li><a href="#">Projects</a><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></li>
  <li><a href="#">kata-ui</a><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></li>
  <li><span aria-current="page">Components</span></li>
</ol></nav>

/* KATA Breadcrumbs */
.k-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-family:var(--k-font);list-style:none}
.k-crumbs li{display:flex;align-items:center;gap:8px}
.k-crumbs a{color:var(--k-ink-2);text-decoration:none}
.k-crumbs a:hover{color:var(--k-ink);text-decoration:underline;text-underline-offset:3px}
.k-crumbs svg{color:var(--k-ink-3);flex:none}
.k-crumbs [aria-current="page"]{color:var(--k-ink);font-weight:550}

Usage

For hierarchies three levels or deeper. Keep crumb names short; if the path gets long, collapse the middle on small screens rather than wrapping.

Accessibility

A <nav> with an ordered list; the current page is plain text with aria-current="page". Separators are decorative.

Accordion

Pagination