chore: the breadcrumb separator moved outside link

frameless · Jun 5, 2024 · 83ae3f5 · 83ae3f5
1 parent b470977
commit 83ae3f5
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/packages/ui/src/components/Breadcrumb/index.tsx b/packages/ui/src/components/Breadcrumb/index.tsx
@@ -63,6 +63,11 @@ export const Breadcrumbs = ({ links, Link = UtrechtLink, backLink, breakpoint =
         links.map(({ href, label, current }: any, index: number) =>
           label ? (
             <Fragment key={`${href}-${index}`}>
+              {links.length === 1 && label?.toLowerCase() !== 'home' && (
+                <BreadcrumbNavSeparator>
+                  <UtrechtIconChevronLeft />
+                </BreadcrumbNavSeparator>
+              )}
               <BreadcrumbNavLink
                 className={css('utrecht-link', 'utrecht-link--html-a', 'utrecht-breadcrumb-nav__link-custom')}
                 href={href}
@@ -71,18 +76,13 @@ export const Breadcrumbs = ({ links, Link = UtrechtLink, backLink, breakpoint =
                 current={current}
                 Link={UtrechtLink}
               >
-                {links.length === 1 && label?.toLowerCase() !== 'home' && (
-                  <BreadcrumbNavSeparator>
-                    <UtrechtIconChevronLeft />
-                  </BreadcrumbNavSeparator>
-                )}
                 {label}
-                {index !== links.length - 1 && (
-                  <BreadcrumbNavSeparator>
-                    <UtrechtIconChevronRight />
-                  </BreadcrumbNavSeparator>
-                )}
               </BreadcrumbNavLink>
+              {index !== links.length - 1 && (
+                <BreadcrumbNavSeparator>
+                  <UtrechtIconChevronRight />
+                </BreadcrumbNavSeparator>
+              )}
             </Fragment>
           ) : null,
         )}