From 5d53fbb05d526fce87622dd61b1f44dbd7faa94a Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Fri, 25 Oct 2024 13:40:53 +0200
Subject: [PATCH 1/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Rewrite=20and=20move?=
 =?UTF-8?q?=20breadcrumbs=20#2604?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Breadcrumbs/BreadcrumbList.tsx        | 24 ------------
 .../src/Breadcrumbs/BreadcrumbListItem.tsx    | 39 -------------------
 web/components/src/index.ts                   |  1 -
 web/core/Breadcrumbs/BreadcrumbList.tsx       | 15 +++++++
 web/core/Breadcrumbs/BreadcrumbListItem.tsx   | 19 +++++++++
 .../src => core}/Breadcrumbs/index.ts         |  0
 web/pageComponents/topicPages/Breadcrumbs.tsx |  5 ++-
 7 files changed, 37 insertions(+), 66 deletions(-)
 delete mode 100644 web/components/src/Breadcrumbs/BreadcrumbList.tsx
 delete mode 100644 web/components/src/Breadcrumbs/BreadcrumbListItem.tsx
 create mode 100644 web/core/Breadcrumbs/BreadcrumbList.tsx
 create mode 100644 web/core/Breadcrumbs/BreadcrumbListItem.tsx
 rename web/{components/src => core}/Breadcrumbs/index.ts (100%)

diff --git a/web/components/src/Breadcrumbs/BreadcrumbList.tsx b/web/components/src/Breadcrumbs/BreadcrumbList.tsx
deleted file mode 100644
index 725a34148..000000000
--- a/web/components/src/Breadcrumbs/BreadcrumbList.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react'
-import { List as EdsList } from '@equinor/eds-core-react'
-import styled from 'styled-components'
-import { twMerge } from 'tailwind-merge'
-
-const List = styled(EdsList)`
-  list-style: none;
-  font-size: var(--typeScale-05);
-  line-height: var(--lineHeight-3);
-  font-weight: var(--fontWeight-medium);
-`
-
-export type BreadcrumbsProps = HTMLAttributes<HTMLOListElement>
-
-export const BreadcrumbsList = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(
-  { children, className = '', ...rest },
-  forwardedRef,
-) {
-  return (
-    <List ref={forwardedRef} variant="numbered" {...rest} className={twMerge('p-0', className)}>
-      {children}
-    </List>
-  )
-})
diff --git a/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx b/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx
deleted file mode 100644
index 4d45888f7..000000000
--- a/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react'
-import { List as EdsList } from '@equinor/eds-core-react'
-import styled from 'styled-components'
-
-const { Item: EdsItem } = EdsList
-
-export type BreadcrumbsListItemProps = HTMLAttributes<HTMLLIElement>
-
-const StyledListItem = styled(EdsItem)`
-  display: inline-block;
-  padding-right: var(--space-small);
-  font-weight: var(--fontWeight-bold);
-  color: var(--color-on-background);
-
-  &:after {
-    content: '>';
-    padding-left: var(--space-small);
-  }
-
-  &:last-child {
-    font-weight: var(--fontWeight-medium);
-    color: var(--breadcrumbs-inactive-color);
-
-    &:after {
-      content: '';
-    }
-  }
-`
-
-export const BreadcrumbsListItem = forwardRef<HTMLLIElement, BreadcrumbsListItemProps>(function Breadcrumbs(
-  { children, ...rest },
-  forwardedRef,
-) {
-  return (
-    <StyledListItem ref={forwardedRef} {...rest} className="first-letter:capitalize">
-      {children}
-    </StyledListItem>
-  )
-})
diff --git a/web/components/src/index.ts b/web/components/src/index.ts
index 63a786766..600489e47 100644
--- a/web/components/src/index.ts
+++ b/web/components/src/index.ts
@@ -17,4 +17,3 @@ export * from './Heading'
 export * from './Table'
 export * from './Tabs'
 export * from './Form'
-export * from './Breadcrumbs'
diff --git a/web/core/Breadcrumbs/BreadcrumbList.tsx b/web/core/Breadcrumbs/BreadcrumbList.tsx
new file mode 100644
index 000000000..3bbb444a5
--- /dev/null
+++ b/web/core/Breadcrumbs/BreadcrumbList.tsx
@@ -0,0 +1,15 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { List } from '@core/List'
+
+export type BreadcrumbsProps = HTMLAttributes<HTMLOListElement>
+
+export const BreadcrumbsList = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(
+  { children, className = ''},
+) {
+  return (
+    <List className={twMerge('p-0 list-none text-sm leading-8', className)}>
+      {children}
+    </List>
+  )
+})
diff --git a/web/core/Breadcrumbs/BreadcrumbListItem.tsx b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
new file mode 100644
index 000000000..b0c18f18b
--- /dev/null
+++ b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
@@ -0,0 +1,19 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import { List } from '@core/List'
+
+export type BreadcrumbsListItemProps = HTMLAttributes<HTMLLIElement>
+
+export const BreadcrumbsListItem = forwardRef<HTMLLIElement, BreadcrumbsListItemProps>(function Breadcrumbs(
+  { children, ...rest },
+  forwardedRef,
+) {
+  return (
+    <List.Item
+      ref={forwardedRef}
+      {...rest}
+      className="inline-block pr-2 font-bold text-grey-90 after:content-['>'] after:pl-2 last:font-medium last:text-slate-blue-90 last:after:content-[''] first-letter:capitalize"
+    >
+      {children}
+    </List.Item>
+  )
+})
\ No newline at end of file
diff --git a/web/components/src/Breadcrumbs/index.ts b/web/core/Breadcrumbs/index.ts
similarity index 100%
rename from web/components/src/Breadcrumbs/index.ts
rename to web/core/Breadcrumbs/index.ts
diff --git a/web/pageComponents/topicPages/Breadcrumbs.tsx b/web/pageComponents/topicPages/Breadcrumbs.tsx
index 150adad89..6ff81a771 100644
--- a/web/pageComponents/topicPages/Breadcrumbs.tsx
+++ b/web/pageComponents/topicPages/Breadcrumbs.tsx
@@ -1,8 +1,9 @@
 import { default as NextLink } from 'next/link'
-import { BackgroundContainer, BackgroundContainerProps, BreadcrumbsList } from '@components'
+import { BreadcrumbsList } from '@core/Breadcrumbs'
+import { BackgroundContainer, BackgroundContainerProps } from '@components'
 import { BreadcrumbJsonLd } from 'next-seo'
 import { useRouter } from 'next/router'
-import type { NextRouter } from 'next/router'
+import type { NextRouter } from 'next/router' 
 import { getFullUrl } from '../../common/helpers/getFullUrl'
 import { Breadcrumb } from '../../types'
 import { twMerge } from 'tailwind-merge'

From 4954475031534dc5f4e721896b5113292a603287 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Fri, 25 Oct 2024 14:15:12 +0200
Subject: [PATCH 2/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20rewrite=20forwardref?=
 =?UTF-8?q?=20#2604?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/core/Breadcrumbs/BreadcrumbList.tsx     | 9 +++++----
 web/core/Breadcrumbs/BreadcrumbListItem.tsx | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/core/Breadcrumbs/BreadcrumbList.tsx b/web/core/Breadcrumbs/BreadcrumbList.tsx
index 3bbb444a5..3e3baf341 100644
--- a/web/core/Breadcrumbs/BreadcrumbList.tsx
+++ b/web/core/Breadcrumbs/BreadcrumbList.tsx
@@ -4,12 +4,13 @@ import { List } from '@core/List'
 
 export type BreadcrumbsProps = HTMLAttributes<HTMLOListElement>
 
-export const BreadcrumbsList = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(
-  { children, className = ''},
+export const BreadcrumbsList = forwardRef<HTMLDivElement, BreadcrumbsProps>(function Breadcrumbs(
+  { children, className = '' }, 
+  ref 
 ) {
   return (
-    <List className={twMerge('p-0 list-none text-sm leading-8', className)}>
+    <List ref={ref} className={twMerge('p-0 list-none text-sm leading-8', className)}>
       {children}
     </List>
   )
-})
+})
\ No newline at end of file
diff --git a/web/core/Breadcrumbs/BreadcrumbListItem.tsx b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
index b0c18f18b..f4f6e7f91 100644
--- a/web/core/Breadcrumbs/BreadcrumbListItem.tsx
+++ b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
@@ -5,11 +5,11 @@ export type BreadcrumbsListItemProps = HTMLAttributes<HTMLLIElement>
 
 export const BreadcrumbsListItem = forwardRef<HTMLLIElement, BreadcrumbsListItemProps>(function Breadcrumbs(
   { children, ...rest },
-  forwardedRef,
+  ref,
 ) {
   return (
     <List.Item
-      ref={forwardedRef}
+      ref={ref}
       {...rest}
       className="inline-block pr-2 font-bold text-grey-90 after:content-['>'] after:pl-2 last:font-medium last:text-slate-blue-90 last:after:content-[''] first-letter:capitalize"
     >

From 8316c3d581caae937a9eee071b856f9c46ff9234 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Mon, 25 Nov 2024 12:49:30 +0100
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20Remove=20core=20and=20replace?=
 =?UTF-8?q?=20with=20ol/li=20#2604?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/core/Breadcrumbs/BreadcrumbList.tsx     | 7 +++----
 web/core/Breadcrumbs/BreadcrumbListItem.tsx | 5 ++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/core/Breadcrumbs/BreadcrumbList.tsx b/web/core/Breadcrumbs/BreadcrumbList.tsx
index 3e3baf341..518b3d6b3 100644
--- a/web/core/Breadcrumbs/BreadcrumbList.tsx
+++ b/web/core/Breadcrumbs/BreadcrumbList.tsx
@@ -1,16 +1,15 @@
 import { forwardRef, HTMLAttributes } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { List } from '@core/List'
 
 export type BreadcrumbsProps = HTMLAttributes<HTMLOListElement>
 
-export const BreadcrumbsList = forwardRef<HTMLDivElement, BreadcrumbsProps>(function Breadcrumbs(
+export const BreadcrumbsList = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(
   { children, className = '' }, 
   ref 
 ) {
   return (
-    <List ref={ref} className={twMerge('p-0 list-none text-sm leading-8', className)}>
+    <ol ref={ref} className={twMerge('p-0 list-none text-sm leading-8', className)}>
       {children}
-    </List>
+    </ol>
   )
 })
\ No newline at end of file
diff --git a/web/core/Breadcrumbs/BreadcrumbListItem.tsx b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
index f4f6e7f91..4573f0f8a 100644
--- a/web/core/Breadcrumbs/BreadcrumbListItem.tsx
+++ b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
@@ -1,5 +1,4 @@
 import { forwardRef, HTMLAttributes } from 'react'
-import { List } from '@core/List'
 
 export type BreadcrumbsListItemProps = HTMLAttributes<HTMLLIElement>
 
@@ -8,12 +7,12 @@ export const BreadcrumbsListItem = forwardRef<HTMLLIElement, BreadcrumbsListItem
   ref,
 ) {
   return (
-    <List.Item
+    <li
       ref={ref}
       {...rest}
       className="inline-block pr-2 font-bold text-grey-90 after:content-['>'] after:pl-2 last:font-medium last:text-slate-blue-90 last:after:content-[''] first-letter:capitalize"
     >
       {children}
-    </List.Item>
+    </li>
   )
 })
\ No newline at end of file

From af271430a8685eb0ffd4a766ffa148d49cc1eb62 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Tue, 26 Nov 2024 11:38:01 +0100
Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20adjustments=20and=20move=20file?=
 =?UTF-8?q?=20into=20core=20#2604?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/core/Breadcrumbs/BreadcrumbList.tsx       |  4 +-
 web/core/Breadcrumbs/BreadcrumbListItem.tsx   | 35 ++++----
 web/core/Breadcrumbs/Breadcrumbs.tsx          | 79 +++++++++++++++++++
 web/core/Breadcrumbs/index.ts                 |  3 +-
 .../pageTemplates/TopicPage.tsx               |  2 +-
 5 files changed, 104 insertions(+), 19 deletions(-)
 create mode 100644 web/core/Breadcrumbs/Breadcrumbs.tsx

diff --git a/web/core/Breadcrumbs/BreadcrumbList.tsx b/web/core/Breadcrumbs/BreadcrumbList.tsx
index 518b3d6b3..b3d5a67fe 100644
--- a/web/core/Breadcrumbs/BreadcrumbList.tsx
+++ b/web/core/Breadcrumbs/BreadcrumbList.tsx
@@ -4,8 +4,8 @@ import { twMerge } from 'tailwind-merge'
 export type BreadcrumbsProps = HTMLAttributes<HTMLOListElement>
 
 export const BreadcrumbsList = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(
-  { children, className = '' }, 
-  ref 
+  { children, className = '' },
+  ref
 ) {
   return (
     <ol ref={ref} className={twMerge('p-0 list-none text-sm leading-8', className)}>
diff --git a/web/core/Breadcrumbs/BreadcrumbListItem.tsx b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
index 4573f0f8a..c75248d00 100644
--- a/web/core/Breadcrumbs/BreadcrumbListItem.tsx
+++ b/web/core/Breadcrumbs/BreadcrumbListItem.tsx
@@ -1,18 +1,23 @@
 import { forwardRef, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
 
-export type BreadcrumbsListItemProps = HTMLAttributes<HTMLLIElement>
+export type BreadcrumbsListItemProps = HTMLAttributes<HTMLLIElement> & {
+  active?: boolean
+}
 
-export const BreadcrumbsListItem = forwardRef<HTMLLIElement, BreadcrumbsListItemProps>(function Breadcrumbs(
-  { children, ...rest },
-  ref,
-) {
-  return (
-    <li
-      ref={ref}
-      {...rest}
-      className="inline-block pr-2 font-bold text-grey-90 after:content-['>'] after:pl-2 last:font-medium last:text-slate-blue-90 last:after:content-[''] first-letter:capitalize"
-    >
-      {children}
-    </li>
-  )
-})
\ No newline at end of file
+export const BreadcrumbsListItem = forwardRef<HTMLLIElement, BreadcrumbsListItemProps>(
+  ({ children, active, ...rest }, ref) => {
+    return (
+      <li
+        ref={ref}
+        {...rest}
+        className={twMerge(
+          'inline-block pr-2 text-grey-90 after:content-[">"] after:pl-2 last:after:content-[""]',
+          active ? 'font-medium text-slate-blue-90' : 'font-bold'
+        )}
+      >
+        {children}
+      </li>
+    )
+  }
+)
\ No newline at end of file
diff --git a/web/core/Breadcrumbs/Breadcrumbs.tsx b/web/core/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 000000000..2aa6f8b15
--- /dev/null
+++ b/web/core/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,79 @@
+import { BreadcrumbsList } from './index'
+import { BackgroundContainer, BackgroundContainerProps } from '@components'
+import { BreadcrumbJsonLd } from 'next-seo'
+import { useRouter } from 'next/router'
+import { twMerge } from 'tailwind-merge'
+import NextLink from 'next/link'
+import type { Breadcrumb } from '../../types'
+
+type BreadcrumbsProps = {
+  slug: string
+  useCustomBreadcrumbs: boolean
+  defaultBreadcrumbs: Breadcrumb[]
+  customBreadcrumbs: Breadcrumb[]
+  className?: string
+} & BackgroundContainerProps
+
+const buildJsonLdElements = (crumbs: Breadcrumb[], router: ReturnType<typeof useRouter>) => {
+  const { pathname, locale } = router
+
+  return crumbs.map((item, index) => ({
+    position: index + 1,
+    name: item.label,
+    item: `${pathname}/${item.slug}`,
+  }))
+}
+
+const capitalize = (text: string): string => text[0].toUpperCase() + text.slice(1)
+
+const parseBreadcrumbs = (crumbs: Breadcrumb[]) => {
+  return crumbs.map((item) => ({
+    ...item,
+    label: capitalize(item.label),
+  }))
+}
+
+export const Breadcrumbs = ({
+  slug,
+  useCustomBreadcrumbs,
+  defaultBreadcrumbs,
+  customBreadcrumbs,
+  background,
+  className = '',
+}: BreadcrumbsProps) => {
+  const router = useRouter()
+  const crumbs =
+    useCustomBreadcrumbs && customBreadcrumbs.length >= 3
+      ? parseBreadcrumbs(customBreadcrumbs)
+      : parseBreadcrumbs(defaultBreadcrumbs)
+
+  if (crumbs.length < 2) return null
+
+  return (
+    <BackgroundContainer background={background} renderFragmentWhenPossible className="mx-auto max-w-viewport">
+      <nav aria-label="Breadcrumbs">
+        <BreadcrumbsList className={twMerge(`py-10 px-layout-lg`, className)}>
+          {crumbs.map((item) => {
+            const isActive = item.slug === slug
+            const label = item.label
+            return (
+              <BreadcrumbsList.BreadcrumbsListItem key={item.slug} active={isActive}>
+                {isActive ? (
+                  <span aria-current="page">{label}</span>
+                ) : (
+                  <NextLink
+                    href={item.slug}
+                    className="hover:underline no-underline focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert"
+                  >
+                    {label}
+                  </NextLink>
+                )}
+              </BreadcrumbsList.BreadcrumbsListItem>
+            )
+          })}
+        </BreadcrumbsList>
+      </nav>
+      <BreadcrumbJsonLd itemListElements={buildJsonLdElements(crumbs, router)} />
+    </BackgroundContainer>
+  )
+}
\ No newline at end of file
diff --git a/web/core/Breadcrumbs/index.ts b/web/core/Breadcrumbs/index.ts
index 53d7ddc87..5543d0000 100644
--- a/web/core/Breadcrumbs/index.ts
+++ b/web/core/Breadcrumbs/index.ts
@@ -1,5 +1,6 @@
 import { BreadcrumbsList as Wrapper } from './BreadcrumbList'
 import { BreadcrumbsListItem } from './BreadcrumbListItem'
+import { Breadcrumbs } from './Breadcrumbs'
 
 type BreadcrumbsListCompoundProps = typeof Wrapper & {
   BreadcrumbsListItem: typeof BreadcrumbsListItem
@@ -9,4 +10,4 @@ const BreadcrumbsList = Wrapper as BreadcrumbsListCompoundProps
 
 BreadcrumbsList.BreadcrumbsListItem = BreadcrumbsListItem
 
-export { BreadcrumbsList }
+export { Breadcrumbs, BreadcrumbsList }
diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx
index 8d7fe718b..cb7906334 100644
--- a/web/pageComponents/pageTemplates/TopicPage.tsx
+++ b/web/pageComponents/pageTemplates/TopicPage.tsx
@@ -5,7 +5,7 @@ import Seo from '../shared/Seo'
 import { SharedBanner } from './shared/SharedBanner'
 import { PageContent } from './shared/SharedPageContent'
 import SharedTitle from './shared/SharedTitle'
-import { Breadcrumbs } from '../topicPages/Breadcrumbs'
+import { Breadcrumbs } from '@core/Breadcrumbs'
 
 type TopicPageProps = {
   data: TopicPageSchema

From 5f0123334e85a91be114624a5375e25d18d23103 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Mon, 2 Dec 2024 09:55:20 +0100
Subject: [PATCH 5/5] remove breadcrumbs from pagecomponents #2604

---
 web/pageComponents/topicPages/Breadcrumbs.tsx | 95 -------------------
 1 file changed, 95 deletions(-)
 delete mode 100644 web/pageComponents/topicPages/Breadcrumbs.tsx

diff --git a/web/pageComponents/topicPages/Breadcrumbs.tsx b/web/pageComponents/topicPages/Breadcrumbs.tsx
deleted file mode 100644
index 6ff81a771..000000000
--- a/web/pageComponents/topicPages/Breadcrumbs.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { default as NextLink } from 'next/link'
-import { BreadcrumbsList } from '@core/Breadcrumbs'
-import { BackgroundContainer, BackgroundContainerProps } from '@components'
-import { BreadcrumbJsonLd } from 'next-seo'
-import { useRouter } from 'next/router'
-import type { NextRouter } from 'next/router' 
-import { getFullUrl } from '../../common/helpers/getFullUrl'
-import { Breadcrumb } from '../../types'
-import { twMerge } from 'tailwind-merge'
-
-const { BreadcrumbsListItem } = BreadcrumbsList
-
-type BreadcrumbsProps = {
-  slug: string
-  useCustomBreadcrumbs: boolean
-  defaultBreadcrumbs: Breadcrumb[]
-  customBreadcrumbs: Breadcrumb[]
-  className?: string
-} & BackgroundContainerProps
-
-const buildJsonLdElements = (crumbs: Breadcrumb[], router: NextRouter) => {
-  const { pathname, locale } = router
-
-  return crumbs.map((item, index) => {
-    const fullUrl = getFullUrl(pathname, item.slug, locale)
-
-    return {
-      position: index + 1,
-      name: item.label,
-      item: fullUrl,
-    }
-  })
-}
-
-const parseSlug = (item: string): string => {
-  const parts = item?.split('/').at(-1) || item
-  return parts?.[0] + parts?.slice(1)
-}
-
-const capitalize = (string: string): string => string[0].toUpperCase() + string.slice(1)
-
-const parseBreadcrumbs = (crumbs: Breadcrumb[]) => {
-  return crumbs
-    .filter((item) => item.slug && item.label)
-    .map((item) => ({
-      ...item,
-      label: capitalize(item.label),
-    }))
-}
-
-export const Breadcrumbs = ({
-  slug,
-  useCustomBreadcrumbs,
-  defaultBreadcrumbs,
-  customBreadcrumbs,
-  background,
-  className = '',
-}: BreadcrumbsProps) => {
-  const router = useRouter()
-
-  const crumbs =
-    useCustomBreadcrumbs && customBreadcrumbs && customBreadcrumbs.length >= 3
-      ? parseBreadcrumbs(customBreadcrumbs)
-      : parseBreadcrumbs(defaultBreadcrumbs)
-
-  if (crumbs.length < 2) return null
-
-  return (
-    <BackgroundContainer background={background} renderFragmentWhenPossible className="mx-auto max-w-viewport">
-      <BreadcrumbsList className={twMerge(`py-10 px-layout-lg`, className)}>
-        {crumbs.map((item: Breadcrumb) => {
-          const label = item.label ?? parseSlug(item.slug)?.replaceAll('-', ' ')
-          const shouldLink = item.slug !== slug
-
-          return (
-            <BreadcrumbsListItem key={item.slug}>
-              {shouldLink ? (
-                <NextLink
-                  href={item.slug}
-                  prefetch={false}
-                  className="hover:underline no-underline focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert underline-offset-4"
-                >
-                  {label}
-                </NextLink>
-              ) : (
-                <>{label}</>
-              )}
-            </BreadcrumbsListItem>
-          )
-        })}
-      </BreadcrumbsList>
-      <BreadcrumbJsonLd itemListElements={buildJsonLdElements(crumbs, router)} />
-    </BackgroundContainer>
-  )
-}