<ul class="breadcrumb u-page-width-max-gutters">
    <li class="breadcrumb__item">
        <a class="breadcrumb__link" href="#">Maui Jim</a>
    </li>
    <li class="breadcrumb__item">
        <a class="breadcrumb__link" href="#">Sunglasses</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--current">
        Classic
    </li>
</ul>
<ul class="breadcrumb u-page-width-max-gutters">
  {{#each items}}
  <li class="breadcrumb__item{{#if this.current}} breadcrumb__item--current{{/if}}">
    {{#if this.path}}
    <a class="breadcrumb__link" href="{{this.path}}">{{this.label}}</a>
    {{else}}
    {{this.label}}
    {{/if}}
  </li>
  {{/each}}
</ul>
{
  "items": [
    {
      "label": "Maui Jim",
      "path": "#"
    },
    {
      "label": "Sunglasses",
      "path": "#"
    },
    {
      "label": "Classic",
      "current": true
    }
  ]
}
  • Content:
    .breadcrumb {
      @include reset-list;
      @include text-label($color-medium-dark);
      padding: 0 $gutter-width-half;
      line-height: 5.0rem;
      -webkit-font-smoothing: antialiased;
    
      .main & {
        @include breakpoint($breakpoint-sm-only) {
          display: none;
        }
      }
    
      @media print {
        display: none;
      }
    }
    
    .breadcrumb__item {
      display: inline-block;
    
      &:not(:last-child):after {
        content: '/';
      }
    }
    
    .breadcrumb__link {
      color: $color-medium-dark;
      font-weight: $font-weight-bold;
      text-decoration: none;
    
      &:hover {
        text-decoration: underline;
      }
    }
    
  • URL: /components/raw/breadcrumb/breadcrumb.scss
  • Filesystem Path: src/components/02-components/breadcrumb/breadcrumb.scss
  • Size: 569 Bytes

There are no notes for this item.