<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
    }
  ]
}
  • Content:
    @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;
    		}
    	}
    }
    
  • URL: /components/raw/breadcrumb/_breadcrumb.scss
  • Filesystem Path: src/molecules/breadcrumb/_breadcrumb.scss
  • Size: 2.1 KB

No notes defined.