.c-breadcrumbs

scss
.c-breadcrumbs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 8px;
  position: relative;
  
  @include element('item') {
    @include use-font('body-alt');
    color: use-color('grey', 'light');
    cursor: pointer;
    font-weight: bold;
    margin-right: 4px;
    padding-right: 8px;
    position: relative;

    &::first-letter {
      text-transform: capitalize;
    }

    &::after {
      content: '/';
      position: absolute;
      right: 0;
      top: 0;
    }

    &:last-child() {
      color: use-color('grey');

      &::after {
        content: '';
      }

      a {
        color: use-color('grey');
        // font-weight: bold;
      }
    }

    a {
      color: use-color('grey', 'light');
      font-size: inherit;
      font-weight: bold;
      text-decoration: none;
    }
  }
}

Componente desarrollado para ayudar al usuario con la navegación en las aplicaciones web.

Se puede usar tanto con o sin anchor tags.

Examples

html
<ul class="c-breadcrumbs">
  <li class="c-breadcrumbs__item">
    home
  </li>
  <li class="c-breadcrumbs__item">
    second level thing
  </li>
  <li class="c-breadcrumbs__item">
    last level
  </li>
</ul>
html example with anchor tags
<ul class="c-breadcrumbs">
  <li class="c-breadcrumbs__item">
    <a href="#">
      home
    </a>
  </li>
  <li class="c-breadcrumbs__item">
    <a href="#">
      second level thing
    </a>
  </li>
  <li class="c-breadcrumbs__item">
    <a href="#">
      last level
    </a>
  </li>
</ul>