new ui3

assets/views/macros/ui.html

@@ -267,3 +267,27 @@ border-t border-outline dark:border-outline-dark
 {%- endif -%}
 <a href="{{ href }}"{% if data_nav %} data-nav="{{ data_nav }}"{% endif %} class="text-sm font-medium underline-offset-2 transition focus:outline-hidden focus-visible:underline {{ c }}" {{ attrs | safe }}>{{ label }}</a>
 {%- endmacro nav_link %}
+
+{# Breadcrumbs (Kompress design: chevron separators). Build a trail by emitting
+   one ui::crumb(label, href) per ancestor and a final ui::crumb_current(label)
+   for the active page, all inside <nav><ol>…</ol></nav>:
+
+     <nav aria-label="breadcrumb" class="text-sm">
+       <ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
+         {{ ui::crumb(label="Domov", href="/") }}
+         {{ ui::crumb(label="Obchod", href="/shop") }}
+         {{ ui::crumb_current(label=category.name) }}
+       </ol>
+     </nav>
+
+   Adapted from penguinui/breadcrumbs/breadcrumb-with-chevron.html. #}
+{% macro crumb(label, href) -%}
+<li class="flex items-center gap-1.5">
+  <a href="{{ href }}" class="transition hover:text-primary dark:hover:text-primary-dark">{{ label }}</a>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-3.5 shrink-0 text-on-surface/30 dark:text-on-surface-dark/30" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
+</li>
+{%- endmacro crumb %}
+
+{% macro crumb_current(label) -%}
+<li class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong" aria-current="page">{{ label }}</li>
+{%- endmacro crumb_current %}