Breadcrumb

Basic

<c-bs-breadcrumb>
  <c-bs-breadcrumb-item href="#">Home</c-bs-breadcrumb-item>
  <c-bs-breadcrumb-item c-active="True">Library</c-bs-breadcrumb-item>
</c-bs-breadcrumb>

Preview:

Single Item Active

<c-bs-breadcrumb>
  <c-bs-breadcrumb-item c-active="True">Home</c-bs-breadcrumb-item>
</c-bs-breadcrumb>

Preview:

Three Items

<c-bs-breadcrumb>
  <c-bs-breadcrumb-item href="#">Home</c-bs-breadcrumb-item>
  <c-bs-breadcrumb-item href="#">Library</c-bs-breadcrumb-item>
  <c-bs-breadcrumb-item c-active="True">Data</c-bs-breadcrumb-item>
</c-bs-breadcrumb>

Preview:

Custom Divider Greater Than

<c-bs-breadcrumb c-attrs="{'style': '--bs-breadcrumb-divider: \'>\';'}">
  <c-bs-breadcrumb-item href="#">Home</c-bs-breadcrumb-item>
  <c-bs-breadcrumb-item c-active="True">Library</c-bs-breadcrumb-item>
</c-bs-breadcrumb>

Preview:

No Divider

<c-bs-breadcrumb c-attrs="{'style': '--bs-breadcrumb-divider: \'\';'}">
  <c-bs-breadcrumb-item href="#">Home</c-bs-breadcrumb-item>
  <c-bs-breadcrumb-item c-active="True">Library</c-bs-breadcrumb-item>
</c-bs-breadcrumb>

Preview:

Custom Label

<c-bs-breadcrumb>
  <c-bs-breadcrumb-item href="#">Home</c-bs-breadcrumb-item>
  <c-bs-breadcrumb-item c-active="True">Library</c-bs-breadcrumb-item>
</c-bs-breadcrumb>

Preview:

Custom Attrs

<c-bs-breadcrumb c-attrs="{'class': 'custom-class'}">
  <c-bs-breadcrumb-item href="#">Home</c-bs-breadcrumb-item>
  <c-bs-breadcrumb-item c-active="True">Library</c-bs-breadcrumb-item>
</c-bs-breadcrumb>

Preview:

Item Custom Attrs

<c-bs-breadcrumb>
  <c-bs-breadcrumb-item href="#" c-attrs="{'data-test': 'home'}">Home</c-bs-breadcrumb-item>
  <c-bs-breadcrumb-item c-active="True" c-attrs="{'class': 'highlighted'}">Library</c-bs-breadcrumb-item>
</c-bs-breadcrumb>

Preview: