Skip to content
heyrav design system
ComponentsIn tools

Breadcrumb

Where you are, one level at a time. Text only - no icons in navigation chrome.

Used onTools rail
Show code
<nav aria-label="Breadcrumb"><ol class="crumbs"><li><a href="#">heyrav</a></li><li class="sep" aria-hidden="true">/</li><li><a href="#">tools</a></li><li class="sep" aria-hidden="true">/</li><li><span aria-current="page">Line Field</span></li></ol></nav>

Path variant

Shipped on the IRBS case as the IA tree's path: uppercase mono, the current node in ink.

OneStopServicesRoom booking
Show code
<div class="ia-path"><span>OneStop</span><span>Services</span><span>Room booking</span></div>

Accessibility

Wrap in <nav aria-label="Breadcrumb">, mark the current page with aria-current="page", and hide separators from assistive tech.