<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.