Navs

<!-- Basic nav -->
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      Active
      <sup class="ms-1">47</sup>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
      <sup class="ms-1">10</sup>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
      <sup class="ms-1">8</sup>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
      <sup class="ms-1">4</sup>
    </a>
  </li>
</ul>

<!-- Light nav -->
<ul class="nav nav-light">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      Active
      <sup class="ms-1">47</sup>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
      <sup class="ms-1">10</sup>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
      <sup class="ms-1">8</sup>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
      <sup class="ms-1">4</sup>
    </a>
  </li>
</ul>

<!-- Vertical nav -->
<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
    </a>
  </li>
</ul>

<!-- Fancy nav -->
<a class="image-fade card card-hover shadow py-3" href="#" style="background-image: url(path-to-background-image);">
  <div class="image-inner py-5 px-3">
    <div class="card-body">
      <img class="inner-img d-block mx-auto mb-4" src="path-to-image" style="max-width: 52px;" alt="Image alt">
      <h5 class="inner-text mb-0 text-center">Construction</h5>
    </div>
  </div>
</a>