Go Big! Mega Menu Best Practices for WordPress Navigation

If you have bought anything online from a major retailer, you’ve likely used a mega menu.

Mega menus are designed to provide site users with a simple top navigation and detailed options below. They often allow more space to show more links and sub-categories of information, which improves how users navigate a site.

For instance, when shopping on a clothing site, your simple top menu includes links for Men, Women, or Kids. Clicking to expand one of these options will then reveal subcategories for shirts, pants, shoes, and accessories. Finally, more detailed and direct links may be provided to filter your options by manufacturer or material types.

A similar navigation approach is useful for any organization looking to follow WordPress menu best practices with a broad collection of projects and programs.

How Do I add a Mega Menu on My WordPress Website?

The problem with rich dropdown menus is that there aren’t many easy-to-use, out-of-the-box solutions for building and maintaining them.

WordPress’s third-party “mega menu” plugins tend to be a little overbuilt. Specifically, the plugins often abandon the familiar WordPress menu-building interface. The resulting interfaces are often unrecognizable. Sometimes, the plugins take extreme control over the rendering of the menu by only allowing “themes” for your menu options.

We’re not fans of how unintuitive these plugins make the pure WordPress experience so we took a crack at solving them: Our Widget Menuizer is a different approach to providing rich dropdown menus in WordPress.

Instead of overriding WordPress’s existing systems, we’ve used WordPress Menu best practices to preserve and extend them. Our Menuizer builds a bridge between the sidebars+widgets functionality and the menu system.

It’s long been possible to embed Custom Menus as widgets in a sidebar (“widgetizing” them). But Widget Menuizer makes it possible to place so-called sidebars into your WordPress menus.

Anything you can do with a widget can now be done inside your menus! This makes the menu system much more powerful. Any plugin or tool that generates output as a widget can thus now be placed into a menu, providing more flexibility.

Why not enhance your visitors’ navigation experience by adding informative thumbnails to menu items, so that folks more easily understand menu content?

Here are some of our favorite examples of how we’ve used WordPress menu best practices to build robust mega menus.

Nonprofit Mega Menu Example: Interfaith Alliance

We used a mega menu on Interfaith Alliance’s website to highlight all of the resources and options that they provide for their users to get involved:

A screenshot of the Interfaith Alliance mega menu exemplifies WordPress menu best practices, showing how font colors and link placement make a difference in the structure of the mega menu.

Nonprofit Mega Menu Example: Orion Magazine

In contrast, we added a mega menu to Orion Magazine’s site to provide their users easy access to topics and a direct link to their current magazine issue that dynamically updates, making ongoing management a breeze.

A screenshot of the Orion Magazine mega menu shows how current issue content is dynamically updated with most recent content, following WordPress menu best practices.

Nonprofit Mega Menu Example: Student PIRGs

When planning your site navigation, it’s important to follow best practices in hierarchy of content. The Student PIRGs also felt that it took too many clicks to get to their campaigns. First, a user needed to click on campaigns, then an issue. And then they had to read background information just to click again to finally get to the urgent action!

Instead, we used Widget Menuizer to feature their three highest priority campaigns directly in the Campaigns dropdown menu.

A screenshot of the Student PIRGs campaign menu shows how WordPress menu best practices include featuring high priority actions up top in the mega menu.

WordPress Mega Menu Example: LimnoTech

LimnoTech was in an unusual situation, where their navigation is rather simple and didn’t even need dropdowns… that is, except for the need to showcase their 20+ service areas!

WordPress Mega Menu Example: DivvyCloud

Our friends at DivvyCloud not only wanted to showcase their robust navigation menu, but wanted to feature images, icons, and call outs within their menu. The mega menus gave us more space to provide dynamic and rich content to users.

In addition to providing more space for the links, we also used our free Menuizer WordPress plugin to add dynamic content to the menus for these sites.

Could your organization benefit from a mega menu?

Here are some questions to consider:

Is Your Content Organization Clear?

With all the above examples, the abundant information presented in the mega menus can be easily assigned to specific categories.

If you are not sure exactly where a particular page from your site should be categorized within your site structure, it’s not going to be any less confusing when you add that link to a mega menu. Card Sorting exercises can be very valuable in determining your categories.

As this post from Nielsen Norman Group notes, just because you can put anything into a mega menu doesn’t mean that you should. Each mega menu should have an easily-identifiable theme and purpose. This way, your users will not feel overwhelmed and will not give up on using your site.

How Can You Simplify Your WordPress Mega Menu Layout?

Use images, icons, or font styles to give your users visual cues for what they can find under each mega menu.

If there’s space to summarize the theme of the menu, this can help provide context. For example, we used widgets to add a brief description and link to more information for each mega menu on Interfaith Alliance’s site:

Follow WordPress Menu best practices to categorize links clearly and make sure category headings are clear and easy to distinguish from the links in your lists.

Finally, make sure that you also have enough room for plenty of “white space.” Your supporters will need some visual “breathing room” so they aren’t overwhelmed by a long list of links.

How Will a Mega Menu Work On Mobile?

While mega menus are amazing navigation tools for desktop visitors, the large layout doesn’t usually work on smaller screens.

Before you implement any mega menu solution, be sure to test it out on a variety of smaller devices.

For example, DivvyCloud’s navigation collapses into a tiered structure that mobile users can click through to navigate:

We retained the use of icons, so visitors still have a visual cue as to what will be in that section, but removed a lot of the dynamic content that didn’t fit the space nicely.

You could also have the menu “fly out” from the side. See how Orion Magazine’s navigation uses a side display:

How do I get started?

While it’s often best to write custom code for your mega menu, there are dozens of WordPress plugins to help you to add this functionality to your site, starting with Widget Menuizer.

Here are some other WordPress plugins that might be helpful in creating your mega menu:

Looking for a way to follow WordPress menu best practices and expand the functionality of your mega menus? Download our free Widget Menuizer WordPress Plugin.

By

Ben is our very own designer/developer unicorn. He’s been designing on the web professionally for over 17 years, but he’s also been a developer for almost as long, building up extensive experience with languages such as HTML, CSS, JavaScript, and PHP, and putting them to good use implementing his designs on several CMS platforms, including WordPress and Drupal. In addition to his own work, Ben oversees the design and development the rest of our team does, ensuring it’s up to our high standards. He enjoys sharing his knowledge, and has presented to groups of varying sizes on topics like the difference between print and web design, web typography, WordPress widgets, and front-end performance.