Breadcrumbs with static data
Not a full project, but I'm really proud of my breadcrumbs implementation:
<div className="hidden md:flex items-center pl-2">
<Breadcrumbs.Root className="my-auto">
{useMatches()
.map((match) => match.staticData.breadcrumb)
.filter(Boolean)
.map((breadcrumb, i, arr) => (
<Fragment key={breadcrumb.to}>
<LinkBreadcrumb {...breadcrumb} activeOptions={{ exact: true }} />
{i < arr.length - 1 && (<Breadcrumbs.Separator />)}
</Fragment>
)
)}
</Breadcrumbs.Root>
</div> <div className="hidden md:flex items-center pl-2">
<Breadcrumbs.Root className="my-auto">
{useMatches()
.map((match) => match.staticData.breadcrumb)
.filter(Boolean)
.map((breadcrumb, i, arr) => (
<Fragment key={breadcrumb.to}>
<LinkBreadcrumb {...breadcrumb} activeOptions={{ exact: true }} />
{i < arr.length - 1 && (<Breadcrumbs.Separator />)}
</Fragment>
)
)}
</Breadcrumbs.Root>
</div>
