From ac3b69f8643a7b4520136344b745a015de184e55 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 15 Apr 2026 09:45:38 +0200
Subject: [PATCH] feat: add onNavigate callback to Breadcrumb for SPA routing

Breadcrumb used plain <a href> which bypasses React Router's basename,
breaking navigation in multi-tenant setups with a base path prefix.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/design-system/composites/Breadcrumb/Breadcrumb.tsx | 9 +++++++--
 src/design-system/layout/TopBar/TopBar.tsx             | 4 +++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/design-system/composites/Breadcrumb/Breadcrumb.tsx b/src/design-system/composites/Breadcrumb/Breadcrumb.tsx
index 8f62ed0..421b072 100644
--- a/src/design-system/composites/Breadcrumb/Breadcrumb.tsx
+++ b/src/design-system/composites/Breadcrumb/Breadcrumb.tsx
@@ -8,9 +8,10 @@ interface BreadcrumbItem {
 interface BreadcrumbProps {
   items: BreadcrumbItem[]
   className?: string
+  onNavigate?: (href: string) => void
 }
 
-export function Breadcrumb({ items, className }: BreadcrumbProps) {
+export function Breadcrumb({ items, className, onNavigate }: BreadcrumbProps) {
   return (
     <nav aria-label="Breadcrumb" className={className}>
       <ol className={styles.list}>
@@ -22,7 +23,11 @@ export function Breadcrumb({ items, className }: BreadcrumbProps) {
               {isLast ? (
                 <span className={styles.active}>{item.label}</span>
               ) : item.href ? (
-                <a href={item.href} className={styles.link}>
+                <a
+                  href={item.href}
+                  className={styles.link}
+                  onClick={onNavigate ? (e) => { e.preventDefault(); onNavigate(item.href!) } : undefined}
+                >
                   {item.label}
                 </a>
               ) : (
diff --git a/src/design-system/layout/TopBar/TopBar.tsx b/src/design-system/layout/TopBar/TopBar.tsx
index bc41e7c..039e1b3 100644
--- a/src/design-system/layout/TopBar/TopBar.tsx
+++ b/src/design-system/layout/TopBar/TopBar.tsx
@@ -14,6 +14,7 @@ interface TopBarProps {
   user?: { name: string }
   userMenuItems?: import('../../composites/Dropdown/Dropdown').DropdownItem[]
   onLogout?: () => void
+  onNavigate?: (href: string) => void
   className?: string
   children?: ReactNode
 }
@@ -24,6 +25,7 @@ export function TopBar({
   user,
   userMenuItems,
   onLogout,
+  onNavigate,
   className,
   children,
 }: TopBarProps) {
@@ -33,7 +35,7 @@ export function TopBar({
   return (
     <header className={`${styles.topbar} ${className ?? ''}`}>
       {/* Left: Breadcrumb */}
-      <Breadcrumb items={breadcrumbOverride ?? breadcrumb} className={styles.breadcrumb} />
+      <Breadcrumb items={breadcrumbOverride ?? breadcrumb} className={styles.breadcrumb} onNavigate={onNavigate} />
 
       {/* Center: consumer-provided controls */}
       {children}