Creating a Responsive Menu in Divi 5: Why the New Link and Dropdown Modules Matter

Affiliate disclosure: techivilla.com may earn a commission if you buy Divi through links on this page, at no extra cost to you. We only recommend tools we would build with ourselves.

In older Divi, your header was essentially one Menu module: it pulled a WordPress menu and rendered it with limited styling control. Divi 5 takes a different approach. Navigation is now composed from smaller modules — chiefly the new Link and Dropdown modules — wired to your WordPress menus through Menu Loops, with mobile handled by Canvases and Interactions. This guide explains why that shift matters and how to build a genuinely responsive menu with the new parts.

Get Divi 5

What changed, and why it's better

The old single-module menu was convenient but rigid: you got the structure WordPress handed you and a handful of style options. The new model trades a little setup for a lot of control. Per Elegant Themes, you now build navigation from individual, fully designable modules and connect them to your menus dynamically — so the header is as flexible as any other part of your Divi layout, not a special-cased black box.

The Link module: one navigation item, fully designable

The Link module is "a single customizable link anywhere in your layout." On its own it is one styled nav item. Its power comes from being connectable to a WordPress menu through a Menu Loop: connected, it pulls dynamic text and URLs from Appearance → Menus, so the navigation stays in sync with WordPress without you rebuilding anything.

The Dropdown module: submenus and mega menus

The Dropdown module creates submenus or mega-menu panels nested within a parent Link module. Two things make it more capable than the old dropdown:

• You choose whether it opens on hover or click.
• You populate it with flexible content — not just a stack of links, but full panels with rows, columns, images, text, icons, and buttons. That is how mega menus get built in Divi 5.

Menu Loops: design once, repeat for every item

A Menu Loop connects one styled Link module to a WordPress menu and repeats that design for each item. Per the documentation, you configure:

• Loop Menu Text — pulls each item's label dynamically.
• Loop Menu Link — pulls each item's URL dynamically.
• Menu Items Per Page — limits how many items show.
• Menu Item Offset — skips the first N items, handy when splitting a menu into segments (e.g. some items left of a logo, the rest right).

The payoff: you style one Link module, and the loop renders your whole menu in that style — and any change in Appearance → Menus flows through automatically.

Building the responsive (mobile) menu

This is where Canvases and Interactions come in — the same primitives covered in our Cross-Canvas Interactions guide. The mobile menu lives on a detached Canvas: a full-viewport section (height 100vh, fixed position) containing vertical menu links and a close icon.

Wiring it up, per Elegant Themes:

1. Build the Mobile Menu Canvas (full-viewport section, vertical links, close icon).
2. Add a hamburger icon to the header.
3. Give the hamburger two Interactions: one that hides the menu on page load (so it starts closed), and one that shows it on click, scoped to tablet/mobile breakpoints only.
4. Add a hide Interaction on the close icon.

Because the trigger is breakpoint-aware, the desktop horizontal menu and the mobile overlay coexist cleanly.

A sensible build order

1. Style a single Link module and connect it to your menu via a Menu Loop — desktop nav done.
2. Add Dropdown modules under the parent items that need submenus or mega panels; set hover vs click per your audience.
3. Build the Mobile Menu Canvas and wire the hamburger with the two Interactions above.
4. Test every breakpoint, and confirm keyboard and touch both reach the dropdowns.

FAQ

Is there still a single Menu module in Divi 5?

The recommended modern approach composes navigation from Link and Dropdown modules connected via Menu Loops, which gives far more design control than a single fixed menu module. You build the header from designable parts rather than one widget.

How does the menu stay in sync with WordPress?

Through the Menu Loop: Loop Menu Text and Loop Menu Link pull labels and URLs dynamically from Appearance → Menus, so editing the WordPress menu updates the rendered navigation automatically.

Hover or click for dropdowns?

The Dropdown module lets you choose. Hover suits desktop-first audiences; click is friendlier for touch and accessibility. Many sites use click on smaller breakpoints regardless.

How is the mobile menu built?

On a detached Canvas as a full-viewport overlay, revealed by a hamburger icon using two Interactions (hide on page load, show on click) scoped to mobile breakpoints — the same Canvas-and-Interaction model used for popups.

Bottom line

Divi 5's Link and Dropdown modules matter because they turn the header from a rigid widget into a set of designable, dynamically-connected parts. Menu Loops keep it in sync with WordPress; Canvases and Interactions handle mobile. A bit more setup, a lot more control — and no custom code.

Sources and further reading

Keep building

Read the Cross-Canvas Interactions guide