Breadcrumbs – Design Portal

Breadcrumbs are a secondary navigation aid that helps users easily understand the relation between their location on a page (eg. a product page) and higher level pages (eg. a category page).

Demo

<nav class="breadcrumb" aria-label="breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Link</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Link</a>
    </li>
  </ol>
</nav>

.breadcrumb {
  grid-area: breadcrumb;

  &__list {
    @extend %list-reset;
    display: flex;
  }

  &__item,
  &__link {
    color: var(--black);
  }

  &__item {
    font-size: 0.9375rem;
    font-weight: 400;
    margin-block-end: 0;
    padding-inline-end: 1.4rem;
    position: relative;
    
    &:after {
      inset-block-start: 50%;
      transform: translateY(-50%);
      background: url(#{$assetPath}/breadcrumb-chevron-icon.svg) no-repeat center / .3125rem;
      block-size: 0.6rem;
      content: "";
      inline-size: 0.35rem;
      inset-inline-end: 0.65rem;
      position: absolute;
    }

    &:first-child {
      text-indent: -62.4375rem;

      .breadcrumb__link {
        background: url(#{$assetPath}/breadcrumb-home-icon.svg) no-repeat left
          center / 0.9175rem auto;
        padding-inline-start: 1.5rem;
      }
    }

    &:nth-child(2) {
      display: none;
    }

    &:last-child {
      font-weight: 600;
      padding-inline-end: 0;

      &:after {
        display: none;
      }
    }
  }

  &__link {
    display: block;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      text-decoration: underline;
    }
  }
}

@media (min-width: $md) {
  .breadcrumb {
    &__item {
      padding-inline-end: 1.7rem;

      &:first-child {
        text-indent: 0;
      }

      &:nth-child(2) {
        display: block;
      }
    }
  }
}

No JS! 😀

Usage

Breadcrumbs are a default component for all unified single flow templates. It can be enabled/disabled via the unified themes visibility options, at the post level.

Anatomy

Breadcrumbs
Breadcrumb Home Icon/Link
Breadcrumb Link
Breadcrumb Active Link