Front W - Pattern Library

Breadcrumb 

<nav class="breadcrumb" aria-label="Brotkrumen-Navigation">
    <em class="visually-hidden">Sie befinden sich hier:</em>
    <ol class="breadcrumb__list" itemscope itemtype="https://schema.org/BreadcrumbList">
        <li class="breadcrumb__item breadcrumb__item--root" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a href="#" class="breadcrumb__link" itemprop="item">
                <span itemprop="name">Wirtschaftswissenschaften</span>
            </a>
            <meta itemprop="position" content="1" />
        </li>
        <li class="breadcrumb__item breadcrumb__item--ancestor" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a href="#" NaN class="breadcrumb__link" itemprop="item">
                <span itemprop="name">Studium</span>
            </a>
            <meta itemprop="position" content="2" />
        </li>
        <li class="breadcrumb__item breadcrumb__item--ancestor" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a href="#" NaN class="breadcrumb__link" itemprop="item">
                <span itemprop="name">Studiengänge</span>
            </a>
            <meta itemprop="position" content="3" />
        </li>
        <li class="breadcrumb__item breadcrumb__item--portal active" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
            <a href="#" NaN class="breadcrumb__link" itemprop="item">
                <span itemprop="name">International Management M.A.</span>
            </a>
            <meta itemprop="position" content="4" />
        </li>
    </ol>
</nav>
 
<nav class="breadcrumb{{ collapse ? ' breadcrumb--collapse' }}" aria-label="Brotkrumen-Navigation">
  <em class="visually-hidden">Sie befinden sich hier:</em>
  <ol class="breadcrumb__list" itemscope itemtype="https://schema.org/BreadcrumbList">
    {% for item in breadcrumbs %}
      <li class="breadcrumb__item {{ 'breadcrumb__item--' ~ item.type }}{{ item.active ? ' active' }}" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"
        {{ item.active ? 'aria-current="page"' }}>
        <a href="{{ item.url }}" {{ not loop.first ? 'itemscope itemtype="https://schema.org/WebPage" itemid="' + item.url + '"'  }} class="breadcrumb__link" itemprop="item">
          <span itemprop="name">{{ item.label }}</span>
        </a>
        <meta itemprop="position" content="{{ loop.index }}" />
      </li>
    {% endfor %}
  </ol>
</nav>
 
{
  "breadcrumbs": [
    {
      "label": "Wirtschaftswissenschaften",
      "url": "#",
      "type": "root",
      "active": false
    },
    {
      "label": "Studium",
      "url": "#",
      "type": "ancestor",
      "active": false
    },
    {
      "label": "Studiengänge",
      "url": "#",
      "type": "ancestor",
      "active": false
    },
    {
      "label": "International Management M.A.",
      "url": "#",
      "type": "portal",
      "active": true
    }
  ]
}