PDJ Brandbox

footer-breadcrumbs 

<nav class="footerBreadcrumb">
    <ul class="footerBreadcrumb__list">
        <li class="footerBreadcrumb__item">
            <a href="#" class="footerBreadcrumb__link">Breadcrumb</a>
        </li>
        <li class="footerBreadcrumb__item">
            You are here
        </li>
    </ul>
</nav>
 
<nav class="footerBreadcrumb">
  <ul class="footerBreadcrumb__list">
    {{#each breadcrumbs }}
      <li class="footerBreadcrumb__item">
        {{#if url }}
          <a href="{{ url }}" class="footerBreadcrumb__link">{{ label }}</a>
        {{else}}
          {{ label }}
        {{/if}}
      </li>
    {{/each}}
  </ul>
</nav>
 
breadcrumbs:
  - url: '#'
    label: Breadcrumb
  - label: You are here
  • Content: 
    .footerBreadcrumb {
  padding-left: 16px;
  overflow: hidden;

  .theme-2020 & {
    background-color: var(--color--neutrals-9);
  }
}

.footerBreadcrumb__list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footerBreadcrumb__item {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  margin-right: 48px;
  color: #C1C1C1;
  font-size: 14px;
  font-weight: 500;
}

.footerBreadcrumb__item:last-child {
  margin-right: 0;
  color: #FFF;
}

.footerBreadcrumb__item:last-child:before,
.footerBreadcrumb__item:last-child:after {
  display: none;
}

.footerBreadcrumb__item:before,
.footerBreadcrumb__item:after {
  position: absolute;
  top: 0;
  left: 100%;
  display: block;
  width: 6px;
  height: 100%;
  margin-left: 28px;
  background-color: #3B3B53;
  content: '';

  .theme-2020 & {
    background-color: var(--color--neutrals-7);
  }
}

.footerBreadcrumb__item:before {
  transform: rotate(-30deg) translateY(-50%);
  transform-origin: 0 50%;
  top: 3px;
}

.footerBreadcrumb__item:after {
  transform: rotate(30deg) translateY(50%);
  transform-origin: 0 50%;
  top: -3px;
}

.footerBreadcrumb__link {
  transition: color 300ms;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    color: #FFF;
    text-decoration: underline !important;
  }
}
  • URL: /components/raw/footer-breadcrumbs/footer-breadcrumbs.scss
  • Filesystem Path: ../src/03_molecules/footer-breadcrumbs/footer-breadcrumbs.scss
  • Size: 1.4 KB

No notes defined.