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.
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 for you to 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 in the WordPress Plugin Directory. 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 anything 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 demonstration purposes. 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
- widget support
- support for different themes and skins
- responsive and mobile-ready menu support
- support for social icons, Dashicons, and Font Awesome
- theme 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 widget 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 a 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.
Exploring 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 each section briefly.
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 can we 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 to 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 the remaining links as well.
If you hover over 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 popup which allows you to configure mega menu settings for the Home link.
Enable the Mega Menu option, and that will present you with 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 with 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 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 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 widget support, you can display almost any type of content in the drop-down menu itself. Go ahead and experiment with 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, if you really like what you’ve seen so far, I would recommend you to look at its paid counterpart: WP Mega Menu Pro. It comes with a lot of built-in professional themes that can get you going 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!
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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post