<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="crumb"><a href="#">Home</a></li>
    <li class="crumb-sep" aria-hidden="true">/</li>
    <li class="crumb"><a href="#">Components</a></li>
    <li class="crumb-sep" aria-hidden="true">/</li>
    <li class="crumb current" aria-current="page">Breadcrumb</li>
  </ol>
</nav>

<style>
.breadcrumb {
  display: flex; align-items: center; gap: 0.375rem;
  list-style: none; padding: 0; margin: 0; flex-wrap: wrap;
}
.crumb a {
  font-size: 0.875rem; color: var(--muted);
  text-decoration: none; transition: color 0.15s;
}
.crumb a:hover { color: var(--text); }
.crumb.current { font-size: 0.875rem; color: var(--text); font-weight: 500; }
.crumb-sep { color: var(--border); font-size: 0.875rem; user-select: none; }
</style>