help center

On this page

Create a mega menu

Last Update: July 25, 2023


Mega menus give you the flexibility to create stylish menus for your website. The following article will walk you through the creation of a mega menu. For a comprehensive guide to all the options available in your mega menu, check out our article on the Menu widget. 

Mega menus require the activation of several experimental features. These include:

  • Flexbox Containers
  • Nested Elements
  • Menu

Note: Activating these features will replace the Nav Menu widget with two new widgets – the WordPress Menu widget (which functions like the Nav Menu widget), and the Menu widget.

Creating a mega menu

Note: You can put a menu anyplace on a page, but they are most commonly placed in the header and/or footer. In the example below, we’ll create a mega menu in a header. We’ll be using the Bread Bakery Website Kit.

To create a mega menu:

  1. Select create a new header using the Theme Builder.
  2. Drag the Menu widget to the header’s container (you could also add a new container to the header.)
    image 12 Create a mega menu 9
  3. Our menu has three top-level menu items. To create them, Items 1-3 need to be replaced.
  4. In the Content tab, click Item #1.
  5. In the Title text box, type in Home.
    image 13 Create a mega menu 11
  6. Now we need to link the menu item to the Home page. You can put in the URL of the Home page, but it’s best practice to use a dynamic link
  7. Click the dynamic tag icon.
    image 14 Create a mega menu 13
  8. For the Dynamic link choose Site>Internal URL
  9. Click Internal Link.
    image 15 Create a mega menu 15
  10. From the Type dropdown, choose Content.
    image 16 Create a mega menu 17
  11. Under Search and Select, start typing the name of the page you’re looking for – in this case Home. Select it when it comes up. 
    image 17 Create a mega menu 19
  12. Repeat this for the Our Breads and Our Story pages. 

The header looks like this:
image 18 Create a mega menu 21

Adding a design element

You can spruce up the menu by adding a design element.

  1. In the Content tab, under Menu Items, select Home.
    image 19 Create a mega menu 23
  2. Click the Dropdown Content switch. This switch is what turns the menu into a mega menu, allowing you to add all kinds of content to your menu items. By default, an arrow icon will appear next to the item.
  3. Click Home on the mega menu. The arrow next to the item will turn down and a content area will open up below the menu.
    image 20 Create a mega menu 25
  4. Drag an Image Widget into the content area.
  5. Select an image that will appear when a user hovers over the menu item.
    image 21 Create a mega menu 27
  6. Close the content area by clicking on the arrow.
  7. Repeat the above steps with the Our Bread and Our Story items.

By default, these images will appear when visitors hover over the menu items. You can’t see this while editing so you’ll have to preview the page to see the mega menu in action. 

Next Steps 

Now that you know the basics behind creating a mega menu, learn how to style a mega menu and how to create a multi-layered mega menu

Note: You cannot put a menu widget inside another menu widget (i.e. a mega menu inside a mega menu.)

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article