Add the Navigation

Welcome to the fifth article in the getting started with Prismic and Gatsby tutorial series. We'll be walking through the steps required to convert the top navigation from hard-coded to use content from Prismic.


🕙 Before reading

If you haven't already gone through the first step, we recommend you start there to download the project, launch a Prismic repository, and install the required plugin and dependencies.

Content modeling

Run npm start to re-launch your site. There's a navigation bar at the top of the page that we'll keep as a static top-level component. Let's review the fields used to build it:

Navigation

API ID: top_navigation

A Group field to handle our links since we don't know how many we might need in the future.

Link

API ID: link

A Link field for internal content.

Text

API ID: link_label

A Rich Text field to add the link's labels.

The model for this banner is already in your Prismic repository. Click on Custom Types, and see the content modeling of the Navigation type.

Then, click the Documents button and select the Navigation document to view the live version. It should look something like this:

For more complex use cases where you need to add sub-navigation within the main navigation, you could use Slices. Add links in both the repeatable and non-repeatable zone to make nested links.

⚠️ No need to modify the Custom types

You do not need to change anything in the Custom Types of your repository. Just take a look at how it is set up. If you wish to change anything, we highly recommend you wait until the end of this step-by-step tutorial and read the dedicated plugin configuration article.

Click on Add a new element in top_navigation to add a new link to the navbar. Now that we know how to create new links let's add them to our Gatsby project.

1. Test the query

Run the project with npm start. Next, open the GraphQL Playground at http://localhost:8000/__graphql and paste this GraphQL query:

Copy
{
  prismicNavigation {
    data {
      top_navigation {
        link {
          url
        }
        link_label {
          raw
        }
      }
    }
  }
}

Run the query by pressing the "play" button ▷ at the top to see the query results on the right.

2. Render the results

We're going to query data with useStaticQuery in the header component to get the document for the single document of the type Navigation. Since this component is in the Layout that wraps all the page files, it will appear on all our pages.

Open your Header.js component found in the 〜/src/components folder replace the existing code of your files in your project with the following:

Copy
// Header.js file 

import * as React from 'react'
import { Link, graphql, useStaticQuery } from 'gatsby'
import { RichText } from 'prismic-reactjs'

export const Header = ({ isHomepage }) => {
  const queryData = useStaticQuery(graphql`
    {
      prismicNavigation {
        data {
          top_navigation {
            link {
              url
            }
            link_label {
              raw
            }
          }
        }
      }
    }
  `)

  const navigation = queryData.prismicNavigation
  const topNav = navigation.data.top_navigation

  const homepageClass = isHomepage ? 'homepage-header' : ''

  return (
    <header className={`site-header ${homepageClass}`}>
      <Link to="/">
        <div className="logo">Example Site</div>
      </Link>
      <nav>
        <ul>
          {topNav.map((navItem, index) => {
            return (
              <li key={`link-${index}`}>
                <Link to={navItem.link.url}>
                  {RichText.asText(navItem.link_label.raw)}
                </Link>
              </li>
            )
          })}
        </ul>
      </nav>
    </header>
  )
}

Now when you refresh your site, your top navigation will be pulling its content from Prismic!

Link Resolving

You may or may not remember that we added this to our project back in the second article in the series. If it didn't make any sense, then, hopefully, it is more clear now.

The Link Resolver is what populates the url field.

Next steps


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.