Breadcrumb

// src/components/patterns/breadcrumb/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/breadcrumb
additionalProperties: false
required:
  - links
properties:
  links:
    type: array
    items:
      type: object
      properties:
        url:
          type: string
          format: uri-reference
        label:
          type: string
      required:
        - label
        - url
  tenant:
    type: string
  sub_navigation:
    $ref: /patterns/sub-navigation

// src/components/patterns/breadcrumb/mocks.yaml

links:
  - label: Startseite
    url: url
  - label: Themen
    url: url
  - label: Landwirtschaft
    url: url
  - label: Ein unmoralisches Angebot
    url: url
$variants:
  - $name: kids
    tenant: kids
    $ref: /patterns/sub-navigation

// src/components/patterns/breadcrumb/breadcrumb.html.twig

<nav aria-label="breadcrumb" class="Breadcrumb u-typo-copy-desktop-copy-small-mobile u-container{% if class %} {{ class }}{% endif %}">
  <ol class="Breadcrumb-list">
    {% for item in links %}
      <li class="Breadcrumb-item">
        {% if loop.first %}
          <a href="{{ item.url }}" class="Breadcrumb-link Tracking--breadcrumbNavigationLink">
            <span class="Breadcrumb-label">{{ item.label }}</span>
            {% include "@elements/icon/icon.html.twig" with {
              name: "home",
              class: "Breadcrumb-icon"
            } only %}
          </a>
        {% elseif loop.last %}
          <a href="{{ item.url }}" class="Breadcrumb-link Breadcrumb-link--active Tracking--breadcrumbNavigationLink" aria-current="page">{{ item.label }}</a>
        {% else %}
          <a href="{{ item.url }}" class="Breadcrumb-link Tracking--breadcrumbNavigationLink">{{ item.label }}</a>
        {% endif %}
      </li>
    {% endfor %}
  </ol>
</nav>
{# Sub navigation is integrated to breadcrumbs and not to page template because of drupal dependency reusage #}
{% if tenant and tenant == "kids" and sub_navigation %}
  {% include "@patterns/sub-navigation/sub-navigation.html.twig" with {
    sub_navigation: sub_navigation
  } only %}
{% endif %}