Components
Breadcrumbs
Hierarchical navigation links with slash separators.
Breadcrumbs are composed using standard elements: a <nav> wrapping a <menu> of link buttons (<a class="ui-button" data-variant="link">) separated by <span class="text-muted-foreground opacity-50">/</span>.
The active page is rendered as a non-interactive <div class="ui-button" data-variant="link" aria-disabled="true">.
Default
Loading components…
<nav class="flex items-center gap-xs"> <menu class="flex items-center gap-xs"> <li><a class="ui-button" data-variant="link">Home</a></li> <li><span class="text-muted-foreground opacity-50">/</span></li> <li> <div class="ui-button" data-variant="link" aria-disabled="true">Product name</div> </li> </menu></nav>