<nav aria-label="Breadcrumb">
<ol class="m-breadcrumb">
<li class="m-breadcrumb__item">
<a href="/" class="m-breadcrumb__link">
Hem
</a>
<svg class="icon">
<use xlink:href="#icon-arrow-forwards"></use>
</svg>
</li>
<li class="m-breadcrumb__item">
<a href="/" class="m-breadcrumb__link">
Om oss
</a>
<svg class="icon">
<use xlink:href="#icon-arrow-forwards"></use>
</svg>
</li>
<li class="m-breadcrumb__item">
<a href="/" class="m-breadcrumb__link">
Organisation
</a>
<svg class="icon">
<use xlink:href="#icon-arrow-forwards"></use>
</svg>
</li>
<li class="m-breadcrumb__item">
<a href="/" class="m-breadcrumb__link" aria-current="page">
Urkund och stadgar
</a>
<svg class="icon">
<use xlink:href="#icon-arrow-forwards"></use>
</svg>
</li>
</ol>
</nav>
<nav aria-label="Breadcrumb">
<ol class="m-breadcrumb">
{{#each breadcrumb_item}}
<li class="m-breadcrumb__item">
<a href="{{url}}" class="m-breadcrumb__link" {{#if is_current}}aria-current="page"{{/if}}>
{{title}}
</a>
{{> @icon id="arrow-forwards"}}
</li>
{{/each}}
</ol>
</nav>
{
"breadcrumb_item": [
{
"title": "Hem",
"url": "/",
"is_current": false
},
{
"title": "Om oss",
"url": "/",
"is_current": false
},
{
"title": "Organisation",
"url": "/",
"is_current": false
},
{
"title": "Urkund och stadgar",
"url": "/",
"is_current": true
}
]
}
@charset 'UTF-8';
@use "sass:math";
@include molecule(breadcrumb) {
display: flex;
position: relative;
align-items: center;
width: 100%;
margin: 0;
padding: rhythm(1) 0;
list-style: none;
&::before {
content: '';
display: flex;
width: math.div($icon-size, 2);
height: math.div($icon-size, 2);
margin-right: rhythm(1);
transform: translateY(rem(1px));
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-backwards' viewBox='0 0 18.1 32'%3E%3Cpolygon points='16,32 0,16 16,0 18.9,2.9 5.9,16 18.9,29.1 '%3E%3C/polygon%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
@include bp-up(md) {
display: none;
}
}
@include e(item) {
display: none;
align-items: center;
align-self: stretch;
&:nth-last-child(2) {
display: flex;
@include b(icon) {
display: none;
@include bp-up(md) {
display: flex;
}
}
}
&:last-child {
@include b(icon) {
display: none;
}
}
@include bp-up(md) {
display: flex;
position: static;
flex-shrink: 0;
width: auto;
max-width: rem(250px);
min-height: 0;
overflow: hidden;
text-overflow: ellipsis;
}
@include bp-up(sm) {
max-width: rem(300px);
}
@include bp-up(lg) {
max-width: rem(350px);
}
@include bp-up(xl) {
max-width: rem(400px);
}
}
@include b(icon) {
width: math.div($icon-size, 2);
height: math.div($icon-size, 2);
margin: 0 rhythm(1);
transform: translateY(rem(1px));
&:first-child {
margin: 0 rhythm(1) 0 0;
@include bp-up(md) {
display: none;
}
}
}
@include e(link) {
@extend %normalize-links;
max-width: rhythm(30);
overflow: hidden;
color: $color-cyberspace;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
&[aria-current] {
color: $color-granit;
pointer-events: none;
&::before {
font-weight: 400;
}
}
&:hover,
&:focus {
text-decoration: underline;
}
@include bp-up(md) {
max-width: rhythm(25);
}
@include bp-up(xl) {
max-width: none;
}
}
}
No notes defined.