FTSE Russell Styleguide

Breadcrumbs 

<ol class="breadcrumb" aria-label="You are here:">
    <li><a href="javascript:void(0)" contenteditable="true">home</a></li>
    <li><a href="javascript:void(0)" contenteditable="true">about us</a></li>
    <li aria-current="page" contenteditable="true">our story</li>
</ol>
 
{% if guide %}
<div class="ig-row">
  <div class="eight ig-columns offset-by-two">
{% endif %}
    <ol class="breadcrumb" aria-label="You are here:">
      <li><a href="javascript:void(0)" contenteditable="true">{{ list_item_one }}</a></li>
      <li><a href="javascript:void(0)" contenteditable="true">{{ list_item_two }}</a></li>
      <li aria-current="page" contenteditable="true">{{ list_item_three }}</li>
    </ol>
{% if guide %}
  </div><!-- ig-columns -->
</div><!-- ig-row -->
{% endif %}
 
{
  "list_item_one": "home",
  "list_item_two": "about us",
  "list_item_three": "our story"
}
  • Content: 
    .breadcrumb {
  color: $gray;
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0;
  padding: $space-sm 0 $space-sm $space-md;
  background-color: $link-decoration;

  @include mq-only($breakpoint-mob) {
    display: none;
  }

  &::before {
    content: none;
  }

  &:last-child {
    color: $gray;
  }
  
  a {
    color: $primary-lighter;
    cursor: pointer;
  }
}

.breadcrumb li {
  margin-left: 0;
  font-family: $font-family-secondary;
  font-size: $font-size-xxs;
  letter-spacing: .2em;
  text-transform: uppercase;

  @include mq($breakpoint-lg) {
    font-size: $font-size-sm;
  }
}

.breadcrumb li:before {
  margin-right: 0;
  padding: 0 $space-sm;
  content: "/";
}

.breadcrumb li:first-child:before {
  padding: 0;
  content: "";
  display: none;
}

.page__index {
  .breadcrumb {
    padding-left: $space-md;
  }
}
  • URL: /components/raw/breadcrumbs/_breadcrumbs.scss
  • Filesystem Path: src/components/molecules/breadcrumbs/_breadcrumbs.scss
  • Size: 874 Bytes

There are no notes for this item.