How to query multi level navigation?

Developing with Prismic
1

Hi! I am using Gatsby and Prismic, and I do want to make my menu customizable within Prismic. The menu looks like this:

1862×857 190 KB

The first menu item is acting like a button which will open op the menu.

Right now I did build two custom types: one for the main navigation and the second one for each mega menu. I am curious if the way I am querying the navigation is the correct way of doing this?

query MyQuery {
  prismicMainNavigation(uid: {eq: "main-navigation"}) {
    data {
      body {
        ... on PrismicMainNavigationDataBodyTab {
          id
          primary {
            level_1_link_label
            slug {
              url
            }
            mega_menu {
              document {
                ... on PrismicMegamenu {
                  id
                  data {
                    body {
                      ... on PrismicMegamenuDataBodyGroupOfLinks {
                        id
                        items {
                          category_link_label
                          category_link {
                            raw
                          }
                        }
                        primary {
                          group_label
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

I am a total Prismic noob and I couldnt found clear enough(for me) docs about how to make a mega menu, so I hope someone could have some tips how to optimise this.

CodePile | Easily Share Piles of Code Mega Menu JSON
CodePile | Easily Share Piles of Code Main Navigation JSON

2

Hey there @dfmkraaijeveld, thanks for reaching out.

There are many ways of building the content modeling of this menu. You can economize Slices in the main navigation Custom Type and use a Group field instead. Then inside the main navigation Custom Type, you could create a new Slice that covers the image section. That Slice could contain the main Image field, with its label and link for the highlight, and another one but in the repeatable zone, in case you want to add more than two elements.

Here're our suggestions: Main navigation and Mega menu. And here's an example query for the main nav.

4

Thanks! Everything works like expected :slight_smile:

5

I'm glad to hear that. Let us know if you need help with anything else!

6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.