new ui3

assets/views/home/index.html

@@ -9,6 +9,12 @@
    area is split into a featured product grid + a right rail (bestsellers /
    our stores / contact). All colors use the design tokens so light + dark
    both work; the brand accent is the medical blue set in app.css. #}
+<nav aria-label="breadcrumb" class="mb-5 text-sm">
+  <ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
+    {{ ui::crumb_current(label=t(key="nav-home", lang=lang | default(value='sk'))) }}
+  </ol>
+</nav>
+
 <div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_19rem]">
 
   <!-- center column -->

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 %}

assets/views/shop/_sidebar.html

@@ -60,3 +60,21 @@
 {% if category_groups | length == 0 %}
 <p class="px-2 py-2 text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="shop-empty", lang=lang | default(value='sk')) }}</p>
 {% endif %}
+
+{# "Informácie" card (Kompress design): static info links below the category
+   tree, separated by a divider. Targets are placeholders (#) until real pages
+   exist; labels reuse the footer-* i18n keys. #}
+<div class="mt-4 border-t border-outline pt-3 dark:border-outline-dark">
+  <p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">
+    {{ t(key="footer-info", lang=lang | default(value='sk')) }}
+  </p>
+  {% set L = lang | default(value='sk') %}
+  <div class="flex flex-col gap-0.5">
+    {% for key in ["footer-terms", "footer-about", "footer-stores", "footer-shipping"] %}
+    <a href="#"
+      class="flex items-center gap-2 truncate rounded-radius px-2 py-1.5 text-sm text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong">
+      {{ t(key=key, lang=L) }}
+    </a>
+    {% endfor %}
+  </div>
+</div>

assets/views/shop/category.html

@@ -7,14 +7,15 @@
 {% set L = lang | default(value='sk') %}
 <div class="space-y-6">
   <header class="space-y-2">
-    <nav class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">
-      <a href="/shop" class="hover:text-primary dark:hover:text-primary-dark">{{ t(key="nav-shop", lang=L) }}</a>
-      {% for crumb in breadcrumbs %}
-      <span class="px-1">/</span>
-      <a href="/category/{{ crumb.slug }}" class="hover:text-primary dark:hover:text-primary-dark">{{ crumb.name }}</a>
-      {% endfor %}
-      <span class="px-1">/</span>
-      <span>{{ category.name }}</span>
+    <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=t(key="nav-home", lang=L), href="/") }}
+        {{ ui::crumb(label=t(key="nav-shop", lang=L), href="/shop") }}
+        {% for crumb in breadcrumbs %}
+        {{ ui::crumb(label=crumb.name, href="/category/" ~ crumb.slug) }}
+        {% endfor %}
+        {{ ui::crumb_current(label=category.name) }}
+      </ol>
     </nav>
     <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ category.name }}</h1>
     {% if category.description %}<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ category.description }}</p>{% endif %}

assets/views/shop/index.html

@@ -6,6 +6,12 @@
 {% block content %}
 {% set L = lang | default(value='sk') %}
 <div class="space-y-6">
+  <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=t(key="nav-home", lang=L), href="/") }}
+      {{ ui::crumb_current(label=t(key="nav-shop", lang=L)) }}
+    </ol>
+  </nav>
   <header class="space-y-1">
     <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=L) }}</h1>
     <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=L) }}</p>