What are they and how to use Mega Menu in WordPress

Large, rectangular menus group navigation options to eliminate scrolling are great for sites with many pages. Understand what Mega Menu in WordPress is

Mega menus (sometimes called “mega menus”) are a type of expandable menu in which many options are displayed in a two-dimensional drop-down layout. They are an excellent design choice to accommodate a large number of options or to quickly reveal lower level website pages.

As the screenshots below show, mega menus have the following characteristics:

  • Grandes two-dimensional panels divided into groups of navigation options;
  • Navigation Options structured by layout, typography, and (sometimes) icons;
  • All visible at once – no scrolling;
  • form factors vertical or horizontal when activated in the top navigation bars; when activated from the left navigation, they may appear as mega fly-outs (not shown);
  • Menu options revealed to the mouse over, click or tap

Mega menus provide enough space for images and other rich content. Mega menu images can help users to select the right option. Mega menus also allow designers to show various levels of the site's information architecture, mega menus contain first level categories and second level categories.

Mega menu in wordpress
The Mega Menu on the World of Warcraft website

Mega Menu are better than regular dropdown menus

For larger sites with lots of features, regular dropdown menus often hide most options from the user. Yes, you can scroll, but (a) it's a headache and (b) scrolling hides the options at the top of the menu. As a result, you cannot visually compare all of your choices; you have to rely on short-term memory. People already have enough in their heads and messing with short-term memory reduces the ability to perform tasks on your website. Mega menus show everything at a glance, so users can see instead of trying to remember.

-- Advertising --

Regular drop-down menus don't support grouping unless you use some workaround in your code, such as prefixing secondary options with a space character to indent them. Mega menus allow you to visually emphasize the relationships between items. Again, this helps users understand their choices.

While plain text can be wonderful, illustrations can really be worth a lot of words. Mega menus make it easy to use images and icons when appropriate. And, even if you limit yourself to text, you'll have richer typography at your disposal (allowing you to differentiate link sizes according to their importance, for example).

Time Considerations for Mega Menu on WordPress

If mega menus are displayed on mouse over, a challenge is to distinguish between two different user intentions.

  • The user just moves the mouse towards a target on the screen, and the mouse trajectory crosses the link corresponding to the mega menu;
  • The user actually looks at the navigation categories and needs more information about them.

The second situation should trigger the mega menu, but the first doesn't.

To take these two user intentions into account, don't make the response time of a WordPress Mega Menu too fast: the mouse must remain stationary for 0,5 seconds before you display anything that depends on focus, like a mega menu or a tool tip. Breaking these rules will cause the screen to flicker unbearably when users move the mouse. Only after 0,5 seconds with the pointer stopped on a navigation bar item can you assume that the user really wants to see the associated drop-down menu.

-- Advertising --
Mega menu
Mega Menu

So the time should be:

1- Wait 0,5 seconds.

2 – If the pointer is still hovering over a navigation bar item, display its mega menu in 0,1 seconds.

3- Keep showing until the pointer is off the navigation bar item and drop-down menu for 0,5 seconds. Then remove it in less than 0,1 seconds.

An exception to item 3: best implementations can detect when a user is moving the navigation bar item pointer to a drop-down target. When the pointer is on such a path, the drop-down list must remain visible. This supplemental guidance addresses the diagonal problem, which occurs when the path temporarily takes the pointer out of the active area. The dropdown list shouldn't disappear when the user is on the way to point to something inside it.

-- Advertising --

Adding a Mega Menu in WordPress

The first thing you need to do is install and activate a Mega Menu plugin. We can recommend the Max Mega Menu. It is the best free mega menu WordPress plugin available on the market. After activation, the plugin will add a new menu item, Mega Menu, to your WordPress admin menu. Clicking on it will take you to the plugin's settings page.

Mega Menu WordPress Settings

The default settings will work for most sites. However, you will need to change the menu colors to match the colors used by your WordPress theme's navigation menu. To find out which colors are used in your theme, you can use the Inspect tool (right-click on the website and “inspect element” or hit F12) in your browser.

Once you get the hexadecimal color code, you can paste it into a text file for later use. Next, you need to visit the mega menu settings page, click on the 'Menu Themes' tab and then click on the 'Menu bar' section.

Setting up your mega menu
Setting up your Mega Menu

Here you can substitute the background color used by the mega menu to match the colors of your theme's navigation menu. Don't forget to click the Save Changes button to store your settings. Now that we've configured the mega menu settings, let's go ahead and create our mega menu.

First you need to visit the Appearance » Menus page and then add top level items to your navigation, these will likely match your main pages on your site. Then on the Menus screen, you need to enable the mega menu by checking the box under 'Max Mega Menu Settings'.

-- Advertising --

After that, you need to move your mouse to a menu item and you will see a “Mega Menu” button appear in the menu tab. Clicking the button will open a popup. Here you can add any WordPress widget to your mega menu and select the number of columns you want to display.

You can also click the wrench icon on a widget to edit the widget's settings. Don't forget to click the Save button to store the widget settings. Once you're done, you can close the popup and visit their website to see the mega menu in action.

Grouping options into a Mega Menu

The main grouping guidelines are:

  • Divide the options into related sets, such as those you discover after doing a card ranking study of the resource users' mental model;
  • Maintain a medium level of granularity. Don't offer large groups with multiple options that require a lot of time to study. On the other hand, don't make the individual groups so small that the mega menu has an abundance of groups that users have to spend time understanding;
  • Use concise but descriptive labels for each group. Remember the standard rules for writing for the web: improve readability by starting with the word that contains the most information and avoid made-up terms;
  • To keep the words short and to the point; the basic form of verbs (“buy”) is generally better than gerunds (“will be buying”);
  • Differentiate labels will help your users know what they're looking for;
  • Order the groups. You can do this using an inherent order between resources (such as for a workflow) or according to importance, placing the most important or frequently used group in the upper left corner (assuming a left-to-right language like Portuguese);
  • Show each option only once. Duplicate options make users wonder if the two occurrences are the same or different. Also, redundancy makes the entire interface bigger and more complicated.

Keep Mega Menus Simple

The standard usability guideline to “keep it simple” also applies to mega menus. Just because you can put anything in them doesn't mean you should. Simplicity applies to interaction semantics, at least as much as it does to the presentation layer. Fewer options mean less to scan, less to understand, and less to make mistakes.

In particular, avoid widgets and other interface elements that involve more advanced interaction than a simple click. Mega menus are a passing presence on the screen and should not replace dialog boxes, which are the natural home for more complex interactions and can handle them better. Among other benefits, dialogs have a default dispense method (the OK / Cancel buttons), remain on screen until dismissed, and can be moved if users need to see something the box hides.

-- Advertising --

Likewise – but even worse – is hiding the search box inside a mega menu. This is bad for two reasons:

  • The search box should be continuously visible on the page, rather than just being displayed when users activate the mega menu.
  • Having graphical widgets (a text field and a command button) makes the mega menu a heavy interaction area rather than a simple navigation menu.

Accessibility of Mega Menus

Because dynamic screen elements always have the potential to cause accessibility issues, it's important to code them with screen readers and other assistive technologies in mind.

Even if coded correctly, mega menus can cause problems for users with low vision who use screen magnifiers to enlarge small parts of the screen. (The same issue affects smartphone and tablet users.) With a small screen or a screen magnifier, only a small part of the mega menu can be visible.

Users can assume that visible content is all available content and therefore the site could lose orders if it had too many customers with low vision (a common situation for sites targeting older users). Having a strong visual cue for menu borders is one way to alleviate this problem.

In addition, tiny options within mega menus cause selection errors on touchscreens and overly demanding display/hide behaviors harm people with physical disabilities.

-- Advertising --

There are two main approaches to improving the accessibility of mega menus:

  • Simple: don't worry about making the drop-down menu accessible. Instead, make each top-level menu option clickable, leading to a normal web page where you present all of the drop-down options in simple, fully accessible HTML.
  • Advanced: Edit the backend site using a jQuery plugin that will make the mega menu screen reader accessible. This will also require structural changes to HTML and CSS.

If you are a large company and/or especially concerned about accessibility, you should implement both simple and advanced features. Most sites, however, will probably have to settle for a simple approach.

Make the most of your Mega Menus

Mega menus can improve your website's navigability. By helping users find more, they will help you sell more (or meet other business goals, such as attracting donations or disseminating useful information to government or non-profit websites).

Now, leave it in the comment, do you have or use a Mega Menu on your website? I already knew this feature. Take the opportunity to read more about WordPress on our website.

-- Advertising --
Avatar of paulo factory

Paulo Fabris is a journalist, writer, RPG player, gamer, cosplayer, nerd and fan of anime since the time of TV Manchete.