Rise of the Mega Menu: 10 Well-Designed Examples

By Adrienne Erin, October 12, 2017

Ah web design, you silly, fickle beast. 

How many times have you heard that one type of UI design or layout was preferred, only to hear weeks later it’s not all it’s cracked up to be? Collapsible menus, front-page carousels, animated loading screens, excessive JavaScript, and who could forget parallax scrolling?

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. 

mega-menu-example-amazon.jpg

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.

Related Post: Footer Inspiration: 6 Effective Ways to Use This Unsung Space

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.

Related Post: 4 Kinds of Visual Content That Will Expand Your Reach

mega-menu-1-office-depot.jpg

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.

2. MSNBC

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.

Replacement MSNBC.png

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.

mega-menu-3-blacks.jpg 

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?

mega-menu-4-reading-truck-body.jpg

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.

5. Build.com

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. 

mega-menu-5-build.jpg

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.

Envelopes Retake.jpg 

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.

7. Moleskine

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.

mega-menu-7-moleskine.jpg

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.

mega-menu-8-quincy.jpg

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.

9. Moosejaw

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. 

mega-menu-9-moosejaw.jpg

This type of organization ensures that your visitor can browse your product offering the way they want to browse.

10. Award

What happens when you go against the grain? Award’s vertical sliding mega menu is a great example.

 Award_Retake_Image.png

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.

Related Post: 4 Ways Brick-And-Mortar Stores Can Profit With Mobile 

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?

New Call-to-action

Adrienne Erin

Adrienne Erin

Adrienne Erin is a freelance writer and designer based in Pennsylvania. To see more of her work, visit her blog Design Roast or follow @adrienneerin on Twitter. More Articles by Adrienne Erin