breadcrumbs

Information

Folder
src/components/template-components/breadcrumbs

Files

Schema
Mocks
Template
// src/components/template-components/breadcrumbs/breadcrumbs.twig

{{ attach_library("circle_dot/template-components-breadcrumbs") }}

<nav
	class="Breadcrumbs Breadcrumbs--{{ color_scheme }} {{ classes|join(' ') }}"
	aria-labelledby="breadcrumb-navigation-label"
	{{ attributes }}
>
	{# TODO: Add breadcrumb navigation label to strings file and reference here. #}
	<span id="breadcrumb-navigation-label" class="u-hiddenVisually">Breadcrumb</span>
	<ol class="Breadcrumbs-list">
		{% for item in items %}
			<li class="Breadcrumbs-item">
				{% include "@elements/breadcrumb-item/breadcrumb-item.twig" with {
					label: item.label,
					url: item.url,
					is_current: loop.last,
				} only %}

				{% if not loop.last %}
					<span class="Breadcrumbs-separator" aria-hidden="true">
						{% include "@elements/icon/icon.twig" with {
							name: "chevron",
							classes: ["Breadcrumbs-icon"],
						} only %}
					</span>
				{% endif %}
			</li>
		{% endfor %}
	</ol>
</nav>

Error: schema is invalid: data/properties must be object

Variants

default
Open

default mock data

Raw
Resolved
single-item
Open

single-item mock data

Raw
Resolved
deep-hierarchy
Open

deep-hierarchy mock data

Raw
Resolved