University of Staffordshire Pattern Library

Breadcrumbs

No notes defined.

<nav class="breadcrumbs">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Level 1</a>
        </li>
        <li>
            <a href="#">Level 2</a>
        </li>
    </ul>
</nav>
 
<nav class="breadcrumbs">
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 2</a>
    </li>
  </ul>
</nav>
  • Content: 
    .breadcrumbs {
  display: inline-block;
  color: #000;
  margin: 0 0 $spacing-xs;
  padding: $spacing-xs $spacing-sm $spacing-xs 0;

  &.has-solid-bg {
    background: $grey-50-pc;
  }

  ul {
    margin: 0;
    padding: 0;
    @include typescale('sm');
  }

  li {
    display: inline-block;
    margin: 0 $spacing-2xs;

    &:before {
      content: '/ ';
      display: inline-block;
      margin: 0 $spacing-xs 0 0;
    }

    &:first-child {
      &:before {
        display: none;
      }
    }

    a, a:visited, a:not([class]) {
      color: $dark-blue;
      font-weight: 500;
      border-bottom: 0;
  
      &:hover {
        text-decoration: underline;
      }
    }
  }

}
  • URL: /components/raw/breadcrumbs/_breadcrumbs.scss
  • Filesystem Path: src\components\breadcrumbs\_breadcrumbs.scss
  • Size: 728 Bytes