How to Add a Stunning Mega Menu to Your WordPress Site

How to Add a Stunning Mega Menu to Your WordPress Site

Mega menus are a common design pattern on large WordPress sites. Such sites may have a complex information architecture with many different sections and subsections. By grouping similar links together, mega menus make it simple for the user to find relevant information quickly.

About mega menus, usability expert Jakob Nielsen says:

“[Mega menus] are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.”

In this post, we’ll take a look at examples of WordPress sites that using mega menus, why they are worth exploring as an option if you run a large website, and plugins to help you implement mega menus.

WordPress Sites That Use Mega Menus Effectively

Mega menus are found on a wide variety of sites.

Joanie Clothing

Joanie Clothing Shop All mega menu
Joanie Clothing Shop All mega menu

The mega menu items on the Joani Clothing website link to WooCommerce product categories.

The Stanford Daily

The Stanford Daily Sports mega menu
The Stanford Daily Sports mega menu

The Stanford Daily news site uses a mega menu to display categories within categories, i.e. Sports > Fall Sports > Field Hockey.

Pousta

Pousta Singular mega menu
Pousta Singular mega menu

Feature images are also used in Pousta’s mega menu, along the site to highlight important stories.

Georgia State University

Georgia State University Alumni mega menu
Georgia State University Alumni mega menu

The alumni menu items on the Georgia State University website are custom links to another domain.

Jamie Oliver

Jamie Oliver Recipes mega menu
Jamie Oliver Recipes mega menu

The most mega of mega menus! Jamie Oliver’s site includes a separate hamburger menu for tablet and mobile.

British Rowing

British Rowing Knowledge mega menu
British Rowing Knowledge mega menu

What Features Can WordPress Mega Menus Contain?

As well as menu links, they can have:

  • Section headings
  • Images
  • Icons
  • Descriptions
  • Widgets, which can include images or video

Most mega menus are shown on hover, hover intent, or click from horizontal menu bars. Some plugins can do vertical mega menus as well.

Hover intent is a jQuery plugin that attempts to intuit the user’s meaning of a mouse move. So a quick drag may not open the menu whereas a slow deliberate move over a menu item will.

Mega Menus WordPress Plugins

There are a number of free and paid plugins that do the job well if you’re considering adding a mega menu to your WordPress site.

Max Mega Menu (free)

max mega menu header

The Max Mega Menu features include:

  • Accessibility friendly: keyboard navigation is supported.
  • Animations for submenu transitions.
  • Options to hide menu items or disable links.
  • Premium version with more features including vertical and accordion menus.

Mega Menu Plugin for WordPress – AP Mega Menu (free)

Mega Menu header

The Mega Menu Plugin features include:

  • Vertical mega menus.
  • Create menus by drag and drop.
  • Option to hide menus on mobile.
  • Fade or slide transitions.
  • Premium version available with more features e.g more icons and add your own icons.

UberMenu

UberMenu header.
UberMenu features include:

  • Tabbed submenus.
  • Dynamically generated menus.
  • Mobile and tablet friendly menus.
  • Menu animations.

Mega Main Menu

mega main menu header

Mega Main Menu features include:

  • 1600+ icons.
  • WPML compatible.
  • Add other menu items (logo, search).

WP Mega Menu Pro

wp mega menu pro

WP Mega Menu Pro features include:

  • Tabbed mega menu.
  • 14 available skins.

Hero Menu

Hero Menu

Hero Menu features include:

  • WooCommerce enabled.
  • Backgrounds for menus.
  • Sticky menu.

NOO Menu

Noo Menu header

NOO Menu features include:

  • Transparent menus.
  • Save/load presets.

How to Create a Mega Menu with Max Mega Menu

Let’s take a look at how to create a mega menu. For this example, I created a food-based site with different recipes using the Kale theme.

The first step is to create your menu using Appearance > Menus, making sure you nest your submenu items appropriately.

Mega menus can only be created on top level menu items, not submenu items. To access the plugin’s options for menus, hover over a menu item and select Mega Menu.

To add images, use an Image widget – a new feature in WordPress 4.8.

A Max Mega Menu image widget
A Max Mega Menu image widget

And here’s what it looks like on the front-end of my test website:

Max Mega Menu with image on the front end
Max Mega Menu with image on the front end

To add videos, use WordPress 4.8’s Video widget and add the video from a URL. Alternatively, add the embed code of the video to a text widget.

Here’s what it looks like:

Max Mega Menu with video
Max Mega Menu with video

You can also add menu icons through the Icon section in the plugin.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

The default Dashicons in Max Mega Menu
The default Dashicons in Max Mega Menu

To add Font Awesome, Genericons or custom icons requires the Pro version, which costs $23 for a single site.

You can choose the number of columns that menus display in and create multi-column layouts grouping items together.

Max Mega Menu 2 column layout
Max Mega Menu 2 column layout

After putting together a two-column layout, here are the results on the front-end:

Max Mega Menu 2 column layout for Soups submenu
Max Mega Menu 2 column layout for Soups submenu

I used the Recent Posts Widget With Thumbnails plugin to add the latest posts. To get them to line up horizontally, I used a widget in a one column layout plus some CSS. The only reason the images don’t line up perfectly is that they’re different heights!

Here’s the CSS I used to achieve this result:

And another look at how my mega menu is coming along on the front-end of my test site, this time with three columns:

Latest posts in a 3 column layout
Latest posts in a three column layout

Adding or changing items in your mega menu auto-saves them. Don’t forget to click Save Menu as well if you add new items to the menu structure.

Using Max Mega Menu for Tablet and Mobile

On my phone, I ended up with two hamburger menus, one from my theme and the one generated by Max Mega Menu. The theme menu was disabled, so it would best hidden with CSS.

As there is no hover state, hover and hover intent events work as click events, with a tap opening the submenu.

Top-level menu items with mega menus as submenus (e.g. Main courses) can’t be accessed on a phone unless the user taps and holds and chooses Open in new tab.

One way to solve this is to use another plugin for a mobile only menu.

Max Mega Menu didn’t display everything optimally on mobile. I changed down the number of columns from two to one but that had the effect of mixing up the content on my Soups menu, as shown.

Max Mega Menu on Android phone with mixed up columns
Max Mega Menu on Android phone with mixed up columns

The Video widget didn’t show properly either. There’s a problem with its responsiveness on a small screen size.

Video widget display cut off on Android phone
Video widget display cut off on Android phone

How to Create a Mega Menu with UberMenu

UberMenu gives much finer grained control over your mega menus. Each single menu item can be customized. There is also a global control panel where some options can be set and inherited e.g. default image sizes.

There are over 20 inbuilt skins. I chose “Simple Green.”

The individual item controls are:

  • General – various settings including choice of text alignment and adding CSS class or ID.
  • Icon – set an icon to show with the menu. For the full range you need the UberMenu Icons Extension ($8).
  • Image – any image that will be shown adjacent to your menu item.
  • Layout – choose the column display and position of any images used.
  • Submenu – configure the submenu display.
  • Custom Content – add HTML and shortcodes quickly without using a widget.
  • Widgets – insert widget areas into menus and choose the number of columns.
  • Customize Style – select colors and padding for different menu items.
  • Responsive – hide or disable the menu at different breakpoints.
  • Deprecated – you can safely ignore this if you are a new user.

Cool Things You Can Do with UberMenu Advanced Items

#1. Creating a submenu for a Contact page with a Google Map and a contact form

I achieved this by using the Widget Area item set to a two column layout. The two widgets were added to a named UberMenu widget area in Appearance > Widgets.

UberMenu widget with Google map and Contact form
UberMenu widget with Google map and Contact form

#2. Creating a custom two column layout

I achieved this with Column items for my Soups submenu.

UberMenu Soups submenu using Columns
UberMenu Soups submenu using Columns

#3. Adding the last three blog posts under “Blog”

This was much easier than doing the same in Max Mega Menu as I was able to choose an automatic three column layout. The “Dynamic Posts” item has some advanced WP Query built-in. Had I wanted to, I could have filtered by category, changed the sort order or excluded posts.

UberMenu 3 column Blog with Dynamic Posts
UberMenu 3 column Blog with Dynamic Posts

#4. Using a tabbed submenu

Leaving aside the food theme, I installed WooCommerce and its dummy data.

Here’s the menu setup for my shop, using the tabs block.

UberMenu setup for Shop with Tabs
UberMenu setup for shop with tabs

I adjusted the number of dynamic posts for each product category to fit the submenu gracefully.

UberMenu shop with tabbed submenu
UberMenu shop with tabbed submenu

Using UberMenu for Tablet and Mobile

On my phone, I found that tapping a top-level menu item once opened the submenu while tapping it again opened that page. It was beneficial that the user could access the top-level menu items, though I found that particular menu behavior slightly unexpected.

Each submenu has a Close link at the bottom to close it.

My column layouts were retained for my Soups submenu.

UberMenu Soups submenu on Android phone
UberMenu Soups submenu on Android phone

However, I continued to have problems with the Video widget working in a column layout. A Custom Content item with the embed code for the video worked better, but was cut off on mobile.

UberMenu with Custom Content embedded video on Android phone
UberMenu with Custom Content embedded video on Android phone

The tabbed interface went from horizontal tabs on desktop to vertical tabs on mobile.

UberMenu tabbed submenu on Android phone
UberMenu tabbed submenu on Android phone

Are Mega Menus for Everyone?

Mega menus are powerful and work well for certain industries such as current affairs, education, and ecommerce.

They can be a good way to:

  • Highlight product categories and sale items for online shops.
  • Make users aware of less obvious sections of a site and explain their purpose.
  • Show featured images for posts or product photos.

But they’re not suitable for every type of site. If you have a small and simple site using a mega menu will be overkill.

As you’ve seen, mega menu behavior on mobile needs to be checked carefully to avoid display and interaction problems. Plus large menus may not be desirable for mobile devices.

There are also potential SEO issues with mega menus – too many links can result in a dilution of “link juice.”

Finally, mega menus which disappear too quickly when users attempt to interact with them are a no-no.

Whatever approach you take, it’s important to plan out your site navigation logically and avoid the user having to make too many clicks to reach their intended goal.

You should also:

  1. Have a visible search box on every page.
  2. List out child pages on your top-level pages.
  3. Consider using a sitemap.

Have you used mega menus on a site? Did they help user experience? Let us know what you think in the comments below.

Tags:

Claire Brotherton Claire studied for a BSc in Computing, graduating from Edinburgh Napier University with First Class Honors in 2012. She has been running her own business as a freelance web developer since 2013 and began blogging about WordPress and web accessibility in 2014.

Rick Crawshaw Rick Crawshaw is a writer at WPMU DEV. Before joining the company and learning the ins and outs of WordPress web development, he worked as a freelance copywriter and marketer. You might also recognize his punny style from our weekly WordPress newsletter The WhiP. Follow Rick on Twitter.