Partystreusel

Breadcrumb 

<ol aria-label="You are here:" vocab="http://schema.org/" typeof="BreadcrumbList" class="breadcrumb">
    <li property="itemListElement" typeof="ListItem" class="breadcrumb__item ">
        <a href="#" property="item" typeof="WebPage">
            <span property="name">Stufe 1</span>
        </a>
        <meta property="position" content="1" />
    </li>
    <li property="itemListElement" typeof="ListItem" class="breadcrumb__item ">
        <a href="#" property="item" typeof="WebPage">
            <span property="name">Stufe 2</span>
        </a>
        <meta property="position" content="2" />
    </li>
    <li property="itemListElement" typeof="ListItem" class="breadcrumb__item ">
        <a href="#" property="item" typeof="WebPage">
            <span property="name">Stufe 3</span>
        </a>
        <meta property="position" content="3" />
    </li>
    <li property="itemListElement" typeof="ListItem" class="breadcrumb__item breadcrumb__item--active">
        <a href="#" property="item" typeof="WebPage">
            <span property="name">Stufe 4</span>
        </a>
        <meta property="position" content="4" />
    </li>
</ol>
 
<ol aria-label="You are here:" vocab="http://schema.org/" typeof="BreadcrumbList" class="breadcrumb">
  {{#each items}}
    <li property="itemListElement" typeof="ListItem" class="breadcrumb__item {{modifier}}">
      <a href="#" property="item" typeof="WebPage">
        <span property="name">Stufe {{title}}</span>
      </a>
      <meta property="position" content="{{title}}"/>
    </li>
  {{/each}}
</ol>
 
{
  "items": [
    {
      "title": 1
    },
    {
      "title": 2
    },
    {
      "title": 3
    },
    {
      "title": 4,
      "modifier": "breadcrumb__item--active"
    }
  ]
}
  • Content: 
    .breadcrumb {
  @include clearfix;
  display: block;
  list-style: none;
  padding: 0;
  margin: 0 0 rem(12);
}

.breadcrumb__item {
  display: inline-block;
  padding: rem(8) 0;

  a {
    display: inline-block;
    color: $color__accent--dark;

    &:hover {
      color: $color__dark;
    }
  }

  &::after {
    content: '|';
    margin: 0 rem(12);
    color: $color__accent--dark;
  }

  &:last-child {
    &::after {
      content: '';
      display: none;
    }

    a {
      color: $color__brand--one;
    }
  }
}

// STATES
.breadcrumb__item--active {
  color: $color__brand--one;
}

// LARGE
// ----------------------------------------
@include mq(large) {
  .breadcrumb {
    margin-bottom: rem(24);
  }
}
  • URL: /components/raw/breadcrumb/_breadcrumb.scss
  • Filesystem Path: patterns/02-molecules/breadcrumb/_breadcrumb.scss
  • Size: 718 Bytes

There are no notes for this item.