VGR Styleguide

Breadcrumbs 

<div class="vgr-breadcrumbs">
    <div class="vgr-container">
        <p id="breadcrumblabel" class="vgr-breadcrumbs__description vgr-visually-hidden">Du är här:</p>
        <ol class="vgr-breadcrumbs__list" aria-labelledby="breadcrumblabel" itemscope="" itemtype="http://schema.org/BreadcrumbList">

            <li class="vgr-breadcrumbs__list-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a href="/" itemprop="item">Startsida</a>
                <meta itemprop="position" content="1">
            </li>

            <li class="vgr-breadcrumbs__list-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a href="/" itemprop="item">Om oss</a>
                <meta itemprop="position" content="2">
            </li>

            <li class="vgr-breadcrumbs__list-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a href="/" itemprop="item">Organisation</a>
                <meta itemprop="position" content="3">
            </li>

            <li class="vgr-breadcrumbs__list-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a href="/" itemprop="item">Koncernkontoret</a>
                <meta itemprop="position" content="4">
            </li>

            <li class="vgr-breadcrumbs__list-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a href="/" itemprop="item">Ekonomi</a>
                <meta itemprop="position" content="5">
            </li>

            <li class="vgr-breadcrumbs__list-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <span itemprop="item">Budget</span>
                <meta itemprop="position" content="6">
            </li>

        </ol>
    </div>
</div>
 
<div class="vgr-breadcrumbs">
  <div class="vgr-container">
    <p id="{{ id }}" class="vgr-breadcrumbs__description vgr-visually-hidden">{{ label }}</p>
    <ol class="vgr-breadcrumbs__list" aria-labelledby="{{ id }}" itemscope="" itemtype="http://schema.org/BreadcrumbList">
    {% for item in items %}

      {% if loop.last %}
        <li class="vgr-breadcrumbs__list-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
          <span itemprop="item">{{ item.text }}</span>
          <meta itemprop="position" content="{{loop.index}}">
        </li>
      {% else %}
        <li class="vgr-breadcrumbs__list-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
          <a href="{{ item.url }}" itemprop="item">{{ item.text }}</a>
          <meta itemprop="position" content="{{loop.index}}">
        </li>
      {% endif %}

    {% endfor %}
    </ol>
  </div>
</div>
 
{
  "label": "Du är här:",
  "id": "breadcrumblabel",
  "items": [
    {
      "text": "Startsida",
      "url": "/"
    },
    {
      "text": "Om oss",
      "url": "/"
    },
    {
      "text": "Organisation",
      "url": "/"
    },
    {
      "text": "Koncernkontoret",
      "url": "/"
    },
    {
      "text": "Ekonomi",
      "url": "/"
    },
    {
      "text": "Budget"
    }
  ]
}
  • Content: 
    .vgr-breadcrumbs {

  $breadcrumbs-text-color: $text-color;

  padding-top: .5rem;
  padding-bottom: .5rem;
  color: $breadcrumbs-text-color;
  font-size: $small-font-size;

  &__description {
    display: inline;
  }

  &__list {
    display: inline;
    padding: 0;
  }

  &__list-item {
    display: inline;

    &:not(:last-child)::after {
      color: $breadcrumbs-text-color;
      content: " /";
    }
  }

  @media print {
    display: none;
  }
}
  • URL: /components/raw/breadcrumbs/_breadcrumbs.scss
  • Filesystem Path: components/navigation/breadcrumbs/_breadcrumbs.scss
  • Size: 456 Bytes

There are no notes for this item.