Gatsby: Dynamically-Rendered Navigation Tutorial

[giraffesyo]

I see there's a stub for Dynamically-Rendered Navigation.

By this do you mean a nav component that keeps track of what state it is in based on the current page or state of another component? If so, I think I could work on this tutorial.

[KyleAMathews]

I think the idea there was for navigation built automatically from the site's pages data e.g. you have a number of team member pages and whenever someone new joins, the menu is updated automatically.

[imshuffling]

Any examples of this working somewhere? thanks

[cdvillard]

@imshuffling, I don't know of anyone who has built this yet, but it's something commonly available in other static site generators. Wintersmith and Jekyll are two such generators that generate navigation using template engines like nunjucks and handlebars.

[imshuffling]

@cdvillard manage to achieve what I wanted in the end. Using Contentful.

E.g I have 3 content types (yes poorly named Template 1, 2, 3...)

Rough menu structure as below.

-- Template 1
-- Template 1
-- Template 1
---- Template 2
---- Template 2
-- Template 1
---- Template 3
---- Template 3
---- Template 3

I then have a content type called "Navigation" which is a multi reference field allowing you to add Template 1 pages, this will create our top level nav.

To get the nested pages I simply have a reference field called "ChildPages" on each Template 1 page

And now the graphQL query which i have in my layout.js file

       query LayoutQuery {
         contentfulNavigation {
           navigationItem {
             menuTitle
             title
             slug
             childPages {
               ... on ContentfulTemplate2 {
                 menuTitle
                 title
                 slug
                 id
               }
               ... on ContentfulTemplate3 {
                 menuTitle
                 title
                 slug
                 id
               }
             }
           }
         }
       }

Hope this helps someone.

FYI I'm using Gatsby V2.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.

[CharlieDieter]

It would be pretty easy to do this with gatsby-source-filesystem. I added this to gatsby-config.js:

 {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/src/pages`,
      name: 'pages',
    },
},

Then in my layout component I create a StaticQuery:

<StaticQuery
        query={graphql`
          query {
            allSitePage {
              edges {
                node {
                  path
                }
              }
            }
          }
        `}
        render={data => {
...

Then filter out the paths you don't want (like 404 and test). That's the best way I can figure out for now.