fix: convert incorrect breadcrumb links to opaque spans (#7626)

* fix: convert incorrect breadcrumb links to opaque spans

* add linkless story

* make sure last item is always displayed as active

Author: dario-piotrowicz

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: [

packages/ui-components/Common/Breadcrumbs/index.tsx

@@ -51,9 +51,17 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
             hideSeparator={isLastItem}
             position={position + +!hideHome}
           >
-            <BreadcrumbLink as={as} href={link.href} active={isLastItem}>
-              {link.label}
-            </BreadcrumbLink>
+            {link.href || isLastItem ? (
+              <BreadcrumbLink
+                as={as}
+                href={link.href || undefined}
+                active={isLastItem}
+              >
+                {link.label}
+              </BreadcrumbLink>
+            ) : (
+              <span className="opacity-70">{link.label}</span>
+            )}
           </BreadcrumbItem>
         );
       }),