Internetstiftelsen Styleguide

Breadcrumb 

<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:color";
@use "sass:math";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;

@include mixin.molecule(breadcrumb) {
	display: flex;
	position: relative;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: func.rhythm(1) 0;
	list-style: none;

	&::before {
		content: '';
		display: flex;
		width: math.div(var.$icon-size, 2);
		height: math.div(var.$icon-size, 2);
		margin-right: func.rhythm(1);
		transform: translateY(func.to_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 breakpoint.bp-up(md) {
			display: none;
		}
	}

	@include bem.e(item) {
		display: none;
		align-items: center;
		align-self: stretch;

		&:nth-last-child(2) {
			display: flex;

			@include bem.b(icon) {
				display: none;

				@include breakpoint.bp-up(md) {
					display: flex;
				}
			}
		}

		&:last-child {
			@include bem.b(icon) {
				display: none;
			}
		}

		@include breakpoint.bp-up(md) {
			display: flex;
			position: static;
			flex-shrink: 0;
			width: auto;
			max-width: func.to_rem(250px);
			min-height: 0;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		@include breakpoint.bp-up(sm) {
			max-width: func.to_rem(300px);
		}

		@include breakpoint.bp-up(lg) {
			max-width: func.to_rem(350px);
		}

		@include breakpoint.bp-up(xl) {
			max-width: func.to_rem(400px);
		}
	}

	@include bem.b(icon) {
		width: math.div(var.$icon-size, 2);
		height: math.div(var.$icon-size, 2);
		margin: 0 func.rhythm(1);
		transform: translateY(func.to_rem(1px));
		color: var(--cyberspace-color);
		fill: currentColor;

		&:first-child {
			margin: 0 func.rhythm(1) 0 0;

			@include breakpoint.bp-up(md) {
				display: none;
			}
		}
	}

	@include bem.e(link) {
		@extend %normalize-links;

		max-width: func.rhythm(30);
		overflow: hidden;
		color: var(--cyberspace-color);
		text-overflow: ellipsis;
		white-space: nowrap;

		&[aria-current] {
			pointer-events: none;
			text-decoration: none;

			&::before {
				font-weight: 400;
			}
		}

		&:hover,
		&:focus {
			color: colors.$color-ruby;
		}

		@include breakpoint.bp-up(md) {
			max-width: func.rhythm(25);
		}

		@include breakpoint.bp-up(xl) {
			max-width: none;
		}
	}
}
  • URL: /components/raw/breadcrumb/_breadcrumb.scss
  • Filesystem Path: src/molecules/breadcrumb/_breadcrumb.scss
  • Size: 2.8 KB

No notes defined.