From 08222addc9ff899947d5b663326101832359e50a Mon Sep 17 00:00:00 2001
From: Dario Piotrowicz <dario.piotrowicz@gmail.com>
Date: Mon, 7 Apr 2025 00:23:43 +0100
Subject: [PATCH 1/3] fix: convert incorrect breadcrumb links to opaque spans

---
 packages/ui-components/Common/Breadcrumbs/index.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/Common/Breadcrumbs/index.tsx b/packages/ui-components/Common/Breadcrumbs/index.tsx
index acf8c0ee10204..82813bc8df364 100644
--- a/packages/ui-components/Common/Breadcrumbs/index.tsx
+++ b/packages/ui-components/Common/Breadcrumbs/index.tsx
@@ -51,9 +51,13 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
             hideSeparator={isLastItem}
             position={position + +!hideHome}
           >
-            <BreadcrumbLink as={as} href={link.href} active={isLastItem}>
-              {link.label}
-            </BreadcrumbLink>
+            {link.href ? (
+              <BreadcrumbLink as={as} href={link.href} active={isLastItem}>
+                {link.label}
+              </BreadcrumbLink>
+            ) : (
+              <span className="opacity-70">{link.label}</span>
+            )}
           </BreadcrumbItem>
         );
       }),

From a8345017d2b433a60257ecccfc82a7432254768d Mon Sep 17 00:00:00 2001
From: Dario Piotrowicz <dario.piotrowicz@gmail.com>
Date: Mon, 7 Apr 2025 01:13:47 +0100
Subject: [PATCH 2/3] add linkless story

---
 .../Common/Breadcrumbs/index.stories.tsx      | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/ui-components/Common/Breadcrumbs/index.stories.tsx b/packages/ui-components/Common/Breadcrumbs/index.stories.tsx
index e591ba7e5f0b8..5829aecb3f41b 100644
--- a/packages/ui-components/Common/Breadcrumbs/index.stories.tsx
+++ b/packages/ui-components/Common/Breadcrumbs/index.stories.tsx
@@ -24,6 +24,25 @@ export const Default: Story = {
   },
 };
 
+export const Linkless: Story = {
+  args: {
+    links: [
+      {
+        label: 'Learn',
+        href: '',
+      },
+      {
+        label: 'Getting Started',
+        href: '',
+      },
+      {
+        label: 'Introduction to Node.js',
+        href: '',
+      },
+    ],
+  },
+};
+
 export const Truncate: Story = {
   args: {
     links: [

From 614899a0a2d98f07ab69d9a9e1d82b4a22decd87 Mon Sep 17 00:00:00 2001
From: Dario Piotrowicz <dario.piotrowicz@gmail.com>
Date: Mon, 7 Apr 2025 01:29:47 +0100
Subject: [PATCH 3/3] make sure last item is always displayed as active

---
 packages/ui-components/Common/Breadcrumbs/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/Common/Breadcrumbs/index.tsx b/packages/ui-components/Common/Breadcrumbs/index.tsx
index 82813bc8df364..1a3026af5e00c 100644
--- a/packages/ui-components/Common/Breadcrumbs/index.tsx
+++ b/packages/ui-components/Common/Breadcrumbs/index.tsx
@@ -51,8 +51,12 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
             hideSeparator={isLastItem}
             position={position + +!hideHome}
           >
-            {link.href ? (
-              <BreadcrumbLink as={as} href={link.href} active={isLastItem}>
+            {link.href || isLastItem ? (
+              <BreadcrumbLink
+                as={as}
+                href={link.href || undefined}
+                active={isLastItem}
+              >
                 {link.label}
               </BreadcrumbLink>
             ) : (