Breadcrumb 

<nav role="navigation" aria-label="breadcrumbs" class="breadcrumb">
    <a href="#" tooltiptext="Home"><span>Home</span></a>
    <span aria-hidden="true"> - </span>
    <a href="#" tooltiptext="This is a long breadcrumb title that should cause ellipsis to appear"><span>This is a long breadcrumb title that should cause ellipsis to appear</span></a>
    <span aria-hidden="true"> - </span>
    <a href="#" tooltiptext="Level 2"><span>Level 2</span></a>
    <span aria-hidden="true"> - </span>
    <a href="#" tooltiptext="SUB PAGE NAVIGATION"><span>SUB PAGE NAVIGATION</span></a>
    <span aria-hidden="true"> - </span>
    <a class="breadcrumb__current" href="#">Current Page</a>
</nav>
  • Content: 
    /* @breadcrumb */
.breadcrumb {
  font-weight: 600;
  font-family: "Biryani", sans-serif;
  font-size: $smaller-font;
  text-transform: uppercase;
  letter-spacing: 3.4px;
  color: #eb0047;
  order: 1;
  margin-bottom: $base-spacing;
  width: 100%;

  @include themify($themes) {
    color: themed('subtitleColor');
  }

  &__current {
    display: none !important;
  }

  a {
    color: #eb0047;
    display: inline-flex;
    font-weight: 600 !important;

    @include themify($themes) {
      color: themed('subtitleColor');
    }

    span {
      max-width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
    }
  }

  .hero--dark-background &, 
  .hero--dark-gradient.hero--has-image & {
    color: #81cfe3; 

    @include themify($themes) {
      color: themed('subtitleColorOnDark');
    }

    a {
      color: #81cfe3;   
      @include themify($themes) {
        color: themed('subtitleColorOnDark');
      }    
    }
  }
}

[aria-label="breadcrumbs"] [aria-hidden="true"] {
  color: #eb0047;
  margin: 0 $small-spacing;

  &:last-of-type {
    display: none;
  }
  // color: $soft-blue;
  // font-weight: $font-superbold;
}
  • URL: /components/raw/breadcrumb/_breadcrumb.scss
  • Filesystem Path: src/components/typography/links/breadcrumb/_breadcrumb.scss
  • Size: 1.2 KB