# How to query multi level navigation?

**URL:** <https://community.prismic.io/t/how-to-query-multi-level-navigation/7664>\
**Category:** Developing with Prismic\
**Created:** [October 29, 2021, 4:16pm UTC](https://community.prismic.io/t/how-to-query-multi-level-navigation/7664 "2021-10-29T16:16:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dfmkraaijeveld](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dfmkraaijeveld/32/2546_2.png) [@dfmkraaijeveld](https://community.prismic.io/u/dfmkraaijeveld)\
**Post date:** [October 29, 2021, 4:16pm UTC](https://community.prismic.io/t/how-to-query-multi-level-navigation/7664/1 "2021-10-29T16:16:11Z")

</div>

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

 ![](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/b/b67227ca24c276f54376ff8911c9af8c9ffdf850.jpeg)

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?

```auto
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](https://www.codepile.net/pile/OM5NKXzx) Mega Menu JSON  
[CodePile | Easily Share Piles of Code](https://www.codepile.net/pile/79pz7RvQ) Main Navigation JSON

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [October 29, 2021, 10:11pm UTC](https://community.prismic.io/t/how-to-query-multi-level-navigation/7664/2 "2021-10-29T22:11:14Z")

</div>

Hey there @dfmkraaijeveld, thanks for reaching out.

There are many ways of building the [content modeling](https://prismic.io/docs/core-concepts/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](https://www.codepile.net/pile/r6Ly09bB) and [Mega menu](https://www.codepile.net/pile/onvJvynm). And here's an [example query](https://www.codepile.net/pile/JVbGK1ZG) for the main nav.

---

<div class="post-metadata">

**Author:** ![dfmkraaijeveld](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dfmkraaijeveld/32/2546_2.png) [@dfmkraaijeveld](https://community.prismic.io/u/dfmkraaijeveld)\
**Post date:** [November 1, 2021, 6:21pm UTC](https://community.prismic.io/t/how-to-query-multi-level-navigation/7664/4 "2021-11-01T18:21:22Z")

</div>

Thanks! Everything works like expected 🙂

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [November 2, 2021, 3:38pm UTC](https://community.prismic.io/t/how-to-query-multi-level-navigation/7664/5 "2021-11-02T15:38:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [November 3, 2021, 3:38pm UTC](https://community.prismic.io/t/how-to-query-multi-level-navigation/7664/6 "2021-11-03T15:38:32Z")

</div>

closed on November 3, 2021, 3:38pm UTC as resolved,  flag & select 'Something Else' to reopen.

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

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 12:01pm UTC](https://community.prismic.io/t/how-to-query-multi-level-navigation/7664/7 "2021-12-09T12:01:15Z")

</div>

Opened on December 9, 2021, 12:01pm UTC