breadcrumbs

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

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

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

breadcrumbs:
  - text: Finstral Handbooks
    url: url1
  - text: Contacts
    url: url2
  - text: Chapter 1 title
$variants:
  - $name: Long
    $opts:
      breadcrumbs: overwrite
    breadcrumbs:
      - text: Finstral Handbooks
        url: url1
      - text: Contacts
        url: url2
      - text: Chapter 1 title
        url: url3
      - text: Subcategory
        url: url4
      - text: Subcategory
        url: url5
      - text: Subcategory
        url: url6
      - text: Subcategory
        url: url7
      - text: Subcategory
        url: url8
      - text: Subcategory
        url: url9
      - text: Subcategory
        url: url10
      - text: Subcategory
        url: url11
      - text: Product

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