# Help Structuring Mega Menus with Prismic

**URL:** <https://community.prismic.io/t/help-structuring-mega-menus-with-prismic/10480>\
**Category:** Developing with Prismic\
**Created:** [June 30, 2022, 4:18pm UTC](https://community.prismic.io/t/help-structuring-mega-menus-with-prismic/10480 "2022-06-30T16:18:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![joshwcorbett](https://avatars.discourse-cdn.com/v4/letter/j/5f9b8f/32.png) [@joshwcorbett](https://community.prismic.io/u/joshwcorbett)\
**Post date:** [June 30, 2022, 4:18pm UTC](https://community.prismic.io/t/help-structuring-mega-menus-with-prismic/10480/1 "2022-06-30T16:18:09Z")

</div>

I’m currently working on a large e-commerce site and have integrated Prismic for dynamic content and various site configurations so we don’t need to hard-code.

Problem:  
We have a working mega menu that contains hard-coded content, but upon attempting to move this task to Prismic, we’ve found that Prismic's lack of deeply nested fields and repeatable groups of content within slices… it’s proven very difficult to strategize integration.

Needed Structure:

- Navigation (singleton type)
  - Navigation Item (repeatable)
    - Label (key text)
    - Label Path (key text)
    - MegaMenu (optional, non-repeatable)
      - Column (repeatable)
        - Label (key text)
        - Label Path (key text)
        - Menu (group)
          - Menu Item (repeatable)
            - Label (key text)
            - Label Path (key text)

      - Promos (group)
        - Promo (repeatable)
          - Image (media)
          - Label (key text)
          - Path (key text)

Given we are fairly new to Prismic, we’re running into roadblock after roadblock in creating a Prismic custom type that can accomplish this. Is there a solution or workaround we’re missing?

Thanks

---

<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:** [July 1, 2022, 10:00am UTC](https://community.prismic.io/t/help-structuring-mega-menus-with-prismic/10480/2 "2022-07-01T10:00:49Z")

</div>

@joshwcorbett There are many ways of modeling this structure. Are you using Slice Machine or the Legacy Builer?

Here's what I suggest. You'll have two Custom Types: Navigation and Mega Menu. Then you'll have Slices for the rest of the Navigation. Let's go over each one.

**Navigation** will be a singleton where you'll add Slices to link your mega menus:

```auto
└── Navigation (singleton)
    ├── label 
    ├── label_path
    └── Navigation Item (Slice)
        └── Repeatable zone
            ├── label
            ├── label_path
            └── mega_menu (Content Relationship)

```

The **Mega Menu** would be a repeatable type with two Slices, Column and Promos. The last thing we'd need to resolve is where and which types of links you wanna add to each level. For example, Links to other documents using Content Relationship fields links to the web, or links to media:

```auto
└── Mega Menu (Repeatable)
    ├── Column (Slice)
    │ ├── Non-repeatable zone
    │ │ ├── label
    │ │ └── label_path
    │ └── Repeatable zone
    │ ├── label
    │ └── label_path
    └── Promos (Slice)
        └── Repeatable zone
            ├── image
            ├── label
            └── label_path

```

---

<div class="post-metadata">

**Author:** ![joshwcorbett](https://avatars.discourse-cdn.com/v4/letter/j/5f9b8f/32.png) [@joshwcorbett](https://community.prismic.io/u/joshwcorbett)\
**Post date:** [July 1, 2022, 5:01pm UTC](https://community.prismic.io/t/help-structuring-mega-menus-with-prismic/10480/4 "2022-07-01T17:01:16Z")

</div>

Thanks for this solution! Currently having troubles returning the slices from the mega\_menu under each Navigation Item.

```auto
// Menu.vue
const {
  data: response,
  error,
  pending
} = await useAsyncData(
  'navigation',
  () => {
    const { client } = usePrismic()
    return client.getSingle(
      'navigation',
      {
        lang: 'en-US',
      }
    )
  },
  { lazy: true }
)
const { body: nav } = response.value?.data || []

```

As seen here no slices are returned from the above snippet.

 ![Screen Shot 2022-07-01 at 10.52.56 AM](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/4/4cb0fe1fa2d25fb4abcc2e8a25c192c0e3c0d86c.png)

```auto
// Navigation Structure
- Menu.vue // gets 'navigation' document
  - MenuItem.vue (renders for each Navigation Item) // receives each Navigation Item as a prop
    - Dropdown.vue // receives mega_menu as a prop

```

Ended up reading into the usage of `fetchLinks` but to no avail, and am unsure of how predicate can be used in this context should it be an applicable use case.  
If it helps, we're using Nuxt 3.

Thanks

---

<div class="post-metadata">

**Author:** ![joshwcorbett](https://avatars.discourse-cdn.com/v4/letter/j/5f9b8f/32.png) [@joshwcorbett](https://community.prismic.io/u/joshwcorbett)\
**Post date:** [July 1, 2022, 6:21pm UTC](https://community.prismic.io/t/help-structuring-mega-menus-with-prismic/10480/5 "2022-07-01T18:21:54Z")

</div>

Solved by using `fetchLinks` correctly.

```auto
const {
  data: response,
  error,
  pending
} = await useAsyncData(
  'navigation',
  () => {
    const { client } = usePrismic()
    return client.getSingle(
      'navigation',
      {
        lang: 'en-US',
        fetchLinks: 'mega_menu.body'
      }
    )
  },
  { lazy: true }
)
const { body: nav } = response.value?.data || []

```

For anyone else looking for a solution, note the usage of `fetchLinks` asking for `mega_menu.body`