Components
Breadcrumbs
Hierarchical navigation composed from link buttons and separators.
Breadcrumbs are a composition, not a dedicated primitive. A <nav> wraps a <menu> of
link buttons (<a class="button" data-variant="link">) separated by
<span class="text-muted-foreground opacity-50">/</span> glyphs. The current page is rendered as
a <div class="button" data-variant="link" aria-disabled="true"> — the same link styling on a
non-interactive <div> instead of an <a>, so it reads as the active crumb.
Default
Loading components…
<nav class="flex items-center gap-xs"> <menu class="flex items-center gap-xs"> <li><a class="button" data-variant="link">Home</a></li> <li><span class="text-muted-foreground opacity-50">/</span></li> <li> <div class="button" data-variant="link" aria-disabled="true">Product name</div> </li> </menu></nav>