breadcrumb — Drobečková navigace s home ikonou a aria-current. Bez JS.

app/components/Navigation/breadcrumb.latte 
{*
	Breadcrumb — navigační drobečková mapa.

	Parametry:
	- $items     (array)         pole [['label' => 'Eshop', 'href' => '/eshop'], ['label' => 'Aktuální', 'href' => null], ...]
	                              Poslední item bez href je označen jako --active.
	- $homeIcon  (bool)          první item zobrazit jako home ikonu místo textu (default false)
	- $homeHref  (string)        URL home linku (default '/')
	- $homeLabel (string)        aria-label pro home (default 'Úvod')
	- $class     (string|null)   extra třída
*}
{var $items = $items ?? []}
{var $homeIcon = $homeIcon ?? false}
{var $homeHref = $homeHref ?? '/'}
{var $homeLabel = $homeLabel ?? 'Úvod'}
{var $class = $class ?? null}

<nav aria-label="Breadcrumb" class="breadcrumb-wrap{if $class} {$class}{/if}">
	<ol class="breadcrumb">

		{if $homeIcon}
			<li class="breadcrumb__item">
				<a href="{$homeHref}" class="breadcrumb__link breadcrumb__home" aria-label="{$homeLabel}">
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
						<path d="M3 12 12 3l9 9"/>
						<path d="M5 10v10h14V10"/>
					</svg>
				</a>
			</li>
		{/if}

		{foreach $items as $item}
			{var $isLast = $iterator->isLast()}
			{var $hasLink = !empty($item['href']) && !$isLast}

			<li class="breadcrumb__item{if $isLast} breadcrumb__item--active{/if}"
			    {if $isLast}aria-current="page"{/if}>
				{if $hasLink}
					<a href="{$item['href']}" class="breadcrumb__link">{$item['label']}</a>
				{else}
					<span>{$item['label']}</span>
				{/if}
			</li>
		{/foreach}

	</ol>
</nav>
resources/sass/components/_breadcrumb.scss 
// ─── Configurable variables (override before @import) ──────────────────
$cgui-breadcrumb-font-size:        21px !default;
$cgui-breadcrumb-color:            $cgui-color-text-gray !default;
$cgui-breadcrumb-color-active:     $cgui-color-text !default;
$cgui-breadcrumb-link-color:       $cgui-color-text-gray !default;
$cgui-breadcrumb-link-color-hover: $cgui-color-primary !default;
$cgui-breadcrumb-separator-color:  $cgui-color-border !default;
$cgui-breadcrumb-gap:              10px !default;
$cgui-breadcrumb-padding:          16px 0 !default;
$cgui-breadcrumb-separator-content: '/' !default;
// ───────────────────────────────────────────────────────────────────────

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: $cgui-breadcrumb-gap;
	padding: $cgui-breadcrumb-padding;
	margin: 0;
	list-style: none;
	font-size: $cgui-breadcrumb-font-size;
	color: $cgui-breadcrumb-color;

	&__item {
		display: inline-flex;
		align-items: center;
		gap: $cgui-breadcrumb-gap;

		&:not(:last-child)::after {
			content: $cgui-breadcrumb-separator-content;
			color: $cgui-breadcrumb-separator-color;
			margin: 0;
		}

		&--active {
			color: $cgui-breadcrumb-color-active;
			font-weight: 500;
		}
	}

	&__link {
		color: $cgui-breadcrumb-link-color;
		text-decoration: none;
		transition: color 0.15s;

		&:hover,
		&:focus {
			color: $cgui-breadcrumb-link-color-hover;
			text-decoration: underline;
		}
	}

	&__home {
		display: inline-flex;
		align-items: center;

		svg {
			width: 22px;
			height: 22px;
		}
	}
}