breadcrumbs

The Breadcrumb component is used for displaying a navigation path in a hierarchical structure.

table of content

component variations

default

Open on blank page
  1. News and Stories
  2. Internet of Things
  3. Page Name
<ol class="m-breadcrumbs">
  <li>
    <div class="a-link -icon">
      <a href="/" target="_self">
        <span>News and</span>
        <span>
          Stories
          <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
        </span>
      </a>
    </div>
  </li>
  <li>
    <div class="a-link -icon">
      <a href="/" target="_self">
        <span>Internet of</span>
        <span>
          Things
          <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
        </span>
      </a>
    </div>
  </li>
  <li aria-current="page">
    <div class="a-link -icon">
      <a href="/" target="_self">
        <span>Page</span>
        <span>
          Name
          <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
        </span>
      </a>
    </div>
  </li>
</ol>

additional content

styles SCSS

.m-breadcrumbs {
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;

  /*  reset list items to make the usable for our case */
  > li {
    /* stylelint-disable-next-line a11y/content-property-no-static-value */
    &::before {
      content: none;
    }

    @include size-s;

    padding: 0 0.5rem 0 0;
    margin: 0;
  }

  .a-link,
  .a-link:visited {
    a:not(:hover, :active, :focus) {
      /* stylelint-disable-next-line custom-property-pattern */
      color: var(--integrated__enabled__front__default);

      &::after {
        border-color: currentcolor;
      }
    }

    a:focus-visible {
      color: var(--integrated__enabled__front__default);
    }
  }

  /* Overrides the margin left to have equal distance from both sides */
  /* stylelint-disable-next-line selector-max-compound-selectors */
  a span .a-icon,
  .a-link span .a-icon {
    margin-left: 0.5rem;
  }

  /* remove the arrow from the last link */
  /* stylelint-disable-next-line a11y/no-display-none */
  li:last-child .a-icon {
    display: none;
  }
}