From 7a5939a9cdc922abfb28f28d07f107f5f3b0767c Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Wed, 11 Sep 2024 22:26:44 +1000
Subject: [PATCH] fix: remove breadcrumbs with empty title (#1445)

---
 packages/fdr-sdk/src/navigation/utils/createBreadcrumbs.ts | 3 ++-
 packages/ui/app/src/components/FernBreadcrumbs.tsx         | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/fdr-sdk/src/navigation/utils/createBreadcrumbs.ts b/packages/fdr-sdk/src/navigation/utils/createBreadcrumbs.ts
index b53da9c071..40371b4e26 100644
--- a/packages/fdr-sdk/src/navigation/utils/createBreadcrumbs.ts
+++ b/packages/fdr-sdk/src/navigation/utils/createBreadcrumbs.ts
@@ -54,5 +54,6 @@ export function createBreadcrumbs(nodes: NavigationNode[]): readonly NavigationB
         });
     });
 
-    return breadcrumb;
+    // Remove breadcrumbs with empty titles
+    return breadcrumb.filter((item) => item.title.trim().length > 0);
 }
diff --git a/packages/ui/app/src/components/FernBreadcrumbs.tsx b/packages/ui/app/src/components/FernBreadcrumbs.tsx
index 5a14958711..5871213edf 100644
--- a/packages/ui/app/src/components/FernBreadcrumbs.tsx
+++ b/packages/ui/app/src/components/FernBreadcrumbs.tsx
@@ -10,14 +10,15 @@ export interface FernBreadcrumbsProps {
 
 export function FernBreadcrumbs({ breadcrumbs }: FernBreadcrumbsProps): ReactElement | null {
     const toHref = useToHref();
+    const filteredBreadcrumbs = breadcrumbs.filter((item) => item.title.trim().length > 0);
 
-    if (breadcrumbs.length === 0) {
+    if (filteredBreadcrumbs.length === 0) {
         return null;
     }
     return (
         <div>
             <span className="fern-breadcrumbs">
-                {breadcrumbs.map((breadcrumb, idx) => (
+                {filteredBreadcrumbs.map((breadcrumb, idx) => (
                     <Fragment key={idx}>
                         {idx > 0 && <NavArrowRight className="fern-breadcrumbs-arrow" />}
                         {breadcrumb.pointsTo != null ? (