fix: BreadcrumbItem when using to and element props (#2813)

Small fix to support using router links as breadcrumbs --------- Co-authored-by: Sondre Kvisli <[email protected]> Co-authored-by: Tobias Høegh <[email protected]>
dnbexperience · Oct 30, 2023 · e7eff2d · e7eff2d
1 parent cbbd9e5
commit e7eff2d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.mdx b/...es/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.mdx
@@ -34,3 +34,5 @@ showTabs: true
 | `icon`              | _(optional)_ Override icon displaying on the left side (Not recommended). Default: `chevron_left`. |
 | `href` or `onClick` | _(optional)_ Set what happens when the user clicks on the item.                                    |
 | `skeleton`          | _(optional)_ Applies loading skeleton.                                                             |
+
+**NB:** When interactive, the item is an inherited [Button](/uilib/components/button/). You can therefore swap out the underlaying HTML element, by providing a new `element` or use other Button properties, such as `to` instead of `href`.
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbItem.tsx b/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbItem.tsx
@@ -119,7 +119,8 @@ const BreadcrumbItem = (localProps: BreadcrumbItemProps) => {
     currentIcon = icon || determineSbankenIcon(variant, isSmallScreen)
   }
   const currentText = text || (variant === 'home' && homeText) || ''
-  const isInteractive = (href || onClick) && variant !== 'current'
+  const isInteractive =
+    (href || onClick || props.to) && variant !== 'current'
   const style = { '--delay': String(itemNr) } as React.CSSProperties
 
   return (

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -282,6 +282,23 @@ describe('Breadcrumb', () => {
       ).toBeInTheDocument()
     })
 
+    it('renders breadcrumbitem as a link if the to prop is given and element is a router link', () => {
+      const MockLink = React.forwardRef(
+        (props: { to: string; children: React.ReactNode }, ref) => (
+          <a
+            href={props.to}
+            ref={ref as React.RefObject<HTMLAnchorElement>}
+          >
+            {props.children}
+          </a>
+        )
+      )
+
+      render(<BreadcrumbItem to={'/url'} element={MockLink} text="Page" />)
+
+      expect(screen.getByRole('link')).toHaveAttribute('href', '/url')
+    })
+
     it('fires onClick event', () => {
       const onClick = jest.fn()
       render(<BreadcrumbItem onClick={onClick} text="Page" />)