What is a Mega Menu?
A mega menu is a large, multi-column dropdown menu that helps users easily navigate complex websites by grouping related links and content together in an organized, scannable format.
Key Benefits:
✅ Multi-column layout – Displays categories and subcategories side by side.
✅ Rich content – Supports images, icons, and descriptions for enhanced usability.
✅ Improved navigation – Helps users quickly find what they’re looking for without excessive clicking.
Steps to Build a Custom Mega Menu
1. Create a Custom Mega Menu Page
Log into your Prismic CMS repository.
Click "Create a New Page" and select "Custom Mega Menu" from the list.
Name the page "[Your Menu Name] Custom Mega Menu" and create a Unique Identifier (UID).
Example: If your menu is called "About Us", set the UID to "about-us".
2. Add a Slice to Your Custom Mega Menu
In your new Custom Mega Menu document, click "Add a Slice".
Choose between:
Group Link – For text-based links.
Group Image – For image-based links.
Fill in the required fields:
Group Link Default Label – This will be the title of the Custom Mega Menu on your ecommerce site.
Add a Repeatable Zone:
Enter the Label (text for the link).
Enter the Link (destination page in your Prismic repository).
If you need to create new pages, refer to this Help Center article.
Continue adding Repeatable Zones for all sub-tabs in your Custom Mega Menu.
Click Save & Publish.
Steps to Add Your Custom Mega Menu to Main Navigation
Go back to your Prismic document repository.
Use the search bar to find "Main Navigation" and open the document.
Locate where you want the Custom Mega Menu to appear.
Click the "+" button to add a new entry.
Enter the Label for your Custom Mega Menu.
In the External Link field:
Click "Choose Link Type" and select "Link to Prismic Page".
Select the Custom Mega Menu page you just created.
Click Save & Publish.
You're Done! 🎉
Your new Custom Mega Menu will now appear in your main navigation!