If you have bought anything online from a major retailer, you’ve likely used a mega menu.
Designed to provide site users with a simple top navigation and detailed options below, mega menus show more links and sub-categories of information and improve how users navigate a site.
For instance, when shopping on a clothing site, your top menu would be very simple, providing options 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 with a broad collection of projects and programs.
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:
In contrast, we added a mega menu to Orion Magazine’s site to provide their users easy access to topics and their current magazine issue.
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 both of these sites:
- On Interfaith Alliance, we added space to describe what can be found under each section and to provide users with more context for the links.
- For Orion, their “current issue” content automatically updates based on their most recent issue pages.
Could your organization benefit from a mega menu?
Here are some questions to consider:
Is Your Content Organization Clear?
With both 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.
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 Mega Menu Layout?
Whether you’re using images or font styles, it’s important to give your users visual cues for the hierarchy of your navigation and what they can expect to 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:
You should also make sure your links are clearly categorized and that 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 It 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, Smartwool’s navigation collapses into a tiered structure that mobile users can click through to navigate:
Other options include having the menu “fly out” from the side of a mobile view, as is done on Orion Magazine’s site:
How do I get started?
While it’s always 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.
Here are some of our favorites:
Looking for a way to expand the functionality of your mega menus? Download our free Widget Menuizer WordPress Plugin.