This feature is being gradually released to all users and may not be available for your account yet.
Note
This information is specific to the Editor 2.0, formerly known as the All-Flex Editor. To identify your current editor version, see How to Identify the Editor Version Your Site Uses .
A Mega Menu is a type of navigation menu commonly used on websites to organize and display a large amount of content or options in a structured, visually appealing way. Unlike a traditional drop down menu that displays a single column of links, Mega Menu expands further horizontally. Common use cases include eCommerce sites with many product categories, travel sites with many destinations, or services businesses that offer a wide range of services.
Mega Menu is enabled from the Navigation Links widget and creates a new section linked to a navigation item. This allows the user to edit and design the new section as they would any other section such as adding a widget or creating a structure/layout. Any navigation item can be turned into a Mega Menu.
Important considerations:
-
The Mega Menu can only be added to navigation items that aren’t sub items or that include sub items of their own.
-
Only supported on desktop screen size.
To create a Mega Menu:
-
If you do not already have a Navigation Links widget added, you need to add one. In the side panel click Widgets. Search for Navigation Links, then drag and drop it onto the canvas.
-
Currently, the Mega Menu can only be enabled on desktop if the Navigation Links widget is in the header and has a horizontal layout. Not supported on mobile.
-
-
Click the Navigation Links widget to open the floating bar and select Manage Links.
-
At the top of the modal, For What should navigation items include? select Custom Links.
-
Click to select the desired item. On the right side of the modal, select Mega menu. This turns the item into a Mega Menu.
-
Enter a name for your Mega Menu. Repeat steps 4 and 5 for each item you want to turn into a Mega Menu.
-
Drag and drop the existing items into the desired order and nesting. Note that Mega Menu can only be added to navigation items that are not sub items or include sub items of their own.
-
Click Edit mega menu to make design changes. The design changes only apply to the current section you are editing and not the sections that contain other Mega Menus.
For more information about configuration and design options for the Navigation Links widget, see Widget: Navigation Links.
To open the Mega Menu for editing you can:
-
Hover over the Navigation widget and when the Mega Menu section appears, click either the Mega Menu section or the Mega Menu navigation item.
-
Click the Navigation Links widget and click Manage Links.
-
Open the Layers panel and click to open the desired Mega Menu section.
You can add a link to a Mega Menu section by adding any linkable widget. Following are a few examples of how you can add links to a Mega Menu section:
-
Add a Button or Icon widget and add a link to it.
-
Add the Photo Gallery widget and connect it to a collection.
-
If you want to display an eCommerce catalog, you can add the Product Gallery widget and connect to the product catalog or a particular category.
-
Add a Navigation Links widget and set up custom links.
To delete a Mega Menu, delete the Mega Menu item from the Navigation widget.
Following are several other actions that will delete a Mega Menu that you should be aware of:
-
Deleting the Navigation Links widget.
-
Deleting the container that includes a Navigation Links widget with a Mega Menu.
-
Changing the header preset.
-
Switching between basic and advanced header types.
Following are the current Mega Menu limitations:
-
Only available on desktop screen size.
-
Mega Menu can only be used if the Navigation Links widget is in a horizontal layout and inside the header.
-
Not supported on mobile.
-
If you duplicate or copy and paste a Navigation Links widget with a Mega Menu, the Mega Menu will not be duplicated.