Best way to create a visual Mega Menu

Visual Editor Help
,
1

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.

image
image2190×622 159 KB

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

2

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.

3

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.

4

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!

5

@OmPrakash Would you be able to share a screenshot of this configuration? I’m new to Builder and I’m not following your statement of

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.

Would this cause a circular reference?

6

Hi @brdev,

I can’t do a screen shot right now, but essentially I have a menu item with the following fields:

  • label - Text, what is displayed
  • page (optional) - a reference to a page object (where I derive the page url)
  • url (optional) - mainly used for external pages
  • megaMenu (optional) - a reference to a section object called “mega menu”
  • sub menu (optional) - a list of Menu Items. I do this mainly for mobile if the mega menu is not appropriate and I may also use it to populate menu items in the mega menu to keep things in sync

Another way I have done meg menu which works if they are all the say layout, is to just add the fields to the menu item itself and take care of the design server side.

I hope this helps?

7

Thanks for the reply. I think I get it, but would love to see this as a tutorial on Builder!