<!-- Default -->
<div class="breadcrumb ">
    <a href="/grandparent">Grandparent Item</a>
    <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
    <a href="/grandparent/parent">Parent Item</a>
    <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
    <a href="/grandparent/parent/me">Current Item</a>
</div>

<!-- Active -->
<div class="breadcrumb tab-active">
    <a href="/grandparent">Grandparent Item</a>
    <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
    <a href="/grandparent/parent">Parent Item</a>
    <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
    <a href="/grandparent/parent/me">Current Item</a>
</div>

<div class="breadcrumb {{state}}">
	<a href="/grandparent">Grandparent Item</a>
	{{ icon 'core/o-navigate-right' 8 }}
	<a href="/grandparent/parent">Parent Item</a>
	{{ icon 'core/o-navigate-right' 8 }}
	<a href="/grandparent/parent/me">Current Item</a>
</div>
/* Default: No context defined */

/* Active */
{
  "state": "tab-active"
}

  • Content:
    .breadcrumb.tab-active {
      background-color: #fff;
    }
    
    .smartbar li .breadcrumb a {
    	padding: .5rem;
    	display: none;
    }
    
    .smartbar li .breadcrumb svg {
    	display: none;
    }
    
    .breadcrumb {
    	padding: 0 .5rem;
    }
    
    .breadcrumb a {
      color: palette(type);
    }
    
    .smartbar li .breadcrumb a:last-child {
      color: #000;
      font-weight: bold;
      padding: .4rem .5rem;
      display: inline-block;
    }
    
    .smartbar li .breadcrumb.tab-active a:last-child {
      padding: .55rem .5rem;
    }
    
    @include media(">bp-m") {
    	.smartbar li .breadcrumb a {
    		display: inline-block;
    	}
    
    	.smartbar li .breadcrumb svg {
    		display: inline-block;
    	}
    
    	.smartbar li .breadcrumb.tab-active a:last-child {
    	  padding: .4rem .5rem;
    	}
    
    }
  • URL: /components/raw/smartbar-breadcrumb/smartbar-breadcrumb.scss
  • Filesystem Path: src/components/13-navigation/04-smartbar/01-atoms/01-smartbar-breadcrumb/smartbar-breadcrumb.scss
  • Size: 683 Bytes

There are no notes for this item.