As with any website change you consider for your brand, I beg that you recommend you start by considering not the content on your website or current design trends, but the user experience. Consider the mega menu a gift you can give your website visitors; do it correctly, and you’ll be rewarded with interest, engagement, and conversions.
Although website mega menus were first introduced more than a decade ago, they have only grown in popularity. Why? As websites overall have been more complex – offering visitors more options than ever before – the mega menu serves as a quick and efficient way for users to find what they are looking for without friction.
Mega menu best practices
We all know bigger doesn’t always mean better, so let’s look at a few successful examples and consider some important do’s and don’ts anyone can follow.
1. Focus on the user journey.
Consider where users enter your website and what they are searching for. In the example from 6sense, the marketing team had a clear understanding that users need to have an option to search by their role (“who we help”) or by feature (“how we do it”). As an added bonus, having those choices available next to one another shows users a depth and breadth they might not otherwise see in one place.
2. Use categorization to avoid option overload.
Hubspot offers multiple resource types. By utilizing categories and keeping sub-categories to five or fewer, and listing the most popular first (blog), they have made this information scannable and created a positive user experience.
3. Use keywords and terms your target audience understands and expects.
Although you have more room in a mega menu than in your top navigation, please don’t use that for internal jargon. You know your target audience – get in your users’ heads and present them with exactly what they are seeking out. (Need to explain things further? Both Restaurant365 and 6sesnse use short descriptions as a helpful guide).
4. Speaking of those short descriptions…don’t be the cause of rage clicks.
A good design will make it obvious when something is a clickable link vs. added context that does not lead to a page. Note the descriptions here are a different text color, smaller font size, and spacing between clickable options helps users understand what to do without noting the thought that went into these choices. User test or rely on a heat mapping tool to tell you if your design passes muster. Because remember, a frustrated user on your website becomes a customer on someone else’s site.
5. Use icons.
Yes, you can inject some visual interest and fun into your mega menu with images. Not only are the icons used in the examples here a good visual for the subject matter they represent, they offer a visual break from text and serve as bullet points dividing up options in a way that makes it easier to digest the information.
6. Make your mega menu mobile-friendly.
This might mean adjusting for the mobile experience, but it definitely means testing on mobile devices to ensure that the user experience is a good one regardless of how different it looks from your desktop version.
7. Use space wisely for a related offering, resource, or page.
In both the Restaurant365 and 6sense examples, you’ll note that each took advantage of the width of the mega menu and use the right side of the space for something tangential to the menu. This is a great space to test linking to a related page such as pricing, or showcase a case study or new resource.
If your website users could use some help navigating, a mega menu is a great option. Done correctly, it is an effective, efficient way to get visitors to where they want to go faster, thereby decreasing friction and increasing engagement with your brand.
