chore: the breadcrumb separator moved outside link

frameless · Jun 5, 2024 · b643453 · b643453
1 parent b470977
commit b643453
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/packages/ui/src/components/Breadcrumb/index.module.scss b/packages/ui/src/components/Breadcrumb/index.module.scss
@@ -16,6 +16,10 @@
   margin-inline-end: 8px;
 }
 
+.utrecht-breadcrumb-nav__separator {
+  margin-inline-end: var(--utrecht-space-inline-xs);
+}
+
 .utrecht-breadcrumb-nav__link {
   --utrecht-link-focus-color: var(--utrecht-color-black);
 

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,
         )}