Breadcrumb — Vanilla

Breadcrumb with vanilla HTML. Ensure Rizzo CSS is loaded.

Breadcrumb

Navigation breadcrumbs. BEM: breadcrumb, breadcrumb__list, breadcrumb__item, breadcrumb__link. Separators: breadcrumb--slash, breadcrumb--arrow, or default chevron.

Live example

HTML

html html 
<nav class="breadcrumb breadcrumb--chevron" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="/">Home</a>
      <span class="breadcrumb__separator" aria-hidden="true">
        <svg class="breadcrumb__separator-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9l6 6 6-6" /></svg>
      </span>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="/docs">Docs</a>
      <span class="breadcrumb__separator" aria-hidden="true">
        <svg class="breadcrumb__separator-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9l6 6 6-6" /></svg>
      </span>
    </li>
    <li class="breadcrumb__item breadcrumb__item--current">
      <span class="breadcrumb__current" aria-current="page">Current</span>
    </li>
  </ol>
</nav>

Astro / Svelte: Astro · Svelte