BreadCrumb

Basic

Outset

<nav class="breadcrumb outset-neomo p-1">
  <ul>
    <li>
      <a href="#">
        <span>Neomo</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>Documentation</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>Components</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <span>Breadcrumb</span>
      </a>
    </li>
  </ul>
</nav>

Inset

<nav class="breadcrumb inset-neomo p-1">
  <ul>
    <li>
      <a href="#">
        <span>Neomo</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>Documentation</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>Components</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <span>Breadcrumb</span>
      </a>
    </li>
  </ul>
</nav>

Justify

Centered

<nav class="breadcrumb centered inset-neomo p-1" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-home fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Neomo</span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-file-alt fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Documentation</span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-database fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Components</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-bread-slice fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Breadcrumb</span>
      </a>
    </li>
  </ul>
</nav>

Right

<nav class="breadcrumb right inset-neomo p-1" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-home fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Neomo</span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-file-alt fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Documentation</span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-database fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Components</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-bread-slice fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Breadcrumb</span>
      </a>
    </li>
  </ul>
</nav>

Separator

Direction

<nav
  class="breadcrumb centered direction inset-neomo p-1"
  aria-label="breadcrumbs"
>
  <ul>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-home fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Neomo</span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-file-alt fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Documentation</span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-database fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Components</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-bread-slice fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Breadcrumb</span>
      </a>
    </li>
  </ul>
</nav>

Aroow

<nav class="breadcrumb centered arrow inset-neomo p-1" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-home fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Neomo</span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-file-alt fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Documentation</span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-database fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Components</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <div class="icon-circle--sm" style="margin-right: 10px">
          <i class="fas fa-bread-slice fa-sm" style="font-size: 0.4em"></i>
        </div>
        <span>Breadcrumb</span>
      </a>
    </li>
  </ul>
</nav>