If you have a lot of pages on your website, you’ll eventually want to create submenus. A mega menu is a wide menu with multiple columns of sub-pages. A drop-down is a narrow menu with a single column. Which is the best choice?
Drop-down Menus
Drop-down menus are a reasonable choice if you only have a small number of sub-pages. If you have a larger number of pages, or a subsection of a subsection, I would advise against using secondary fly-out menus, because they’re inaccessible and hard to acquire with a mouse. Use a mega menu instead.
The homedepot.ca site uses secondary and tertiary fly-out menus, but at least they load on click instead of on hover, and stay loaded after you’ve clicked on them. Each submenu is scrollable though, which suggests to me that they should have used a mega menu.
The homedepot.com site used to have mega menus, but now it has a drop-down menu on the right.
If you do use drop-down menus, check that they work on a mobile device, since 60% of your site’s visitors will be viewing it on a mobile. Most websites display the drop-down menu when you hover over its parent item on the horizontal navigation.
The WordPress navigation block has the option to create drop-down menus. If you create your subpages as child pages of their parent item, it will structure the menu accordingly. Just be aware that if you edit the navigation manually, it will no longer automatically add pages to the menu.
The Wix horizontal menu has two settings, advanced and basic, and has an option for drop-down menus for subpages. If you select the Advanced option, it will no longer automatically add pages to the menu.
GoDaddy’s navigation allows you to add drop-down submenus.
Mega Menus
A mega menu gives you scope to add images and descriptions of links, and to organize your subpages into columns. This is great if you have a lot of subpages to add links to.
Large, rectangular menus group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices.
~ Jakob Nielsen, Mega Menus Work Well for Site Navigation – NN/G
Mega menus feel more stable and are easier to use because the menu items present a bigger target for the mouse pointer.
If you use a mega menu, be sure to organize the information into columns, because people scan vertically, not horizontally. Icons next to menu items and descriptions of what’s on the target page can be helpful too. And white-space and images provide visual relief from the density of information presented.
Some websites have a mega menu that takes up the full width of the screen; others have smaller ones that do not take up the whole width, but are still bigger than the traditional one-column drop-down menu.
It is good practice to add a transparent grey overlay on the page while a full-width mega menu is open.
For mega menus that do not take up the full width of the screen, it is better to add a drop-shadow to emphasize that it is distinct from the background.
Feeling overwhelmed?
If you’re feeling overwhelmed by organizing the information on your website, our user journey workshop might help.
How to add mega menus
There are a lot of WordPress plugins for creating mega menus. If you install one, must-haves are making sure that it works on a mobile device; lets you add icons, headings, and images; and lets you reorganize the menu items.
Wix has a built-in mega menu, but it is under the Advanced option, so once you’ve selected it, it will no longer automatically add pages to the menu.
GoDaddy does not appear to have an option for adding mega menus.
User experience is key
If visitors to your website get frustrated with the user interface, they will leave. So it is great to have tools like the mega menu available, especially now that there are plugins or built-in options for adding them.
Let us build it for you
We can create a new mega menu or website for you, or spruce up your existing navigation or website.