is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →

Bootstrap class: .breadcrumb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Preview

Check .breadcrumb in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Tips 💡

Sass source

/* _breadcrumb.scss:1 */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
  margin-bottom: $breadcrumb-margin-bottom;
  list-style: none;
  background-color: $breadcrumb-bg;
  @include border-radius($breadcrumb-border-radius);
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _breadcrumb.scss:1 */
$breadcrumb-padding-y
$breadcrumb-padding-x
$breadcrumb-margin-bottom
$breadcrumb-bg
$breadcrumb-border-radius

More in Bootstrap Breadcrumbs