Ah web design, you silly, fickle beast.
But, every once in awhile, a new trend sweeps the digital airwaves and sticks. It stays because it makes perfect sense to incorporate into designs. It improves the performance, convenience, and user experience of your site.
One such design is making waves now, and it’s called the mega menu.
What Is the Mega Menu?
The mega menu (or megamenu) is a two-dimensional accordion-style expandable menu. Retailers like Best Buy and Amazon have been using them for years.
They’re extremely efficient when you have a long list of subpages and menus like Amazon. If Amazon's menu was presented as a single, top-seated menu, then things would get pretty cluttered. It would look downright hideous, too.
But with a mega menu, every major option is visible at one time, so no scrolling or panning necessary, even on mobile.
The mega menu can be vertical or horizontal, depending on your design preferences and industry. And additional menu options can be revealed when you hover, click, or tap. This allows for a more engaging and expansive menu system.
The Mega Menu in Action
Now that you have a better understanding of what a mega menu is, let’s see it in action. This will allow you to better gauge and learn how you can implement it for your own website and brand. Here are 10 solid examples of mega menus.
1. Office Depot
One of the best things about Office Depot’s mega menu is that it includes visual elements, too. Notice how a highlighted dropdown will show icons and images of the product categories? It’s super convenient for customers.
In particular, check out the “school supplies" submenu. It’s even separated into grade levels for better sorting. They really went the extra mile for their customers, and both parents and teachers can find what they need for their kids.
Talk about minimal: MSNBC kept it incredibly even-toned across the board. There are no icons, only a few visual dividers and no gaudy styling elements. Instead, it’s just the typography that lists all the different menu options.
What’s interesting is that MSNBC has several menus rolled into one here. It’s divided into three sections including explore, watch, and newsletters submenus. Select any one of them, and you’ll be treated to a separate, mega menu with more options. This is a great setup, and it offers good performance and reliability.
3. Blacks Outdoor Clothing
Because Blacks is a clothing provider and not a single brand, you’ll notice they have several options for various companies and partners. The standard mega menu is great, but take a closer look at their “brands" section.
Some of the most popular brands they carry are right there in the submenu, complete with icons and logos. How awesome is that? Notice how the submenu is still clean and minimal in nature? It doesn’t take up too much room and doesn’t over saturate the design.
4. Reading Truck Body
This is a great example of how you can style and design the mega menu so that it better matches your theme, brand colors, and personality. Notice how the menu is incorporated right into the header of the site?
When you highlight one of the options the submenu appears. The “products" menu shows images of the various options you can select. But even more interesting is how the company rolled the search bar into the “work with reading" section. That’s unique and innovative.
Sometimes, even with a huge, sweeping menu like a mega menu, you want it to be tasteful. One way to do this is by not letting it take up your entire front page. Build has a great menu that encompasses only a small portion of the screen. It’s a relatively thin bar that shows images, icons, etc.
Hover over any one of the departments listed in the menu, and you’ll see what I’m talking about. It’s a great way to structure the menu.
6. Action Envelopes
In terms of the overall style and layout, Action Envelopes is similar to other mega menus; however it does have two different color-based menus.
In the main menu under “products," you can shop by color, which has individual colors of stationary. You’ll also notice below the search bar there are more color options, denoted by icons. Again, this is a unique setup that speaks to the personality of the brand.
If you want a better example of an all-visual menu, then Moleskine is the place to explore. Notice how the submenus all use high-resolution product images for each of the departments and categories.
It works particularly well on mobile because the menu is responsive and adapts well to smaller screens and touch-based controls. Don’t just check it out on desktop, pull it up on a mobile device if you have a moment.
8. Quincy Compressor
Industrial eCommerce sites are some of the most difficult to organize. A wide product offering and the need to service a variety of industries makes for a lot of different ways you need to slice your product offerings to make navigation more user-friendly.
Quincy Compressor divides their products menu into three distinct parts: a list of their most popular products, resources for choosing the right product, and a list of industries served. At the bottom of the menu, visitors can choose an option to download their full product catalog. It’s a thoughtful, compact menu that serves many different interests.
Moosejaw packs a ton of information into their mega menus, while maintaining a really clear hierarchy. There are shortcuts to popular brands, sale specials, as well as links to major sections and subcategories
This type of organization ensures that your visitor can browse your product offering the way they want to browse.
What happens when you go against the grain? Award’s vertical sliding mega menu is a great example.
Their menu doesn’t include a whole lot of options or subpages, but that’s okay. Just tap or click on the “expand" button, and the typography appears beside each icon. Collapse the menu, and all you see are the individual icons. It’s clean, fresh, and unique.
Why the Mega Menu Is Here to Stay
The modern mega menu is one design trend that will be sticking around. As we switch to mobile and responsive design, companies will need to make their navigation panels more user-friendly. A mega menu is an efficient way to do it.
But remember you don’t have to honor the same patterns and ideas that everyone else is using. Feel free to spruce up your mega menu with a bit of personality and style. Dare I say, be a little unorthodox?