In this post, we’ll explore the WP Mega Menu plugin which allows you to create content-rich navigation menus on your WordPress site. We’ll go through the different aspects of this plugin and we’ll also build a real-world example for demonstration purposes.
-
![]()
A sticky menu stays at the top of the screen, so that however far the user moves down the page, the menu will still be accessible, making it easier for…
-
Learn how to code a menu with multiple-level items that drop down when the user hovers over higher-level menu items.
-
Does your site manage a lot of content, many products, or complex services? Chances are, you need a Mega Menu. There are many great plugins to help you build…
-
Learn how to create a navigation menu that enhances UX, reflects well on your brand, and takes mobile and accessibility into account.
Why Use a Mega Menu?
Site navigation is one of the important aspects which you need to address during the development of your website. Based on the type of your website, there are a lot of different options available you could choose from. Navigation could vary from a simple streamlined bar menu to a multi-column drop-down menu that could contain a lot of information in the menu itself. Today, we’ll discuss one such menu type which is a very popular option nowadays: a mega menu. We’ll discuss it in the context of WordPress.
As a site owner or a seasoned WordPress developer, you already know that WordPress provides a lot of plugins for almost every feature one could think of, and it can be hard to choose which one to use. And when it comes to creating navigation menus, you will find plenty of plugins on the WordPress plugins store. Among them, I’ve chosen one of the best in this category—WP Mega Menu.
The WP Mega Menu plugin allows you to create rich navigation menus that could contain from simple links to images, videos and widgets. Throughout the course of this tutorial, we’ll go through the different aspects of this plugin.
For this post, I’ve used WordPress 5.1. To install the WP Mega Menu plugin, you need to follow the standard plugin installation process in WordPress.
In the upcoming sections, we’ll explore the basic settings of the WP Mega Menu plugin along with the setup process. We’ll build a real-world example for the demonstration purpose. Meanwhile, we’ll also go through a few important settings of this plugin that allow you to create different types of menus.
What Is the WP Mega Menu Plugin?
The free WP Mega Menu plugin allows you to create content-rich navigation menus in your WordPress site. It’s a very easy-to-use plugin which provides a drag-and-drop interface in the back-end to create navigation menus quickly.
Additionally, it provides a lot of customization options to style menus differently, and thus, you could customize the look and feel of your menus from the back-end itself. And no, you don’t need to be a CSS expert!
Let’s quickly look at the features it provides:
- drag-and-drop menu builder panel
- widgets support
- support for different themes and skins
- responsive and mobile-ready menu support
- social icons, Dashicons and Font Awesome support
- themes export and import
- and more
As you can see, the WP Mega Menu plugin provides a lot of useful features which you could use to build beautiful and attractive multi-column navigation menus on your WordPress site. And with built-in widgets support, it allows you to include probably anything you could think of in the drop-down menu itself. If you are building a portal site and looking to build content-rich drop-down navigation menu, this is a must-have plugin!
In the next section, we’ll discuss a few basic settings of this plugin that are important to understand if you want to use this plugin effectively.
Exploreing the Plugin Settings
After installing the WP Mega Menu plugin, you should see the plugin related links in the left sidebar. In this section, we’ll go through the each section briefly.
Global Settings
In this section, you can configure settings that are globally applicable to all menus that are created using this plugin. Among the different settings, it allows you to configure certain JavaScript behaviors and global CSS settings.
Menu Themes
This section allows you to configure theme-specific settings. The default theme is built-in, and you could mostly live with that as it already comes with useful settings. Apart from that, you could create your own themes or duplicate existing themes. If you would like to create multiple themes, you can apply different styles to different menus on your site.
With each new theme, you can control different aspects of your menus—like background color, font settings, spacing, menu effects, and more. In fact, this is the section which you will use the most when you configure your menus.
Additionally, you can also export themes created in your site and import them to other sites. This is really useful, since it means you don’t have to create themes again if you want to copy themes from your other sites.
In the next section, we’ll build an example of a real-world mega menu.
Build a Mega Menu for Your WordPress Site
In this section, we’ll build a real-world example to demonstrate how to use this plugin to create a mega menu on your WordPress site. In our example, we’re going to create a three column drop-down mega menu, and each column will contain a different type of content.
Before we proceed, make sure that you’ve installed this plugin in your WordPress site if you want to follow along.
Create the Menu and Menu Items
First of all, we’ve got to create a regular menu and add menu items to it. And only after that, we can proceed with setting up the mega menu. Access the Appearances > Menu link in the admin sidebar to create a new menu. Follow the standard process to create a new menu and add a couple of items in that menu.
In my case, I’ll name it Demo Mega Menu. I’ve also added a couple of custom links as shown in the following screenshot. Also, it’s important that you have to assign this newly created menu the Display location where the menu will be displayed. Let’s select the Top Menu in the Display location field. It should look something like this.
It’s important to note that there’s already a Mega Menu Settings block on the left side as shown in the above screenshot. You can select the theme which you would like to use in this panel and click on the Save button to save it. I’ve selected the classic-blue theme in my case.
Configure the Menu Links
Now, it’s time to configure the mega menu settings for menu links. In our case, we’ll create a mega menu for the Home link, but of course, you could go ahead and repeat the same process to create mega menus for remaining links as well.
If you hover the Home link, you should be able to see the WP Mega Menu link as shown in the following screenshot.
Click on that link, and it will open a pop up which allows you to configure mega menu settings for the Home link.
Enable the Mega Menu option and that will present you a lot of configuration options. When you click on the Add Row button, it allows you to select the layout which you would like to use to build the mega menu as shown in the following screenshot.
In my case, I’ve selected the three-column layout as shown in the above screenshot. And that will present you the following UI which we will use to add different types of content.
On the left hand side, you can see that there’s a widget section which lists out different types of widgets available for you to use. You could drag a widget that you would like to use and drop it to the columns that we’ve created.
I’ve used three widgets, Categories, Archive and Text, for my mega menu.
Of course, you could select different widgets as per your needs. After selecting widgets, configure the each widget as you wish, and save everything once you’re done with the settings.
Now, let’s visit the front-end to see how it looks.
As you can see, the WP Mega Menu plugin has converted a simple menu into a drop-down mega menu. And it displays everything that we’ve configured from the back-end.
In this way, you can enable the mega menu settings for each and every menu link of the menu. With the widgets support, you can display almost any type of content in the drop-down menu itself. Go ahead and experiment the different options and let me know if you have any doubts.
So that’s how you can create stunning mega menus for your site using this free plugin.
The Next Step: More Advanced Mega Menus
What we’ve discussed today is a free version of the WP Mega Menu. Although, I agree that it already provides a lot of useful features in the free version, but if you’ve really liked what you’ve seen so far, I would recommend you to look at it’s paid counterpart: WP Mega Menu Pro. It comes with a lot of built-in professional themes that can get you go right away. For a small cost, it’s really worth giving a try.
And while you’re here, check out some of our other articles about WordPress menus!
-
![]()
A sticky menu stays at the top of the screen, so that however far the user moves down the page, the menu will still be accessible, making it easier for…
-
Learn how to code a menu with multiple-level items that drop down when the user hovers over higher-level menu items.
-
Does your site manage a lot of content, many products, or complex services? Chances are, you need a Mega Menu. There are many great plugins to help you build…
-
Learn how to create a navigation menu that enhances UX, reflects well on your brand, and takes mobile and accessibility into account.
Conclusion
Today, we discussed how you can create amazing mega menus by using the WP Mega Menu plugin in WordPress. I would love to hear from you if you want to share your experiences about other menu plugins that you have used on your website.
Feel free to share your thoughts and feedback using the feed below!