frontarm/navi

Implementing Breadcrumbs

Roybie opened this issue · 5 comments

I want to add breadcrumbs to the top of each of my pages but I'm not sure if there is a way to do this not manually for each page.

I thought about having breadcrumbs included using withView and adding breadcrumb data using withContext but nested routes cannot update the parent context.

Is there someway I can add the data to routes and get it with the useCurrentRoute() hook?
Using getData or something will just overwrite parent data with the same name.

@jamesknelson
Yeah I tried that, but I wanted to use withView near the top to render the breadcrumbs. If I pass the context as a prop at the top, any nested routes calling withContext won't be reflected in the context passed to the breadcrumbs view component.

If possible I'd like to avoid using withView to add the breadcrumbs in multiple places deeper in nested routes.

The issue is that routes are designed to be independent of their parents, which makes it difficult to do something like this cleanly.

One possible hack would be to add an array to context, and mutate it with push in the route instead of using concat. This should work atm, because the full route is re-rendered each time anything changes -- although I must emphasize that this is a bit of a hack.

That does indeed work. Hacky may have to suffice for now. Thanks!

Great! Closing this for now.