<div class="breadcrumb" aria-label="Aktuelle Position">
<div class="breadcrumb__inner">
<ol class="breadcrumb__list" itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">
<li class="breadcrumb__list-item"><a class="breadcrumb__item breadcrumb__item" href="#"><svg class="icon icon--home" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-home"></use>
</svg></a></li>
<li class="breadcrumb__list-item breadcrumb__list-item--hidden" itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a class="breadcrumb__item" href="#" itemtype="http://schema.org/Thing" itemprop="item" itemscope="itemscope"><span class="breadcrumb__label" itemprop="name">Startseite</span></a>
<meta itemprop="position" content="1" />
</li>
<li class="breadcrumb__list-item" itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a class="breadcrumb__item" href="#" itemtype="http://schema.org/Thing" itemprop="item" itemscope="itemscope"><span class="breadcrumb__label" itemprop="name">Ebene 2</span></a>
<meta itemprop="position" content="2" />
</li>
<li class="breadcrumb__list-item" itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a class="breadcrumb__item" aria-current="page" href="#" itemtype="http://schema.org/Thing" itemprop="item" itemscope="itemscope"><span class="breadcrumb__label" itemprop="name">Ich bin der Seitentitel</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>
<div class="breadcrumb__share">
<div class="share">
<div class="share__inner">
<div class="share__buttons"><button class="share__button" data-share-action="twitter" type="button"><svg class="icon icon--twitter" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-twitter"></use>
</svg></button><button class="share__button" data-share-action="linkedin" type="button"><svg class="icon icon--linkedin" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-linkedin"></use>
</svg></button></div>
</div>
</div>
</div>
</div>
</div>
//- Render breadcrumb
#{tag || 'div'}.breadcrumb(aria-label='Aktuelle Position')&attributes(attr)
.breadcrumb__inner
if items
ol.breadcrumb__list(itemscope, itemtype='http://schema.org/BreadcrumbList')
li.breadcrumb__list-item
a.breadcrumb__item.breadcrumb__item(href='#')
+include('@icon', { icon: 'home' })
each item, index in items
li.breadcrumb__list-item(
class=item.hidden && 'breadcrumb__list-item--hidden',
itemprop='itemListElement',
itemscope,
itemtype='http://schema.org/ListItem'
)
#{item.link && 'a' || 'span'}.breadcrumb__item(
aria-current=index+1 === items.length ? 'page' : null,
href=item.link,
itemtype='http://schema.org/Thing',
itemprop='item',
itemscope='itemscope'
)
span.breadcrumb__label(
itemprop='name'
) #{item.label}
//- Meta position
meta(itemprop='position', content=index+1)
if share
.breadcrumb__share
+include('@share', share)
{
"items": [
{
"label": "Startseite",
"link": "#",
"hidden": true
},
{
"label": "Ebene 2",
"link": "#"
},
{
"label": "Ich bin der Seitentitel",
"link": "#"
}
],
"share": true
}
.breadcrumb {
display: none;
@include mq($from: m) {
display: block;
padding: 2rem 3rem 10rem;
}
@include mq($from: xl) {
padding: 2rem 9rem 10rem;
}
}
.header--small + .content {
padding-top: 15rem;
@include mq($from: m) {
padding-top: 9.2rem;
}
@include mq($from: xl) {
padding-top: 16rem;
}
}
.header--small + .content .breadcrumb {
margin-top: 0;
}
.breadcrumb__inner {
font-size: 1.5rem;
line-height: calc(2 / 1.5);
position: relative;
}
.breadcrumb__list {
@include list-reset();
display: flex;
position: relative;
}
.breadcrumb__list-item {
color: $color-blue;
display: inline-block;
&:first-child {
position: relative;
top: 0.2rem;
}
}
.breadcrumb__item {
align-items: center;
color: $color-blue;
display: flex;
max-width: 16rem;
&::after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs/><path fill="' + $color-gray + '" d="M50.85 26.61L72.48 5l75.28 75.34 1.39 37.93L72.48 195l-21.63-21.61 67.24-67.31-.45-12.62z"/></svg>');
content: '';
display: inline-block;
height: 1rem;
margin: 0 1rem;
position: relative;
width: 1rem;
}
.icon {
position: relative;
top: -0.1rem;
}
&[aria-current='page'] {
color: $color-gray;
}
&[aria-current='page']::after {
display: none;
}
.breadcrumb__list-item--hidden & {
@include hidden-visually();
}
.breadcrumb__list-item--hidden &:focus {
@include undo-hidden-visually();
}
}
.breadcrumb__label {
box-shadow: inset 0 -1px transparent;
display: block;
overflow: hidden;
text-overflow: ellipsis;
transition-property: box-shadow;
white-space: nowrap;
@media(hover: hover) and (pointer: fine) {
.breadcrumb__item:any-link:hover & {
box-shadow: inset 0 -1px $color-dark;
}
}
.breadcrumb__item:any-link:focus & {
box-shadow: inset 0 -1px $color-dark;
}
@media(hover: hover) and (pointer: fine) {
.breadcrumb__item[aria-current='page']:any-link:hover & {
box-shadow: inset 0 -1px currentColor;
}
}
.breadcrumb__item[aria-current='page']:any-link:focus & {
box-shadow: inset 0 -1px currentColor;
}
}
.breadcrumb__share {
position: absolute;
right: 0;
top: -2rem;
}
There are no notes for this item.