.talos-breadcrumbs is the app-nav path trail — uppercase display type on a
tight HUD track. The › separator is generated by the CSS on every crumb but
the last, so the markup stays clean: you only write the crumbs, the trail draws
itself.
Default
PREVIEW
<nav class="talos-breadcrumbs">
<a class="talos-breadcrumb" href="#">Home</a>
<a class="talos-breadcrumb" href="#">Cluster</a>
<span class="talos-breadcrumb" aria-current="page">atlas-01</span>
</nav>Links sit in --talos-text-secondary and brighten to primary on hover. The
› separator is the ::after on each .talos-breadcrumb:not(:last-child) —
no separator element in the markup.
Current crumb
PREVIEW
<span class="talos-breadcrumb" aria-current="page">atlas-01</span>aria-current="page" marks the terminal crumb: it reads in
--talos-text-primary and drops pointer-events, so it’s the destination, not
a link. Make it the last child — being last is also what suppresses its
trailing separator.
Classes
| Class / attribute | Effect |
|---|---|
.talos-breadcrumbs | flex <nav> row; uppercase display type, tight HUD track |
.talos-breadcrumb | one crumb — link (secondary, brightens on hover) or <span> |
:not(:last-child)::after | draws the › separator after every crumb but the last |
aria-current="page" | current/terminal crumb — primary colour, pointer-events off |