<!-- Basic example -->
<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>

<!-- Home icon -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="mt-n1 mr-1"><i data-feather="home"></i></li>
    <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>

// Basic example
nav(aria-label="breadcrumb").mb-3
  ol.breadcrumb
    li.breadcrumb-item
      a(href="#") Home
    li.breadcrumb-item
      a(href="#") Library
    li(aria-current="page").breadcrumb-item.active
      | Data

// Home icon
nav(aria-label="breadcrumb")
  ol.breadcrumb
    li.mt-n1.mr-1: i(data-feather="home")
    li.breadcrumb-item
      a(href="#") Home
    li.breadcrumb-item
      a(href="#") Library
    li(aria-current="page").breadcrumb-item.active
      | Data

<div class="page-title-wrapper" aria-label="Page title">
  <div class="container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="mt-n1 mr-1"><i data-feather="home"></i></li>
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
      </ol>
    </nav>
    <h1>Page title</h1>
    <span class="d-block mt-2 text-muted">Page subtitle text goes here</span>
    <hr class="mt-4">
  </div>
</div>

.page-title-wrapper(aria-label="Page title")
  .container
    nav(aria-label="breadcrumb")
      ol.breadcrumb
        li.mt-n1.mr-1
          i(data-feather="home")
        li.breadcrumb-item
          a(href="#") Home
        li.breadcrumb-item
          a(href="#") Library
    h1.page-title Page title
    span.d-block.mt-2.text-muted Page subtitle text goes here
    hr.mt-4