There are no notes for this item.

<!-- Default -->
<ul class="breadcrumb">
    <li class="breadcrumb__item breadcrumb__item--hierarchical">
        <a href="#" class="link">Thing1</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--hierarchical breadcrumb__item--default">
        <a href="#" class="link">Thing2</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--hierarchical">
        <a href="#" class="link">Thing3</a>
    </li>
</ul>

<!-- Selected -->
<ul class="breadcrumb">
    <li class="breadcrumb__item breadcrumb__item--hierarchical">
        <a href="#" class="link">Thing1</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--hierarchical breadcrumb__item--selected">
        <a href="#" class="link">Thing2</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--hierarchical">
        <a href="#" class="link">Thing3</a>
    </li>
</ul>

  • Content:
    /*------------------------------------*\
        #BREADCRUMB HIERARCHICAL
    \*------------------------------------*/
    
    .breadcrumb {
      list-style: none;
      margin: 0;
      padding: 0;
      height: 16px;
    }
    
    .breadcrumb__item {
      display: inline-block;
      padding: 0 5px 0 11px;
      position: relative;
    }
    
    .breadcrumb__item + .breadcrumb__item:before {
      display: block;
      position: absolute;
      left: 0;
    }
    
    .breadcrumb__item--hierarchical + .breadcrumb__item--hierarchical:before {
      content: "/";
      top: 0;
    }
    
    .breadcrumb__item .link {
      text-decoration: none;
    }
    
    .breadcrumb__item--selected .link {
      color: $color-active;
    }
    
  • URL: /components/raw/breadcrumb-hierarchical/breadcrumb-hierarchical.scss
  • Filesystem Path: components/02-atoms/09-breadcrumb-hierarchical/breadcrumb-hierarchical.scss
  • Size: 608 Bytes