Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Sports</a></li>
    <li class="breadcrumb-item"><a href="#">Ball games</a></li>
    <li class="breadcrumb-item active" aria-current="page">Baseball</li>
  </ol>
</nav>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Character</h4>
<nav style="--bs-breadcrumb-divider: '–';" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Sports</a></li>
    <li class="breadcrumb-item"><a href="#">Ball games</a></li>
    <li class="breadcrumb-item active" aria-current="page">Baseball</li>
  </ol>
</nav>
<h4 class="h5 text-muted mt-3">SVG</h4>
<!-- Icon from Bootstrap Icons: https://icons.getbootstrap.com/icons/chevron-right/ -->
<!-- Icon encoded here: https://yoksel.github.io/url-encoder/ -->
<!-- Add url("data:image/svg+xml, before the encoded code -->
<!-- Add "); after the encoded code -->
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Sports</a></li>
    <li class="breadcrumb-item"><a href="#">Ball games</a></li>
    <li class="breadcrumb-item active" aria-current="page">Baseball</li>
  </ol>
</nav>
<h4 class="h5 text-muted mt-3">None</h4>
<nav style="--bs-breadcrumb-divider: '';" aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Sports</a></li>
    <li class="breadcrumb-item"><a href="#">Ball games</a></li>
    <li class="breadcrumb-item active" aria-current="page">Baseball</li>
  </ol>
</nav>