Gatsby + Kontent - navigation and breadcrumbs

Question

UPDATE

Digging a little deeper into the Gatsby docs I've found what looks like some potential solutions in:

• https://www.gatsbyjs.org/packages/gatsby-plugin-breadcrumb/#breadcrumb-props
• https://www.gatsbyjs.org/docs/creating-dynamic-navigation/#using-the-header-component-to-display-the-navigation

Still tinkering with my content types in Kontent and figuring out the GraphQL bit.

=============

ORIGINAL:

I'm transitioning to the use of JAMStack and headless CMS from more traditional out-of-the-box CMS solutions.

While playing around with Gatsby and Kontent trying to build a proof of concept for a migration, I've got stuck on how navigations and breadcrumbs can be generated, which I've taken for granted with a traditional CMS content hierarchy.

I've read through some articles and gradually getting the concept of using content types to build a navigation.

How does that pull together and generate the links though from an otherwise flat content hierarchy?

eg www.example.com/some/deep/linked/page

Thanks

Answer 1

I've just moved over to Kontent from traditional CMS frameworks, so I know how you feel! I presume you have read the Kontent tutorial on navigation ? Option C gives you the traditional hierarchical CMS content tree with the linked items on the navigation item content type. That allows menus to be built easily enough.

In Gatsby I've personally just used URL slugs as the paths for the pages to create. This is done in your gatsby-node.js file where you can use GraphQL to query content and then create nodes like this:

_.each(result.data.allArticles.nodes, node => {
  createPage({
    path: `/articles/${node.elements.article_url_slug.value}/`,
    component: slash(articleTemplate),
    context: { slug: `${node.elements.article_url_slug.value}` },
  })
})

As long as your content editors maintain the slugs this will work. If you want to generate paths automatically based on the menu structure you could extend the navigation item content type by adding a linked item for the content item, perhaps instead of the URL field. Then when creating nodes you could loop through your navigation tree and construct a path as you go based on the item titles, looking up the type of the content item so you can use the appropriate component and pass it the required context.

You could then use the same hierarchy in a breadcrumb component - you'd just need to search through the navigation items for the current item and then step back up the tree. Make sense?

Whilst it can be frustrating at first to have to build all this infrastructure, I like the total freedom and the ability to choose the right approach for the specific needs of the project.