diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.js
deleted file mode 100644
index 2210fb4e1a8..00000000000
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * UI lib Component Example
- *
- */
-
-import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
-
-export const BreadcrumbSingle = () => (
-  <ComponentBox data-visual-test="breadcrumb-single">
-    {
-      /* jsx */ `
-<Breadcrumb
-  onClick={() => {
-      console.log('Going back!')
-    }}
-/>
-`
-    }
-  </ComponentBox>
-)
-
-export const BreadcrumbMultipleData = () => (
-  <ComponentBox noFragments={false} data-visual-test="breadcrumb-multiple">
-    {
-      /* jsx */ `
-() => {
-  // You can also import pages from a store and only do a remapping
-  const pages = [
-    {
-      text: "",
-      href: "/",
-    },
-    {
-      text: "UI Library",
-      href: "/uilib",
-    },
-    {
-      text: "Components",
-      href: "/uilib/components",
-    },
-    {
-      text: "Breadcrumbs",
-      href: "/uilib/components/breadcrumbs"
-    }
-  ];
-  
-  return (
-    <Breadcrumb data={pages} spacing />
-  )
-}
-`
-    }
-  </ComponentBox>
-)
-
-export const BreadcrumbMultiple = () => (
-  <ComponentBox data-visual-test="breadcrumb-multiple-children">
-    {
-      /* jsx */ `
-<Breadcrumb spacing>
-  <Breadcrumb.Item onClick={() => {console.log("go home!")}} variant="home" />
-  <Breadcrumb.Item text="Page item" onClick={() => {console.log("go to page 1")}} />
-  <Breadcrumb.Item text="Page item" onClick={() => {console.log("go to page 2")}} variant="current" />
-</Breadcrumb>
-`
-    }
-  </ComponentBox>
-)
-
-export const BreadcrumbVariants = () => (
-  <ComponentBox noFragments={false} data-visual-test="breadcrumb-collapse">
-    {
-      /* jsx */ `
-() => {
-  const pages = [
-    {
-      text: "",
-      href: "/",
-    },
-    {
-      text: "UI Library",
-      href: "/uilib",
-    },
-    {
-      text: "Components",
-      href: "/uilib/components",
-    }
-  ];
-  
-  return (
-    // Try changing variant here
-    <Breadcrumb variant="collapse" data={pages} spacing />
-  )
-}
-`
-    }
-  </ComponentBox>
-)
-
-export const BreadcrumbCollapseOpen = () => (
-  <ComponentBox
-    noFragments={false}
-    data-visual-test="breadcrumb-collapse-open"
-  >
-    {
-      /* jsx */ `
-() => {
-  const pages = [
-    {
-      text: "",
-      href: "/",
-    },
-    {
-      text: "UI Library",
-      href: "/uilib",
-    },
-    {
-      text: "Components",
-      href: "/uilib/components",
-    }
-  ];
-  
-  return (
-    <Breadcrumb variant="collapse" data={pages} isCollapsed={false} spacing />
-  )
-}
-`
-    }
-  </ComponentBox>
-)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.tsx
new file mode 100644
index 00000000000..a36f7d3a15b
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.tsx
@@ -0,0 +1,127 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+import Breadcrumb from '@dnb/eufemia/src/components/Breadcrumb'
+
+export const BreadcrumbSingle = () => (
+  <ComponentBox data-visual-test="breadcrumb-single">
+    <Breadcrumb
+      onClick={() => {
+        console.log('Going back!')
+      }}
+    />
+  </ComponentBox>
+)
+
+export const BreadcrumbMultipleData = () => (
+  <ComponentBox data-visual-test="breadcrumb-multiple">
+    {() => {
+      // You can also import pages from a store and only do a remapping
+      const pages = [
+        {
+          text: '',
+          href: '/',
+        },
+        {
+          text: 'UI Library',
+          href: '/uilib',
+        },
+        {
+          text: 'Components',
+          href: '/uilib/components',
+        },
+        {
+          text: 'Breadcrumbs',
+          href: '/uilib/components/breadcrumbs',
+        },
+      ]
+
+      return <Breadcrumb data={pages} spacing />
+    }}
+  </ComponentBox>
+)
+
+export const BreadcrumbMultiple = () => (
+  <ComponentBox data-visual-test="breadcrumb-multiple-children">
+    <Breadcrumb spacing>
+      <Breadcrumb.Item
+        onClick={() => {
+          console.log('go home!')
+        }}
+        variant="home"
+      />
+      <Breadcrumb.Item
+        text="Page item"
+        onClick={() => {
+          console.log('go to page 1')
+        }}
+      />
+      <Breadcrumb.Item
+        text="Page item"
+        onClick={() => {
+          console.log('go to page 2')
+        }}
+        variant="current"
+      />
+    </Breadcrumb>
+  </ComponentBox>
+)
+
+export const BreadcrumbVariants = () => (
+  <ComponentBox data-visual-test="breadcrumb-collapse">
+    {() => {
+      const pages = [
+        {
+          text: '',
+          href: '/',
+        },
+        {
+          text: 'UI Library',
+          href: '/uilib',
+        },
+        {
+          text: 'Components',
+          href: '/uilib/components',
+        },
+      ]
+
+      return (
+        // Try changing variant here
+        <Breadcrumb variant="collapse" data={pages} spacing />
+      )
+    }}
+  </ComponentBox>
+)
+
+export const BreadcrumbCollapseOpen = () => (
+  <ComponentBox data-visual-test="breadcrumb-collapse-open">
+    {() => {
+      const pages = [
+        {
+          text: '',
+          href: '/',
+        },
+        {
+          text: 'UI Library',
+          href: '/uilib',
+        },
+        {
+          text: 'Components',
+          href: '/uilib/components',
+        },
+      ]
+
+      return (
+        <Breadcrumb
+          variant="collapse"
+          data={pages}
+          isCollapsed={false}
+          spacing
+        />
+      )
+    }}
+  </ComponentBox>
+)
diff --git a/packages/dnb-eufemia/jest.config.screenshots.js b/packages/dnb-eufemia/jest.config.screenshots.js
index c5e79481954..f81a30533b7 100644
--- a/packages/dnb-eufemia/jest.config.screenshots.js
+++ b/packages/dnb-eufemia/jest.config.screenshots.js
@@ -3,7 +3,7 @@ const config = require('./jest.config.js')
 module.exports = {
   ...config,
   ...{
-    testRegex: 'screenshot.test.(js|tsx)$',
+    testRegex: 'screenshot.test.(js|ts|tsx)$',
     globalSetup: './src/core/jest/jestPuppeteerSetup.js',
     globalTeardown: './src/core/jest/jestPuppeteerTeardown.js',
     testEnvironment: './src/core/jest/jestPuppeteerEnvironment.js',
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.screenshot.test.js b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.screenshot.test.ts
similarity index 75%
rename from packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.screenshot.test.js
rename to packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.screenshot.test.ts
index dcea8400bba..b0ca5d96591 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.screenshot.test.js
+++ b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.screenshot.test.ts
@@ -47,4 +47,16 @@ describe('Breadcrumb screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match Breadcrumb focus state', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb',
+      screenshotSelector:
+        '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb .dnb-breadcrumb__bar',
+      simulateSelector:
+        '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb__list .dnb-breadcrumb__item:nth-of-type(2) a',
+      simulate: 'focus',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
index fe381e4843f..2138449ffb6 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -752,7 +752,6 @@ button.dnb-button::-moz-focus-inner {
   .dnb-breadcrumb__animation {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
     transition: height 400ms var(--easing-default); }
   .dnb-breadcrumb__animation .dnb-breadcrumb__item {
     transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-1-99672.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-1-c7a95.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-1-99672.snap.png
rename to packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-1-c7a95.snap.png
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-opened-1-2b97c.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-opened-1-f4b6d.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-opened-1-2b97c.snap.png
rename to packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-collapse-opened-1-f4b6d.snap.png
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-focus-state-1-ab51e.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-focus-state-1-ab51e.snap.png
new file mode 100644
index 00000000000..b44ba2c4e57
Binary files /dev/null and b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-focus-state-1-ab51e.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-1-b85aa.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-1-46050.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-1-b85aa.snap.png
rename to packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-1-46050.snap.png
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-with-children-1-dbdd2.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-with-children-1-a7948.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-with-children-1-dbdd2.snap.png
rename to packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-multiple-with-children-1-a7948.snap.png
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-single-1-5c8af.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-single-1-21525.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-js-breadcrumb-screenshot-have-to-match-breadcrumb-single-1-5c8af.snap.png
rename to packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb-screenshot-test-ts-breadcrumb-screenshot-have-to-match-breadcrumb-single-1-21525.snap.png
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/style/_breadcrumb.scss b/packages/dnb-eufemia/src/components/breadcrumb/style/_breadcrumb.scss
index 1f981fde2cc..a2140081c53 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/style/_breadcrumb.scss
+++ b/packages/dnb-eufemia/src/components/breadcrumb/style/_breadcrumb.scss
@@ -45,7 +45,6 @@
     display: flex;
     flex-direction: column;
 
-    overflow: hidden;
     transition: height 400ms var(--easing-default);
   }
   &__animation &__item {