diff --git a/frontend/__tests__/unit/components/BreadCrumbs.test.tsx b/frontend/__tests__/unit/components/BreadCrumbs.test.tsx
index 13fdddbd8e..245d9c63b3 100644
--- a/frontend/__tests__/unit/components/BreadCrumbs.test.tsx
+++ b/frontend/__tests__/unit/components/BreadCrumbs.test.tsx
@@ -53,7 +53,8 @@ describe('BreadCrumbRenderer', () => {
     render(<BreadCrumbRenderer items={mockItems} />)
 
     const lastItem = screen.getByText('OWASP ZAP')
-    expect(lastItem).toHaveClass('cursor-default', 'font-semibold')
+    const parentSpan = lastItem.parentElement
+    expect(parentSpan).toHaveClass('cursor-default', 'font-semibold')
   })
 
   test('renders chevron separators between items', () => {
diff --git a/frontend/src/components/BreadCrumbs.tsx b/frontend/src/components/BreadCrumbs.tsx
index 2df6047782..3e3ef870f6 100644
--- a/frontend/src/components/BreadCrumbs.tsx
+++ b/frontend/src/components/BreadCrumbs.tsx
@@ -2,6 +2,7 @@ import { Breadcrumbs, BreadcrumbItem as HeroUIBreadcrumbItem } from '@heroui/rea
 import Link from 'next/link'
 import { FaChevronRight } from 'react-icons/fa'
 import type { BreadcrumbItem } from 'types/breadcrumb'
+import { TruncatedText } from 'components/TruncatedText'
 
 type BreadCrumbRendererProps = Readonly<{
   items: readonly BreadcrumbItem[]
@@ -31,14 +32,20 @@ export default function BreadCrumbRenderer({ items }: BreadCrumbRendererProps) {
                     className="cursor-default font-semibold text-gray-600 dark:text-gray-300"
                     aria-current="page"
                   >
-                    {item.title}
+                    <TruncatedText
+                      text={item.title}
+                      className="max-w-xs sm:max-w-sm md:max-w-none"
+                    />
                   </span>
                 ) : (
                   <Link
                     href={item.path}
                     className="hover:text-blue-700 hover:underline dark:text-blue-400"
                   >
-                    {item.title}
+                    <TruncatedText
+                      text={item.title}
+                      className="max-w-xs sm:max-w-sm md:max-w-none"
+                    />
                   </Link>
                 )}
               </HeroUIBreadcrumbItem>
diff --git a/frontend/src/components/BreadCrumbsWrapper.tsx b/frontend/src/components/BreadCrumbsWrapper.tsx
index 40138c117d..44e896e6ad 100644
--- a/frontend/src/components/BreadCrumbsWrapper.tsx
+++ b/frontend/src/components/BreadCrumbsWrapper.tsx
@@ -5,6 +5,7 @@ import { useBreadcrumbs } from 'hooks/useBreadcrumbs'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { FaChevronRight } from 'react-icons/fa6'
+import { TruncatedText } from 'components/TruncatedText'
 
 export default function BreadCrumbsWrapper() {
   const pathname = usePathname()
@@ -20,7 +21,7 @@ export default function BreadCrumbsWrapper() {
           separator={<FaChevronRight className="mx-1 text-xs text-gray-400 dark:text-gray-500" />}
           className="text-gray-800 dark:text-gray-200"
           itemClasses={{
-            base: 'transition-colors duration-200',
+            base: 'transition-colors duration-200 min-w-0',
             item: 'text-sm font-medium',
             separator: 'flex items-center',
           }}
@@ -32,14 +33,20 @@ export default function BreadCrumbsWrapper() {
               <HeroUIBreadcrumbItem key={item.path} isDisabled={isLast}>
                 {isLast ? (
                   <span className="cursor-default font-semibold text-gray-800 dark:text-gray-100">
-                    {item.title}
+                    <TruncatedText
+                      text={item.title}
+                      className="max-w-xs sm:max-w-sm md:max-w-none"
+                    />
                   </span>
                 ) : (
                   <Link
                     href={item.path}
                     className="hover:text-blue-700 hover:underline dark:text-blue-400"
                   >
-                    {item.title}
+                    <TruncatedText
+                      text={item.title}
+                      className="max-w-xs sm:max-w-sm md:max-w-none"
+                    />
                   </Link>
                 )}
               </HeroUIBreadcrumbItem>