How to create a Mega Menu

A Mega Menu is a navigation menu structure that organizes your website's pages and links by grouping them into distinct categories. A mega menu is built with Groups, or non-clickable containers that hold pages. Here are the steps to add a mega menu to your website:

Enable Mega Menus in the Header Settings

Log in to your site and click on the Header Settings icon (located along the left edge of your site's header). Once the Header Settings dialog appears, locate the Nav Menu Drop-Downs setting. Then, choose the Mega Menu option.

NOTE: Some website themes will offer Mega Menu as your only option. Other themes will provide the choice between a Small Mega Menu and a Large Mega Menu.

The difference is simple: a Large Mega Menu will display at a longer width underneath your navigation bar than a Small Mega Menu will display.

Once you've enabled the Mega Menu, click Save at the bottom of the Header Settings dialog. Then, once you've set up your Mega Menu, be sure to click the green checkmark icon to Publish your changes to your public-facing website (pictured below).

Add groups to the Site Map Editor

After you've enabled the Mega Menu, click on Site Map in the white Admin Toolbar to open the Site Map Editor. Then, locate the Group icon in the Site Map Toolbar. Drag and drop the Group icon into the Site Map Editor. You will then be prompted to enter a name for the new group. Once entered, click Save.

To create a Mega Menu with multiple columns, You'll need to add at least 2 groups within the top-level page or top-level group.

Drag and drop pages into your groups

Next, drag and drop any new or existing pages or links into the group (illustrated below). Once you've finalized your changes, click Save, then Save/Exit.

Click Edit Website in the blue Admin Toolbar to return to your homepage and view your newly created Mega Menu!

If you don't see multiple columns for your Mega Menu, double check that a "mega menu" option is selected in your Header settings (step 1) and that you've added at least 2 groups within the top-level navigation item (step 2).

Best practices for creating Mega Menus

1

Drop the Group at the top or bottom of a main navigation group

When adding a new group in the Site Map Editor, you may see the following error message: Groups cannot exist between pages/links.

If you see this error message, you must drop the Mega Menu Group icon at the top or bottom of a top-level navigation item (as illustrated above). Once you have created multiple groups, you can drag and drop them to rearrange their order.

2

Put all your pages into groups

Mega Menus work best when all pages within a main navigation item are part of a group. Having "floating" pages (i.e., pages that aren't part of a Group) can cause confusion for your visitors. Given the way groups are distributed in a mega menu, the "floating" pages can appear to be part of the nearest group (illustrated below).

3

Create more than one group

Similarly, it's best to have at least two Groups within a top-level main navigation item (illustrated below). Having only one group doesn't create as clear of a separation between categories.

Related: The art of building an awesome site map

Make your site map the best it can be! Check out The art of building an awesome site map on the eCatholic blog.