How can we implement a breadcrumb navigation in Prismic?
Hi @xbyx, thanks for reaching out about this. I recently created a breadcrumb component for my Next.js app. My Article type has a Content Relationship field to specify the article’s parent document: parent_page. So basically I recursively query the article’s parent document then the next parent document until I have the whole chain, then I show the breadcrumbs. This might end up being a number of queries to Prismic, so I decided to do this client-side to not slow down the initial page load.
Here’s what my component looks currently: Breadcrumbs.js (1.7 KB).
Let me know if you have any questions about this.
1 Like
hi @Levi
We are looking into implementing breadcrumbs with prismic, has the recommendation evolved since your post in april ? There seems to be a couple issues in the approach you outlined, I was wondering if you encoutered these issues and maybe found better workarounds …
- as far as I’m aware, useEffect will not run in case of serverside rendering which means the breadcrumb will not be rendered for non js enabled google bots, hence loosing some SEO juice.
- requests will be chained, thus the total rendering time will be the sum of all the requests.
regarding the last point, I did a quick test on my laptop, on a FTTH internet connection
- I observe a 25ms ping to my prismic cdn host
- I observe below 10ms ping to 8.8.8.8
- I observe around 350ms for a single http api query based on a document uid
so resolving a 3 level breadcrumb would take over a second to resolve on a good internet connection, on a mobile where network quality varies wildly and cpu power is much lower, it is hard to tell how long the loading and rendering would take. meaning the breadcrumb would finally appear after some unpredictable time after the user has seen the rendered page …
I would be very interested in alternatives 
Hi @jean.helou
You are correct with the issues that you point out. These are definitely limitations with the approach that I’ve presented.
If you know that your breadcrumbs will never go further than 3 levels, then you can use GraphQuery to retrieve all levels of the breadcrumbs when you query the page document.
If there are more than 3 levels, then GraphQuery won’t work and you’ll have to take an approach like the one I presented. Other than that, I would also love to hear what anyone else has done to solve this issue! If anyone in the community has another approach please share it here 
This issue has been closed due to inactivity.