Breadcrumb

Navigation path showing hierarchy. Pass an array of items; the last item is the current page and is not linked. Complete Initialization first, then use the CLI or copy the source below.

Preview

Live

Add via CLI

npm exec -- my-ui add breadcrumb

Component source

<nav class="ui-breadcrumb" aria-label="Breadcrumb">
  <ol style="display:flex;align-items:center;gap:0.5rem;list-style:none;margin:0;padding:0">
    <li><a href="/" class="ui-breadcrumb__link">Home</a><span class="ui-breadcrumb__separator">/</span></li>
    <li><a href="/docs" class="ui-breadcrumb__link">Docs</a><span class="ui-breadcrumb__separator">/</span></li>
    <li><span aria-current="page">Button</span></li>
  </ol>
</nav>