I have a navigation menu similar to Prismic's navigation. Some navigation has a drop-down menu and some doesn't; see the image below. How do I create it, and how do I fetch it with Nextjs 14? Thank you in advance!

Hey! There are many approaches you could take doing this. Actually, we have written a blog article on exactly how we did it for the Prismic website . Here's how I would build it right now: Create a single custom type called "Layout" with a tab named "Header". Inside the "Header" tab's SliceZone, …

Hi Samuelhorn, What about if some navigation parent doesn't have sub-navigation items? How do we build it?

Hi @solution.stack99 , I believe Samuel mentioned that above: [image] samuelhorn: with two variations: "Default" (containing label and link fields) and "WithSubMenu" (containing label and a content relationship field linked to the "Sub Menu" custom type below). The "Default" variation is yo…

I followed that tutorial but I don't know how to fetch the data as there are three slices for this navigation.

In your Next.js page or layout component, you can fetch the layout data. You'll likely want to make this query in your layout component or in each page component, depending on your architecture. Here's how you might fetch the layout data, including handling variations for menu items with and withou…

Thank you, Phi! I will try it out.

Hey @Phil Thank you for clarifying. I, too, followed the blog to the letter and got stuck fetching the data. It was not clear to me that we have to use GraphQuery for this. And I have two problems with this approach. Hope you can help me understand. 1. Problem: I found it weird that the tsx of the …

[image] Mega Menu - NextJS in 2024 Developing with Prismic Hello, You may check out my post; I created a two-level menu using GraphQuery: problem-of-fetching-data-of-content-relatioinship-using-graphquery I hope that helps.

it will be nice if we had a full video tutorial on how to implement this. Because this " How to Model a Multi-level 'Mega Menu' with Prismic " shows you how to create the needed slices but says nothing about the needed code to fetch the data

Hi @ransbort , What framework are you using? Here's an example in Next.js app router. Prismic Custom Type Example (navigation) Here’s how your navigation type might look: { "Main menu": { "type": "Group", "config": { "fields": { "label": { "type": "Text" }, "link_t…

Mega menu

Developing with Prismic

Phil (Phil Snow) July 2, 2024, 10:01am 14

Topic		Replies	Views
Mega Menu - NextJS in 2024 Developing with Prismic nextjs , graphquery	2	856	June 19, 2024
How to query multi level navigation? Developing with Prismic	3	622	November 2, 2021
Help Structuring Mega Menus with Prismic Developing with Prismic	3	831	July 1, 2022
Using GraphQL to Query Content Relationships from a Menu Singleton Developing with Prismic nextjs	8	1368	August 25, 2020
Problem of fetching data of content relatioinship using GraphQuery Developing with Prismic nextjs	7	352	June 24, 2024

Mega menu

Related topics