Website design best practices have shifted over time. From blinking text in the early days of the Web to sliders later on, popular trends can become passé rather quickly. Enter the mega menu, one of the more recent design trends to gain popularity. Let’s take a look at what a mega menu is and whether or not mega menus are the right choice for your site.
What are mega menus?
A typical website menu is known as a dropdown menu. It contains a list of links, some of which provide a list of items beneath them that drop down — the source of a dropdown menu’s name. For example, the menu at the top of this page is a typical dropdown menu. Some items, like Contact Us, provide dropdown options — in this case, other ways to contact us, like social media sites.
In contrast to a dropdown menu, a mega menu typically provides many more items in the dropdown box. The dropdown box will generally cover the entire width of the screen, and oftentimes, the dropdown menu will cover most or all of the screen. Dropdown menus typically feature no more than 10 items in the dropdown list, but mega menus can have 20, 30, or even more items listed.
Learn more about menus: Navigating WordPress navigation: 3 tips to working with menus
What are the benefits of using mega menus?
Mega menus allow the opportunity to provide links to many pages at once. If your website has an extremely lengthy navigation, you can provide direct links to many pages without having to navigate through multiple pages to arrive there. For example, if you own a website that provides some sort of global statistic that is also broken down by region, you could have menu items for each continent and provide a link to each country’s page underneath. With 54 countries in Africa and 44 in Europe, this would be difficult to accomplish with a standard menu.
What are the drawbacks of using mega menus?
Because mega menus present so much information at once, finding the right link in an enormous list can be tedious and overwhelming to users. If data is not presented in an extremely organized fashion, it could take users too long to find what they’re looking for — and if website statistics tell us anything, it’s that they’ll leave your website and go elsewhere before they’ll spend much time searching in earnest for the data they want. Mega menus can be self-defeating in that they make finding information more cumbersome even though they present more information at one time.
Also, mega menus present potential accessibility challenges. If someone is using a screen reader, a mega menu could be difficult or even impossible to navigate. And even if a mega menu is compatible with a screen reader, the immense amount of time of listening to the device rattle off 50 menu options will likely frustrate these users.
What other alternatives can you use to mega menus?
Due to the UX and accessibility challenges mega menus present, you may choose to go another option. Here are a few ideas of what you can do:
Simplify your navigation. How many pages really need direct links in your menu? Can you create pages to serve as starting points to get to other pages and still provide your visitors with a seamless experience?
Consider other methods of organization. Should some parts of your website be discovered through the search bar instead of the menu? Can you implement a primary and secondary menu? Can you add a footer menu with different links?
Use a dropdown menu with submenus. If you can find a way to organize your menu into more sections, you might not have any one section with an abundance of links. Consider your menu hierarchy and if there’s a logical, easily-navigable way of organizing your content into more refined categories.
Examples of websites using mega menus
Office Depot OfficeMax
Office Depot OfficeMax appears to have made a very intentional design decision on their use of the mega menu. Using only three primary menu items — Products, Services, and Deals — leaves plenty of room for a search box and more dropdown items on the right side: a store finder, contact us, account information, and a shopping cart icon. This allows them to pack a ton of useful links into one menu bar and maximize the amount of screen space that is used for viewing the content itself.
Walmart presents a unique take on the mega menu. The menu appears as a “hamburger” side menu, and each category opens up a mega menu from the side.
The Home Depot offers a hybrid dropdown and mega menu. The far left “all departments” menu shows a traditional dropdown menu, but the other menu options to the right utilize mega menus.
News websites often utilize mega menus because of the wide-ranging categories of information available on them. NBC News provides an interesting choice of menus. They have a top row of links directly to their popular news shows, and a second row of menus linking visitors directly to popular topics in the news. These two rows of menus don’t utilize any form of a dropdown menu, bu instead link directly to pages for these shows and news topics. On the far right of the second row, a hamburger menu opens up into a mega menu with all of their news categories listed.
Like news websites, entertainment news websites utilize mega menus in different ways, due to the sheer number of categories of information they provide. Even as an entertainment website on the lighter side of “news,” Buzzfeed is no exception.
Was this tip helpful? Subscribe to receive more!
Get our free WordPress tips delivered to your inbox once a week with MPWR Monday, our weekly email list. You’ll receive one email every Monday with a new WordPress tip.
You’ll also receive our Latest Post Redirect plugin for WordPress when you sign up! Latest Post Redirect allows you to use a shortcode to redirect a post or page to your latest blog post. Use it to keep an link to your latest work that automatically updates when you create new content.