TanStackT
TanStack3y ago
2 replies
rubber-blue

Breadcrumbs

I'm struggling to find the right solution to create breadcrumbs in the following route structure:

- root:
- /segment
- /segment/$id
- /segment/$id/$number

All routes are direct children of root.

In the root route I'd like to create the following breadcrumb:
When match is /segment/$id: "segment > id"
When match is /segment/$id/$number: "segment > id > number"

The recommended way of doing breadcrumbs is by passing titles in the routeContext, and in my root route filter for title props and render them in my breadcrumbs. But because all routes are direct children of root /segment and /segment/$id will not show up in matches when /segment/$id/$number is active.

Has anyone solved a similar issue?
Was this page helpful?