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: [
diff --git a/packages/ui-components/Common/Breadcrumbs/index.tsx b/packages/ui-components/Common/Breadcrumbs/index.tsx
index acf8c0ee10204..1a3026af5e00c 100644
--- a/packages/ui-components/Common/Breadcrumbs/index.tsx
+++ b/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>
         );
       }),