How to Create a Dropdown Menu in Divi 5

Dropdown menus help keep navigation clean without showing too many links at once. In this tutorial, you’ll learn how to create a dropdown menu in Divi 5 so you can group related pages under a single item and reveal them when needed.

In Divi 5, you can build this using the Link and Dropdown modules. It’s a more manual approach than the standard Menu module, but it gives you more control over how your navigation is structured.

We’ll use a simple navigation example to focus on how the dropdown works, so you can apply the same structure in your own layouts.

Final Result

Here’s what you’ll build — a simple dropdown menu triggered by hovering over a top-level link.

It’s a straightforward pattern: a parent link that reveals a submenu on hover. Once you understand this setup, you can use it in simple headers as well as in more advanced navigation layouts.

Step 1. Create a Simple Navigation Layout
Step 2. Add the Top-Level Links
Step 3. Add a Dropdown to a Link
Step 4. Add the Submenu Items
Step 5. Set How the Dropdown Opens
Step 6. Style the Dropdown
Step 7. Adjust Alignment
Step 8. Test the Interaction
Adding Another Level (optional)
Quick Notes (Mobile and Semantics)
Conclusion

Step 1. Create a Simple Navigation Layout

Start by adding a row with a single column, then insert a Group module.

This will act as your navigation container — just a clean space to build the structure.

If you already have a header in place, you can apply this dropdown structure inside it. Otherwise, you can start by creating a header in Divi 5 and then adapt the navigation using this approach.

At this point, don’t worry about styling. The goal here is simply to create a container that will hold your navigation items.

Step 2. Add the Top-Level Links

Inside the Group module, go to Content → Elements and add a Link module.

Start by styling this first item so it matches your site. In Design → Text, adjust the color, weight, and case. For example, you might use a black color (#000000), uppercase text, and a bold or semi-bold weight.

Setting up the style now makes the next step easier.

Once it looks right, duplicate the Link module to create the rest of your navigation items.

With multiple items in place, switch to the Group module settings and arrange them horizontally. Set Layout Direction to Row, then use Justify Content to control their alignment.

Now update the text and links for each item. A simple structure like Home, About, Services, Contact works well for testing.

At this point, you have a clean row of navigation links. In the next step, we’ll turn one of them into a dropdown.

Step 3. Add a Dropdown to a Link

Choose one of the links — for example, Services.

Open its settings, go to Content → Elements, and add a Dropdown module.

This is the key step.

Instead of placing a dropdown somewhere else, you’re nesting it directly inside the Link module. This is what connects the submenu to its parent item and controls how it appears.

Step 4. Add the Submenu Items

Open the Dropdown module Content → Elements settings and add Link modules inside it. Each Link module will represent one submenu item.

Once you’ve added a few items, update their text and URLs just like you did for the top-level links.

At this point, the structure is in place. You now have a parent item with a nested dropdown and a set of submenu links inside it.

Before moving on, it’s worth quickly previewing the page to make sure everything appears as expected. The dropdown should already be working, even without styling.

In the next steps, we’ll focus on how it behaves and how it looks.

Step 5. Set How the Dropdown Opens

Open the Dropdown settings and choose how the submenu should appear in Design → Dropdown → Show Dropdown On.

For most desktop navigation, hover works best. It allows users to move through the menu and preview options without clicking, which makes the interaction feel quicker and more fluid.

Click-based dropdowns can still make sense in some situations — for example, when you want more controlled interactions. However, in a typical header layout, hover is usually the better choice.

Step 6. Style the Dropdown

Now give the dropdown a simple visual structure so it feels like part of a real navigation.

Start with the Dropdown module itself. Set a background color in Content → Background, then move to the Design → Layout settings and adjust the spacing between items. A vertical gap of around 18px usually creates comfortable spacing without making the dropdown feel too loose.

Once the container looks right, move on to the submenu items. Each one is a Link module, so you can style them the same way you did for the top-level links.

Adjust the font weight, font style, and colors for both normal and hover states.

Since you’re working with multiple items, it’s best to create a preset for one Link module and apply it to the rest. This way, you only need to define the styling once, and any changes later can be made in a single place.

Focus on clarity more than decoration. A clean background, readable text, and clear hover states will make the dropdown easier to scan and use.

If the dropdown feels cramped or hard to scan, slightly increasing the vertical gap or line height can make a noticeable difference.

Step 7. Adjust Alignment

Once the dropdown is visible, take a moment to check how it sits in relation to the parent link.

In the Dropdown settings, you can control this using the alignment option — Start, Center, or End.

In most cases, Start works best because it keeps the dropdown visually anchored to the parent item, making the connection between them feel more natural.

If the dropdown doesn’t feel properly aligned with the parent item, try switching between these options and preview the result. The goal is to make the dropdown feel visually connected to the link that triggers it.

Step 8. Test the Interaction

Preview the layout and try the dropdown yourself.

Hover over the parent item, move into the submenu, and click a few links. The interaction should feel smooth and predictable.

If something doesn’t feel right, check how the dropdown behaves in relation to the content below it. In some cases, the section or row below the header can overlap the dropdown. Even if the dropdown is visible, it may lose focus because it’s technically sitting underneath another element which prevents you from interacting with it.

If that happens, you’ll need to adjust the layout — for example, by increasing the z-index of the header section, or by checking the positioning of the elements below it.

Adding Another Level (optional)

If you need a deeper structure, you can nest another Dropdown inside one of the submenu items.

For example, under Maintenance, you might want to add items like Technical Support, Content Updates, and Security.

The process is the same. Open the Link module, add a Dropdown module in the Elements section, then populate it with Link modules.

With a second level, positioning becomes more important. You’ll usually need to adjust the alignment and offset so the submenu appears in the right place relative to its parent item. For example, aligning it to the left and adding an offset of around 22px helps prevent the submenu from overlapping the first level.

This approach works, but it’s worth keeping it simple. As you add more levels, the navigation becomes harder to scan and more difficult to manage.

This is usually the point where it makes more sense to move toward a mega menu instead of adding more levels.

Quick Notes

Mobile

This example is designed for desktop navigation.

On mobile, hover interactions are replaced with taps, and dropdowns behave differently. Because of that, this setup doesn’t always translate well to smaller screens, especially when menus have multiple submenu levels.

In most cases, it’s better to handle mobile navigation separately instead of trying to adapt the same structure.

Semantics

When you use the Menu module, Divi automatically outputs the basic navigation markup, including a <nav> element and a structured list of links.

With the Link and Dropdown modules, this doesn’t happen by default.

So while the dropdown we’ve built works visually, it isn’t wrapped in a semantic navigation structure unless you define it.

One way to improve this is to change the Group module’s HTML tag to <nav>, turning it into a proper navigation container (see the HTML <nav> element on MDN). You can do that in Group → Advanced → HTML.

This won’t fully replicate a <nav><ul> structure, but it’s a meaningful improvement.

Conclusion

You now know how to create a dropdown menu in Divi 5 using the native Link and Dropdown modules.

More importantly, you’ve seen how the structure comes together — a parent link, a nested dropdown, and the submenu items inside it. Once this pattern clicks, you can reuse it anywhere, from a simple header to a more advanced navigation setup.