Managing Breadcrumbs with Contentstack

Contentstack simplifies the process of creating breadcrumbs for easy navigation. To create breadcrumbs in Contentstack, follow the below steps:

Create a separate content type named Navigation of type "Content Block" as "Multiple". Add Title and Link fields in it as shown below:

image5.png

Then, for each "page" in the content type, you have to add a reference field named "Breadcrumb" with multiple as the selected option that refers to the Navigation content type.

image1.png

You can then define your breadcrumb hierarchy while creating entries in your content type. Consider Products for example:

image4.png

So, when you render the page in your front end layer, you have to get this entry by including reference field Breadcrumb. Refer to our Content Deliver API documentation for more details.

For example, when you run the GET API call: https://cdn.contentstack.io/v3/content_types/products/entries?environment=production&locale=en-us&include[]=breadcrumb

You will get the reference field array as follows:

image3.png

This is how you can render them on the page and breadcrumb navigation will look like:

image2.png

Was this article helpful?
top-arrow