Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add a Mega Menu on Your WordPress Site (Step by Step)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add a mega menu on your WordPress site?

Mega Menus allow you to arrange dozens or even hundreds of links into user-friendly columns and rows. You can then add rich content like images and videos, to make your mega menus even more helpful.

In this article, we will show you how you can add a mega menu to your WordPress website, step-by-step.

How to add a mega menu on your WordPress site (step by step)

Why Add a Mega Menu on Your WordPress Site?

WordPress comes with a drag-and-drop builder you can use to create all kinds of menus including dropdown menus, header menus, and more. There are even plugins that allow you to create custom navigation menus in WordPress themes.

However, if your site has lots of content then you may need to create a mega menu instead. This allows you to add multi-column dropdowns to the standard WordPress menu.

You can use mega menus to organize your content under different headings and subheadings, so visitors can quickly find what they’re looking for. For example, if you create an online marketplace then you might arrange all your product categories and subcategories in a mega menu.

An example of an eCommerce mega menu

Mega menus can also show rich content to your visitors, such as videos, text, search, and recent posts.

You can also add images, which make mega menus easier to scan.

An example of a mega menu with rich content

That said, let’s see how you can easily add a mega menu to your WordPress website.

How to Create a Mega Menu for Your WordPress Site

The easiest way to add a mega menu on your WordPress site is by using Max Mega Menu. This plugin allows you to add rich content to your mega menus, including videos, image galleries, search, and more.

In this way, you can create more engaging and helpful menus.

A WordPress mega menu

You can also style every part of the mega menu by adding different colors, changing the font size, and using different icons.

First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Enable Mega Menus on Your WordPress Website

Upon activation, go to Mega Menu » Menu Locations to see all the different areas where you can add a mega menu.

You may see different options depending on your WordPress theme.

Enabling mega menus on different areas of a WordPress website or blog

To start, you’ll need to enable mega menus in every location where you want to use them.

To do this, simply click to expand a location and then check its ‘Enabled’ box.

Enabling the mega menu feature in WordPress

After that, you can change the ‘Event’ that’ll open the mega menu.

The default setting is ‘Hover intent,’ which means the visitor must hover their mouse over the mega menu for a few seconds in order to trigger it. This works well for most WordPress websites, but you can also open the ‘Effect’ dropdown and choose ‘Hover’ or ‘Click’ instead.

If you choose ‘Click’ then the visitor will need to click to explore the mega menu. This can be useful if you’re worried visitors might trigger the menu by accident, which can be frustrating.

Meanwhile, ‘Hover’ will open your mega menu as soon as the visitor moves their mouse over it. This can encourage visitors to explore different areas of your site, so you may want to use ‘Hover’ on landing pages or your website’s homepage.

Changing the mega menu trigger event

After making this decision, you can change how the menu opens using the ‘Effect’ settings.

Max Mega Menu has different animations you can try, including fade and slide up. You can also change the animation’s speed. By trying different animations, you can create a mega menu that grabs the visitor’s attention.

Changing the animation effects on a mega menu

If you don’t want to use any animations, simply open the first dropdown and select ‘None.’

By default, Mega Menu doesn’t use animations on mobile devices, since smartphones and tablets typically have less processing power. However, if you want to create a unique animation for mobile visitors, then you can use the settings in the ‘Effect (Mobile)’ area.

If you want to test your mega menus on mobile, then check out our guide on how to view the mobile version of WordPress sites from desktop.

If you chose ‘Click’ from the ‘Event’ dropdown menu, then make sure you select the ‘Advanced’ tab next.

Here, you can use ‘Click Event Behavior’ to define what happens when the visitor clicks your mega menu. For example, the second click might close the menu or open a new link.

Changing the event click behavior in a mega menu

There are more settings you can look through, but this should be enough for most WordPress blogs and websites.

When you’re happy with how the plugin is configured, click on ‘Save Changes.’

To enable mega menus for more locations, simply follow the same process described above.

Enabling mega menu for multiple locations

Customize How the Mega Menus Looks on Your Website

The next step is configuring how the mega menus will look on your website.

You can do this by selecting the ‘Menu Themes’ tab to the left of the screen.

Creating a custom theme for a mega menu

On this screen, you can change the direction of the arrow icons, use a different line height, add a shadow, and more.

When you’re happy with your settings, don’t forget to click on ‘Save Changes.’

Customizing how the mega menu looks on your WordPress website

If you want to remove these changes at any point, then simply check the ‘Reset Widget Styling’ box and then click on ‘Save Changes.’

Next, you can customize the menu bar, which is the bar visitors see when the menu is in its default, collapsed state.

An example of a menu bar, in a WordPress mega menu

To make these changes, click on the ‘Menu Bar’ tab and then use the settings to change the background color, padding, border radius, and more.

You can even create a color gradient by selecting two different colors in the ‘Menu Background’ section.

Adding custom colors to a WordPress megamenu

If you scroll down, then you can change how the top-level menu looks.

This is the first row of items, which is visible when the mega menu is in its collapsed state.

Customizing how the top level menu items look

Since they’re so important, you might want to make the top-level menu items stand out.

For example, in the following image, we’re using a different background color.

An example of a website mega menu

In the ‘Hover State’ section you can highlight the currently-selected top-level menu item.

For example, in the following image, we’re using an underline effect.

Adding a hover state to a WordPress mega menu

This can help the visitor see where they are in the menu, which makes it particularly useful for sites that need to have large mega menus.

If you do add a hover state, then scroll to the bottom of the screen and check the ‘Highlight Current Item’ box.

Highlight the current item in a mega menu

After that, you can change how the submenu looks.

This is the menu that appears under a top-level parent, as you can see in the following image.

An example of a WordPress mega menu

To customize the submenu, click on the ‘Mega Menus’ tab.

You can now use these settings to change the submenu’s background color, increase the radius to create curved corners, add padding, and more.

Customizing the sub menu on a website or blog

You add content to your mega menus using widgets. For example, you might add a Gallery widget and display your most popular WooCommerce products, or embed a tag cloud inside the mega menu. These widgets can provide extra information, or encourage visitors to click on certain menu items.

You can customize how these widgets will look by scrolling to the ‘Widgets’ section. For example, you might change the color of the widget’s title, increase the font size, add padding, and adjust the alignment.

How to add a mega menu on your WordPress website, step by step

On this screen, you can also customize how the second-level menu items and third-level menu items will look on your website, blog, or online marketplace. These are the children of the top-level menu items.

When building your menus, it’s possible to add four or even more levels to create a nested mega menu. If you do this, then WordPress will simply use the third-level styling for all the subsequent levels.

You can see this in action in the following image. The second level has red text, and both the third and fourth levels use the same blue text.

How to create a mega menu for WordPress

When you’re happy with how the menu is set up, don’t forget to click on ‘Save Changes.’

How to Add a Mega Menu on Your WordPress Site

Once you’ve finished customizing the mega menu, it’s time to add it to your website.

Simply head over to Appearance » Menus.

Editing a menu on your WordPress website

If you want to turn an existing menu into a mega menu, then open the ‘Select a menu to edit’ dropdown and choose it from the list. Just be aware the menu you choose must be assigned to a location where you’ve enabled the mega menu feature.

If you want to start from scratch, then click on ‘Create a new menu’ and then type in a title for your new mega menu.

Creating a navigation menu in WordPress

You can then select the location you want to use, and click on ‘Create Menu.’ Once again, this must be a location where you’ve enabled mega menus.

Add Content to Your WordPress Menu

After that, add all the pages, posts, WooCommerce products, and any other content you want to include in the mega menu. For step-by-step instructions, please see our beginner’s guide on how to add a navigation menu in WordPress.

Next, you’ll need to arrange your items into the parents and submenus you want to use in the mega menu. To create a submenu, drag an item below the parent, and then drag it slightly to the right before releasing it.

Arranging pages and posts into a parent and child layout

To create multiple levels, simply keep dragging items to the right so they appear indented below one another. This is similar to creating a dropdown menu in WordPress.

Enable the Mega Menu Feature

That done, click to expand the ‘Max Mega Menu Settings’ and check the box next to ‘Enable.’

Enabling the mega menu feature

In this box, you can also override the default mega menu settings. This allows you to create unique mega menus for different areas of your WordPress website, so go ahead and make any changes you want.

After that, click on ‘Save.’

Create the Mega Menu Layout

Now, hover your mouse over the first top-level item and you’ll see a new ‘Mega Menu’ button. Go ahead and give the button a click.

Configuring the Max Mega Menu settings

You will now see all the settings for this top-level item.

By default, Max Mega Menu will use the flyout style, where the submenus ‘flyout’ from the side. To create a mega menu instead, open the ‘Sub menu display mode’ dropdown and choose either ‘Standard Layout’ or ‘Grid Layout.’

Standard layout shows all the submenus in columns.

An example of a mega menu with a standard layout

Meanwhile, grid layout allows you to organize submenu items into columns and rows.

This is ideal if you want to show lots of content such as all the digital products in your online store, or have a very specific layout in mind.

Arranging menu items into rows and columns

After selecting the standard or grid layout, you’ll see all the submenus assigned to this parent.

Now, you can go ahead and change how these items are arranged in the mega menu.

Adding a Standard Layout to a navigation menu

If you’re using the standard layout, then you can change the number of columns using the dropdown menu in the top right corner.

If you’re using a grid layout, then you can add columns and rows using the ‘+Column’ and ‘+Row’ buttons.

Adding a grid layout to a WordPress menu

When you’re happy with the layout, you can arrange the submenu items into different columns and rows using drag and drop.

After that, it’s time to change how much space each item takes up in the column. Max Mega Menu shows the current size as a fraction of the total available width.

For example, in the following image both columns take up half the available space.

Creating a custom layout for a WordPress menu

To change an item’s size, just click its arrow buttons to make the fraction bigger or smaller.

Create a Mobile-Friendly Mega Menu (Grid Layout Only)

By default, Max Mega Menu will show the same content on desktop and mobile devices. This can be a problem with grid layouts, as smartphones and tablets typically have smaller screens, and scrolling horizontally can be difficult.

If you’re using the grid layout, then you can create different mega menus for mobile devices. For example, you might use fewer columns so users don’t have to scroll horizontally. In this way, you can create a mobile-ready WordPress menu.

You can hide entire columns or rows using the ‘Hidden on mobile’ icon, which looks like a small mobile phone.

How to create a mobile-responsive menu in WordPress

Simply toggle the icon on and off, to hide and show different content on desktop and mobile.

Add Rich Content with Mega Menu Widgets

With that done, you can start adding widgets to the mega menu. This allows you to show extra content in the submenu, such as recent comments, videos, galleries, and more.

For example, you might use images to promote a sale on your online store, or highlight your latest products.

Rich content in an online store menu

To add a widget, simply click to open the ‘Select a widget….’ dropdown.

You can now choose a widget from the list.

Adding rich, multimedia content to a website's navigation

WordPress will add the widget to a column or row automatically, but you can move it to a new location using drag and drop.

To configure the widget, go ahead and click on its little wrench icon.

Configuring widgets in your mega menu

This opens a popup where you can add content to the widget and change its settings.

You’ll see different options depending on the kind of widget you’re creating. For example, if you add an audio music player widget to the mega menu then you’ll see settings where you can upload an audio track.

Adding an audio widget in WordPress

All widgets have a ‘Title’ field where you can add text that will appear above the widget.

When you’re finished, click on ‘Save’ to store your changes and then select ‘Close.’ To add more widgets to the mega menu, simply follow the same process described above.

Arranging pages and posts into a grid layout

Review the Default Mega Menu Settings

Next, just click on the ‘Settings’ tab.

Here, you can use checkboxes to hide or show different content in the submenu.

The Max Mega Menu settings

You can also hide or show the submenu on mobile devices and desktop, and change the alignment so the submenu opens to the left or right of the top-level parent.

If you make any changes to the default settings, then don’t forget to click on ‘Save Changes.’

Add Image Icons to the WordPress Mega Menu

Image icons help visitors understand what a menu item is about, without even having to read the navigation label. This is particularly useful for large menus where a visitor may prefer to scan the content quickly rather than reading each navigation label.

An example of a mega menu with icons

You can use icons to make the most important content stand out. For example, you might encourage visitors to complete their purchase by adding a cart icon to the ‘Checkout’ menu.

To add image icons to your navigation menu, click on the ‘Icon’ tab.

Adding dashicons to a WordPress menu

You can now choose any dashicon from the built-in library or use your own image. If you upgrade to Max Mega Menu pro, then you’ll also have access to other icon fonts, Genericons and FontAwesome.

Finish Configuring the Mega Menu on Your WordPress Site

After working your way through all these settings, you can close the popup window to return to the main Appearance » Menus page.

You can now repeat this process for each top-level parent.

When you’re happy with how the mega menu is set up, click on the Save Menu button to make it live.

Publishing a mega menu to your WordPress site

Now, simply visit your website to see the mega menu in action.

We hope this article helped you learn how to add a mega menu on your WordPress site. You can also go through our guide on the best drag and drop WordPress page builders and how to increase your blog traffic.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

23 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed says

    I have thought many times over about implementing mega menu option like having a main menu with drop down of submenu with headline and description like the one wpbeginner has, but never knew that it can be achieved even without coding knowledge.
    I will explore the mentioned options to see if it fits my present needs.
    Thanks for the step by step guide for mega menu.

  3. Paul Chapman says

    Ho
    I have been looking for a mega menu plugin that allows me to have multi level mega menus… As in when I hover over a menu item within the 1st mega menu (1st level) another mega menu pops out with all the sub menu items in that, and so on and so forth. Is that possible?

    • WPBeginner Support says

      At the moment we do not have a specific plugin we would recommend for a multi-level mega menu like that. In the cases where you would want something like that you may want to consider having a landing page for the content where you have navigation into the content that you would want on the second mega menu.

      Admin

      • Paul Chapman says

        Hi
        Thanks for the advice… Coincidentally that’s exactly what I was thinking and I think it may be a better solution.
        The thing that’s bothering me about that is ux. There’s a lot of sub menus/pages/categories so a lot of scrolling and I’d much rather people just point and click… That said, the majority of users will be on mobile devices so, they’ll be scrolling with the menu either way, if you catch my drift… It’s a kind of catch 22 situation.

  4. Jiří Vaněk says

    I’ve been struggling with the megamenu plugin constantly. I wanted to create a menu similar to what you have. For instance, a main link for ‘contact’ and a submenu with two columns; one column with links to social networks and the other with text containing the address, phone number, email, and so on. However, I’m not succeeding. I manage to create a submenu with two columns and add text, but I’m struggling with the menu containing links to social networks. I created a new menu where I added links to social networks. I add this to the first column, but the links simply don’t show up. Instead, I see a message saying ‘if you are trying to display max mega menu, use the max megamenu widget’. I’m desperate about this. I’ve tried to set up the megamenu several times, and it always breaks somewhere. I use the GeneratePress theme. Despite having a good understanding of WordPress, I’m completely failing at this.

    • WPBeginner Support says

      If the plugin keeps breaking for you we would recommend reaching out to the plugin’s support and they should be able to take a look and assist in finding the root of the issue.

      Admin

      • Jiří Vaněk says

        Thank you for the response and for your effort. Eventually, I looked into the template developer’s support. It’s GeneratePress. They have a detailed guide on how to create a mega menu using CSS code and other menu structure settings. I tried their solution on a test website, and it works. It does have limitations as it applies only to links, but for now, it partially solves my menu issues. So, for the time being, I’ll create a mega menu according to the template developer’s recommendations and continue investigating where I might be making a mistake or if there’s an issue with the template. I’ll also try reaching out to the developer’s support.

  5. Ghazal Ba khadher says

    I want to add pages in the mega menu. I want to delete the word Pages as the headline. could you please help me in this regard please.

    • WPBeginner Support says

      In the menu settings, there should be the option to hide the text when you want to hide a section title like that.

      Admin

  6. taufeeq khan says

    How to create content on mega menu …..for example when i click on mega menu then it open the new page of content. just like we are use home contact et.

  7. Anon says

    How to add a megamenu on your site: install this plugin

    Come on, give an actual tutorial next time. Megamenus are totally within the realm of development.

    • WPBeginner Support says

      While there is certainly the capacity to create a custom mega menu with code, it is difficult to have that code affect every theme and be beginner friendly. We will certainly add the code for different articles when we’re able but for now, we will continue to recommend plugins that already have the code created :)

      Admin

  8. Ben says

    Is MaxMegaMenu compatible with WPML for multilingualism? They refer to POT files, but WPML only lists MegaMainMenu on their website. Am looking for an optimal combination of theme, menu builder, and multilingual plugin – to avoid problems with integration, for fast loading, and for liability.
    Am comparing Avada, with MegaMainMenu, and WPML.
    Thanks for your time in any knowledgeable reply.

    • WPBeginner Support says

      Sadly, you would need to reach out to the plugin’s support for if they are currently compatible or not.

      Admin

  9. Abel says

    Not helpful at all. The question is, how do you really add a post or page onto the mega menu. I dont want to add categories or widgets to the menu!!!I want to add real links to the menu

    • WPBeginner Support says

      For specific posts or pages you would create a menu with it organized how you want and add the Navigation Menu widget to the mega menu :)

      Admin

  10. Jay says

    Two beginner’s questions: Does Mega Menu work with any WordPress theme?
    &
    Does Mega Menu allow for multiple mage menus?

    • WPBeginner Support says

      It should work on most themes. If you reach out to the plugin’s support they should be able to let you know of any conflicts.
      You can have more than one mega menu if that is what you mean with your second question.

      Admin

  11. Nick says

    Max Mega Menu is hand down the best plugin for what it does. As a customer to the premium version let me say that it is well worth the money, and reasonably priced. The developer is very friendly and helpful too which is always a big plus.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.