Breadcrumbs

a scss mixin for breadcrumbs

View Demo

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-breadcrumb

or

yarn add elr-scss-breadcrumb

Implementation

Scss

.breadcrumbs {
  @include elr-breadcrumbs;
}

.breadcrumbs-slash {
  @include elr-breadcrumbs(
    $config: (
      separator: "/",
    )
  );
}

.breadcrumbs-arrow {
  @include elr-breadcrumbs-arrow;
}

HTML

<nav class="breadcrumb-nav">
  <ul class="breadcrumbs">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="active">
      <a href="#">About ELR Utilities</a>
    </li>
  </ul>
</nav>

<nav class="breadcrumb-nav">
  <ul class="breadcrumbs-slash">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="active">
      <a href="#">About ELR Utilities</a>
    </li>
  </ul>
</nav>

<nav class="breadcrumb-nav">
  <ul class="breadcrumbs-arrow">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="active">
      <a href="#">About ELR Utilities</a>
    </li>
  </ul>
</nav>

License

SEE LICENSE IN LICENSE.md