Best way to create a visual Mega Menu

What are you trying to accomplish
Hi, I’m wondering the best way of implementing a mega menu that is unstructured/variable between parent menu’s. Similar to how builder.io works

Below is a mega menu Item i want to apper when the user clicks the “platform” menu item.

I could do this in a very structured way, using data models but I’d like to be able to give the users flexibility in layout. How can I get them to visually edit this?

Could the megamenu be a section? Which is then referenced in a Navigation data model. How would this work RE editing?

I should add that the header/nav component is rendered “outside” of builder, in a common layout. The nav component will then query the Navigation Data model to retrieve nav items etc

Code stack you are integrating Builder with
*e.g. NextJS App

Hi @Simon

To implement a flexible mega menu with Builder.io in a Next.js app, you can consider the following approach:

  1. Create a Mega Menu Section:
  • In Builder.io, create a “Mega Menu” section that allows for flexible content layout. This section should have customizable content blocks or elements that users can edit visually.
  1. Reference in Navigation Data Model:
  • In your Navigation Data model, include a field that references the “Mega Menu” section. This field could be called something like “MegaMenuContent” and should allow you to link to the specific “Mega Menu” section for each parent menu item.
  1. Render the Mega Menu in the Header/Nav Component:
  • In your Next.js app’s header/nav component, query the Navigation Data model to retrieve the menu items and their associated “Mega Menu” section references.
  • When rendering the menu items, check if a “MegaMenuContent” reference exists for the selected parent menu item.
  • If it does, fetch and render the content of the linked “Mega Menu” section in the mega menu dropdown.
  1. Visual Editing:
  • Users can visually edit the “Mega Menu” content by going to the Builder.io editor and editing the content within the linked “Mega Menu” section.

This approach allows you to provide flexibility in layout while still maintaining structured data models. Users can visually edit the content of the mega menu sections in Builder.io, and your Next.js app can dynamically fetch and display this content when users interact with the navigation.

Make sure to set up the proper API integration between your Next.js app and Builder.io to fetch and render the content dynamically. Additionally, consider using conditional rendering to display the mega menu only when the “platform” menu item is clicked.

I hope this is helpful.

Thanks, @OmPrakash. This is exactly how I ended up doing it! Regarding the editing I ended up creating a page specifically for editing the mega menu section(s) but I don’t really like that as it means I have a page in my site that isn’t a real page. Now I think about it maybe I’ll check builder.isEditing and if false do some sort of redirect :man_shrugging:. Open to any other ideas in this area.

Thanks again for your reply.

Hi @Simon,

Your idea of checking builder.isEditing and implementing a redirect when it’s false sounds like a good alternative. It would streamline the editing process and maintain a cleaner structure.

Feel free to experiment and find the solution that best fits your preferences and workflow.

Thanks again for sharing your approach, and don’t hesitate to reach out if you have further questions or need assistance with anything else!