In this post, we're going to take a look at two ways to add a megamenu to an Elementor website. You may have seen mega menus in other websites and wanted to add it to your own Elementor creation. These setups are the next evolution of a simple dropdown menu. Instead of displaying links, they show structured columns and rows populated with dynamically updated elements.

One of our favorite megamenu examples can be found over at Stripe.com. When you hover over a menu element, instead of a simple dropdown, you're presented with a well populated collection.

We also really like the megamenu at Digital Ocean.

Due to their large lineup of products, they can't simply display a list of everything. Instead, they show their featured products, categories additional ones, and end with a “see all products” link at the bottom of the mega menu. it's a great way to provide a lot of information in an easy to navigate manner.

It's not just a unique design, it can really help your customers navigate through your website. For example, if you run an ecommerce shop, you could display your most popular products within the menu to increase your conversion rate. If you have blog, you could display the most recent posts in a dropdown megamenu. The possibilities are endless, and implementing this feature on your website could add a professional (and helpful) touch.

The Elementor builder (both the free and the paid version) don't incorporate any “menu building” functionalies. You can create simple menus with basic dropdowns, but if you want to build out layouts, that's impossible with the base installation.

At the same time, the editor is very well positioned to make a megamenu. You already have columns, rows, dynamic elements, and more which would be great when it comes to building out a megamenu. In this article, we're going to take a look at two plugins that allow you to leverage the functionality that comes with the Elementor builder, and add mega menus to your site.

Here’s how to add a mega menu to Elementor.

Method 1: JetMenu

This is a standalone plugin that allows you to create mega menus with the Elementor builder. It's easy to install, configure, and implement. It also works very well!

We've created dozens of client websites using this plugin, and it's really the best option on the market (even compared to free plugins - the time that you'll save with this is definitely worth it). The plugin costs $24.00 on its own (though all of the JetPlugins come as a bundle for $80).

Essentially, it allows you to create mega menu layouts from the Elementor editor. When hovering over a menu item, this “screen” will fade in. because of this, you can add any element accessible from the Elementor builder (even elements included in 3^rd party addon packs).

That means that when it comes to creating mega menus with JetMenu, the possibilities really are endless.

You can add dynamic content, as well as Elementor templates. Display conditions, responsiveness, an simplicity our standard functionalities that ship with the plugin.

The menu also completely changes when accessing it from a mobile device. This ensures that your website is easy to navigate on mobile, and makes sure that Google will rank you high because of it.

This is our go to plugin when it comes to incorporating mega menus into Elementor websites for clients. when our agency website was created with Elementor, we also used this plugin personally (It displayed our most recent blog posts). You can probably check out our implementation on Archive.org!

If you're looking to get even more value for your dollar, option two is a great choice.

Method 2: ThePlus

There are many add-on packs for Elementor that have “mega menu” capabilities. However, most of them are poorly implemented and you would be better off going with JetMenu.

ThePlus is the one add-on pack that properly implements the mega menu. we know this because we got all of the major addon packs, and tested this.

the reason we said that this method may give you more value for your dollar is because you're not simply purchasing a plugin that only adds a mega menu functionality to your Elementor website. Instead, the mega menu is one of 89 individual elements that ship with the pack.

We haven't used this on any client websites because we have an unlimited plan for JetMenu, but because we have access to this addon pack, we messed around with the megamenu capability. It works very well, and allows you to add templates to menu dropdowns.

What this means is this: You first create a template within Elementor. This template will be the menu dropdown, so you can add your links, images, related products, or whatever element is available to you. You then use ThePlus to make this template display when hovering over an individual menu item.

ThePlus addons are incredibly high quality and don't have a massive performance impact on your site. Because of that, this is our recommended add-on pack for all things Elementor.

Here’s a full video walkthrough:

There are a bunch of other widgets that apply specifically to Elementor menus. When creating a megamenu, you can use this to your advantage.

For example, there's a mobile specific menu element that you can use to create a tailored, responsive, mobile first menu. You can get this crazy collection of add-ons for $39.00 (that's a one site license), making this one of the most valuable add-on packs out there.

Conclusion

This article should have showed you two ways that you can add a mega menu to your Elementor website. Mega menus look good, and enhance the navigation of your website. If you're looking to incorporate this feature on your site, these two plugins are built to do that.