Skip to content

Commit db0df12

Browse files
committed
Fix BreadcrumbSeparator rendering in Breadcrumbs
Wrap each breadcrumb and its separator in a Fragment to ensure BreadcrumbSeparator is rendered outside of BreadcrumbItem, improving the structure and appearance of the breadcrumb navigation.
1 parent 39688e4 commit db0df12

File tree

1 file changed

+12
-9
lines changed

1 file changed

+12
-9
lines changed

src/components/react/Breadcrumbs.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client';
22

3+
import { Fragment } from 'react';
34
import {
45
Breadcrumb,
56
BreadcrumbItem,
@@ -74,16 +75,18 @@ export function ContentBreadcrumbs({
7475
const isLast = index === breadcrumbs.length - 1;
7576

7677
return (
77-
<BreadcrumbItem key={crumb.title}>
78+
<Fragment key={crumb.title}>
7879
{index > 0 && <BreadcrumbSeparator />}
79-
{isLast ? (
80-
<BreadcrumbPage>{crumb.title}</BreadcrumbPage>
81-
) : crumb.href ? (
82-
<BreadcrumbLink href={crumb.href}>{crumb.title}</BreadcrumbLink>
83-
) : (
84-
<span className="text-muted-foreground">{crumb.title}</span>
85-
)}
86-
</BreadcrumbItem>
80+
<BreadcrumbItem>
81+
{isLast ? (
82+
<BreadcrumbPage>{crumb.title}</BreadcrumbPage>
83+
) : crumb.href ? (
84+
<BreadcrumbLink href={crumb.href}>{crumb.title}</BreadcrumbLink>
85+
) : (
86+
<span className="text-muted-foreground">{crumb.title}</span>
87+
)}
88+
</BreadcrumbItem>
89+
</Fragment>
8790
);
8891
})}
8992
</BreadcrumbList>

0 commit comments

Comments
 (0)