Skip to main content

# Breadcrumb

Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.

Separators are automatically added in CSS through `::before` and `content`.

    <ol class="breadcrumb">
      <li class="breadcrumb-item active">Home</li>
    </ol>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item active">Library</li>
    </ol>
    <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">Data</li>
    </ol>

Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.

    <nav class="breadcrumb">
      <a class="breadcrumb-item" href="#">Home</a>
      <a class="breadcrumb-item" href="#">Library</a>
      <a class="breadcrumb-item" href="#">Data</a>
      <span class="breadcrumb-item active">Bootstrap</span>
    </nav>