If you want to create a mega menu in Divi 5, the basic idea is simple: start with a dropdown and turn it into a larger, more structured navigation panel.

A regular dropdown works well when you only need to show a few links. But once you have many links under one top-level item, a standard dropdown can start to feel cramped and harder to scan.

That is where a mega menu becomes useful. Instead of showing one narrow list of links, it opens a wider panel where links can be grouped into columns and organized more clearly.

In this tutorial, you’ll build a desktop mega menu using only native Divi 5 features. We’ll continue with the same Link + Dropdown approach used in the previous dropdown menu tutorial, but this time we’ll turn the dropdown into a multi-column mega menu.

Final Result

By the end of this tutorial, you will have a desktop mega menu that opens from one top-level navigation item.

The example uses a simple horizontal navigation with one parent item that triggers a wide dropdown panel. Inside the panel, we’ll create three groups of related links, each with its own heading.

This gives us a realistic mega menu example without rebuilding a complete header from scratch.

Before You Start

To follow along, you’ll need a site running Divi 5. If you are still on Divi 4, start with our Divi 5 upgrade and migration tutorial. If you only want to try the steps first, you can also use the live demo of Divi 5.

Table of Contents

1. Step 1. Create a Simple Navigation Row
2. Step 2. Add the Dropdown to the Parent Item
3. Step 3. Build the Mega Menu Structure Inside the Dropdown
4. Step 4. Add the First Group Content
5. Step 5. Style the Group Heading and Link
6. Step 6. Duplicate the Links and Groups
7. Step 7. Align the Mega Menu
8. Step 8. Adjust the Width and Spacing
9. Step 9. Replace the Placeholder Content
10. Step 10. Set the Mega Menu to Desktop Only
11. When to Use a Mega Menu
12. Conclusion

Step 1. Create a Simple Navigation Row

Start by creating the basic structure that will hold the navigation example.

Add a Section and insert a Row for the navigation. Inside that row, create a simple horizontal setup for the menu items using a Group module with Link modules as items.

You can keep this example minimal. For this tutorial, we’ll use a few top-level items such as:

• Home
• About
• Services
• Contact

Only the Services item will open a mega menu. The other links are included to make the navigation look more realistic.

Add text to each item and style the top-level links in the Link module settings. At this stage, focus only on creating the basic navigation layout.

Step 2. Add the Dropdown to the Parent Item

Next, choose the top-level item that will open the mega menu. For this example, we’ll use the Services item.

Open the Services Link module, go to the Elements section, and insert a Dropdown module as a nested element inside it.

If you followed the previous dropdown tutorial, this setup will feel familiar. A mega menu starts the same way, with a parent item and a dropdown. The main difference is how the dropdown content is structured.

Step 3. Build the Mega Menu Structure Inside the Dropdown

Now we can turn the dropdown into a mega menu container.

Open the Dropdown module and start adding the internal structure. In this example, we’ll use multiple Group modules to create the different sections of the mega menu.

Each Group module will become one column inside the mega menu panel. This gives the dropdown enough structure to hold several groups of related links side by side, instead of one narrow list.

Step 4. Add the First Group Content

Now that the first Group module is inside the dropdown, we can build the content pattern for one mega menu column.

For this example, each group will include a heading followed by several related links. We’ll build and style the first group first, then duplicate it later to create the remaining columns.

In the first Group module, add a heading and one link.

For the group heading, use a Text module. This heading does not need to be a link.

For the menu item, use a Link module.

Building one group first keeps the process easier to manage. Once the heading and link are styled, you can duplicate them instead of repeating the same styling work for every item. Alternatively, you can save the heading and link styles as presets and apply them to the other headings and links later.

Step 5. Style the Group Heading and Link

Next, style the heading and the first link before duplicating them.

Start with the heading. Open the Text module settings and go to Design → Text. Set the text color to white for better contrast, make it uppercase and bold, and set the font size to 18px.

To separate the heading visually from the links add a semi-transparent bottom white border in Design → Border. Then add 10px bottom padding in Design → Spacing.

Now style the first link.

Open the Link module settings. In Content → Background, set the default background color to white with 15% opacity. Then set the hover background color to white with 25% opacity.

Next, go to Design → Text, set the link text color to white, and set the font size to 18px.

Finally, go to Design → Spacing and set the top and bottom padding to 10px, and the left and right padding to 14px.

This gives the menu items enough visual weight while keeping the design clean and easy to scan.

Step 6. Duplicate the Links and Groups

Now that the first heading and link are styled, you can use them as reusable elements for the rest of the mega menu.

First, duplicate the Link module inside the first group until you have the number of items you need. For this example, we’ll use four links in the first group.

After the first group is complete, duplicate the entire Group module twice to create three groups inside the mega menu dropdown.

By default, the groups will stack vertically. To align them horizontally, open the Dropdown module settings, go to Design → Layout, and set Layout Direction to Row.

This turns the dropdown content into a multi-column layout. Each Group module now works as one column inside the mega menu panel.

Step 7. Align the Mega Menu

Because a mega menu panel is wider than a regular dropdown, its alignment is more noticeable.

By default, the dropdown is aligned to the left. With a three-column mega menu this can make the panel extend too far to one side, especially when the parent item is not centered in the navigation.

To center the panel, open the Dropdown module settings, go to Design → Dropdown, and select Center for the Dropdown Alignment field.

Note that the dropdown is aligned relative to its parent Link module, not the full desktop navigation container. In this example, the mega menu is centered under the Services item.

Step 8. Adjust the Width and Spacing

Now that the mega menu is aligned and the column structure is in place, adjust the width and spacing so the panel has enough room to breathe.

This step is mainly about three things:

• the width of each link group
• the padding inside the dropdown panel
• the gap between and inside the groups

Adjust the Group Width

You can control the mega menu width directly in the Dropdown module’s Sizing settings by adjusting the Width and Max Width fields. That can work well if you want the dropdown panel to follow a specific fixed or responsive width.

For this example, we’ll control the width mainly through the Group modules, spacing and padding. This gives us more direct control over how the columns sit inside the dropdown panel.

If you set the dropdown width too broadly using percentage or viewport units, the content may feel squeezed on smaller desktop screens or too spread out on larger ones. By adjusting the group widths and gaps directly, it is easier to keep the columns balanced.

The overall width of the mega menu panel will depend on the combined width of the link groups, the spacing between them, and the padding inside the dropdown.

If the link groups feel too narrow, increase the width of each Group module in the Sizing settings. Normally, the Group module width adjusts based on the length of the link text, but you can also set a fixed or dynamic width manually.

Set the same width for all Group modules if you want the columns to look consistent.

Add Padding Inside the Dropdown

Next, add spacing around the inside edges of the mega menu panel.

Open the Dropdown module and go to Design → Spacing, then adjust the padding values as needed.

Adjust the Gap Between Columns

To control the space between the link groups, open the Dropdown module and go to Design → Layout.

Increase the Horizontal Gap value until there is clear visual separation between the columns.

Adjust the Spacing Inside Each Group

Finally, adjust the vertical spacing between the heading and links inside each group.

Open a Group module, go to Design → Layout, and adjust the Vertical Gap value. Repeat this for the other groups for consistency.

Because the Group module’s vertical gap affects all elements inside the group, it also controls the spacing between individual links. If you need different spacing between the heading and the first link, combine the Group module’s Vertical Gap setting with the spacing settings of the heading or Link modules.

Step 9. Replace the Placeholder Content

At this point, the mega menu structure and styling are in place. Now replace the placeholder content with the actual headings, link text, and URLs you want to use on your site.

For example, for a Services mega menu your groups could be:

• Design
• Marketing
• Maintenance

Update each group heading first in the Text module settings.

Then go through the Link modules and replace the temporary labels with the final menu item text. After that, add the correct URL for each link.

This is also a good moment to review the menu structure. If one group feels too crowded, if some labels are too long, or if a link does not clearly belong in its group, adjust the content before publishing the menu.

Step 10. Set the Mega Menu to Desktop Only

This tutorial focuses on a desktop mega menu, so the final step is to hide this navigation layout on tablet and phone.

Open the settings for the main Group module that contains the desktop navigation. Then go to the responsive visibility settings and disable it on tablet and phone.

This keeps the desktop mega menu from appearing on smaller screens, where a large multi-column dropdown would usually be difficult to use.

Later, you can create a separate mobile menu layout designed specifically for smaller screens.

When to Use a Mega Menu

A mega menu is useful when you have more links than a regular dropdown can comfortably handle.

It works well when:

• one top-level item needs to contain many related links
• those links can be grouped into clear categories
• visitors need to compare or scan several options quickly

It is usually not necessary when:

• the submenu only contains a few links
• the links do not need separate categories
• a simple dropdown is already easy to understand

In other words, use a mega menu when it makes navigation easier to browse, not just because it gives you more space.

Conclusion

A mega menu is useful when a regular dropdown no longer gives your navigation enough structure.

In this tutorial, you learned how to create a mega menu in Divi 5 using native Link, Dropdown, Group, and Text modules. Instead of placing all submenu links in one vertical list, you organized them into a wider panel with clear groups and headings.

This makes larger navigation sections easier to scan and gives you more control over how related links are presented.

From here, you can place this mega menu inside a full Divi 5 header, add the sticky header effect if needed, or create a separate mobile menu layout for tablet and phone. If you want to build the simpler version first, start with the dropdown menu tutorial.