breadcrumbs

// src/components/template-components/breadcrumbs/breadcrumbs.twig

<nav class="Breadcrumbs" aria-label="{{ 'Breadcrumb'|t }}">
	<ol class="Breadcrumbs-list">
	{% for item in breadcrumbs %}
		<li class="Breadcrumbs-item">
			{% if not loop.first %}
				{% include "@elements/icon/icon.twig" with {
					classes: ["Breadcrumbs-icon"],
					name: "chevron",
				} only %}
			{% endif %}
			{% if item.url %}
				<a href="{{ item.url }}" class="Breadcrumbs-label Breadcrumbs-link u-linkHover">
					{{ item.text }}
				</a>
			{% else %}
				<span class="Breadcrumbs-label">
					{{ item.text }}
				</span>
			{% endif %}
		</li>
	{% endfor %}
	</ol>
</nav>

<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "BreadcrumbList",
	"itemListElement": [
		{% for item in breadcrumbs %}
		{
			"@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>