breadcrumb — navigation trail
Pure SCSS, no JS. Renders an ordered list with aria-label="Breadcrumb" and aria-current="page" on the last item. Optional home icon on the left replaces the textual Úvod label.
Use on every internal page deeper than the homepage — it's a low-cost way to give users orientation and a one-click escape upward.
Install
npx czg-ui add breadcrumb@import 'components/breadcrumb'; to app.scss. No JS.
Requires base.
Parameters
| Param | Type | Default | Notes | |
|---|---|---|---|---|
items | array | [] | [['label' => '…', 'href' => '/path'], …]; last item without href = current | |
homeIcon | bool | false | First item as a home icon instead of text | |
homeHref | string | '/' | Home link target | |
homeLabel | string | 'Úvod' | aria-label for the icon | |
class | string\ | null | — | Extra class on the wrapper |
Usage
{include /app/components/Navigation/breadcrumb.latte, items => [
['label' => 'Úvod', 'href' => '/'],
['label' => 'Eshop', 'href' => '/eshop'],
['label' => 'Krmiva', 'href' => '/eshop/krmiva'],
['label' => 'Granule pro psy'], // current page — no href
]}With home icon:
{include /app/components/Navigation/breadcrumb.latte,
homeIcon => true,
items => [
['label' => 'Blog', 'href' => '/blog'],
['label' => 'Jak vybrat boudičku'],
]
}When NOT to use
- Single-page sites / 2-level apps — no value, just clutter
- Inside modal/drawer flows — use the modal title instead