breadcrumb

// src/components/template-components/breadcrumb/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/breadcrumb
additionalProperties: false
type: object
required:
  - breadcrumb
properties:
  breadcrumb:
    type: array
    items:
      type: object
      additionalProperties: false
      required:
        - text
      properties:
        text:
          type: string
        url:
          type: string
          format: uri-reference

// src/components/template-components/breadcrumb/mocks.yaml

breadcrumb:
  - text: Root page
    url: url1
  - text: Sub page
    url: url2
  - text: Sub page
$variants:
  - $name: current linked
    $opts:
      breadcrumb: overwrite
    breadcrumb:
      - text: Root page
        url: url1
      - text: Sub page
        url: url2
      - text: Sub page
        url: url3
  - $name: long
    $opts:
      breadcrumb: overwrite
    breadcrumb:
      - text: Root page
        url: url1
      - text: Sub page
        url: url2
      - text: Sub page
        url: url3
      - text: Sub page
        url: url4
      - text: Sub page
        url: url5
      - text: Sub page
        url: url6
      - text: Sub page
        url: url7
      - text: Sub page
        url: url8
      - text: Sub page
        url: url9
      - text: Sub page
        url: url10
      - text: Sub page

// src/components/template-components/breadcrumb/breadcrumb.twig

<nav
	class="Breadcrumb u-typo-TextM"
	aria-labelledby="breadcrumb-label"
>
	<span id="breadcrumb-label" hidden>{{ 'breadcrumb.label'|t }}</span>
	<ol class="Breadcrumb-list">
		{% for item in breadcrumb %}
			<li class="Breadcrumb-item">
				{% if not loop.first %}
					{% include "@elements/icon/icon.twig" with {
						classes: ["Breadcrumb-icon"],
						name: "chevron_right",
						size: "small",
					} only %}
				{% endif %}
				{% if item.url %}
					<a
						class="Breadcrumb-label u-link"
						href="{{ item.url }}"
						{% if loop.last %}aria-current="page"{% endif %}
					>
						{{ item.text }}
					</a>
				{% else %}
					<span class="Breadcrumb-label">
						{{ item.text }}
					</span>
				{% endif %}
			</li>
		{% endfor %}
	</ol>
</nav>

<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "BreadcrumbList",
	"itemListElement": [
		{% for item in breadcrumb %}
		{
			"@type": "ListItem",
			"position": {{ loop.index }},
			"item": {
				{% if item.url %}
					"@id": "{{ item.url }}"{% if item.text %},{% endif %}
				{% endif %}
				{% if item.text %}
					"name": "{{ item.text }}"
				{% endif %}
			}
		}{% if not loop.last %},{% endif %}
		{% endfor %}
	]
}
</script>