Best Practice | 5 mega menu styles and 12 excellent examples

On their face, mega menus all seem alike. You roll your cursor over a word at the top of the page and a large panel with columns of links pop-up. Pretty simple stuff.

But as it turns out, mega menus are much more than a listing of links.

Today, mega menus are about marketing as much as navigation. Whether it is a new product, major event, piece of content, or support feature – this valuable real estate is being used to promote messages while also speeding visitors to information.

To find out how this new generation of mega menus are structured and what benefits they bring to the party, the siteIQ team visited the 25 sites on the siteIQ eBusiness Index. Then we cataloged the sites that provide mega menus and examined their features and designs.

When we look across the landscape of mega menu styles five common types emerge:

  1. The Highlighter
  2. The Hero Spot
  3. The “Sticky” Menu
  4. The Mega Mega Menu
  5. The Full Screen

So, how are each of these styles designed, what are their benefits, and who does them the best? We’re glad you asked.

1. The Highlighter

This mega-menu style provides both high-level and detailed navigation options. This style is perfect for teams that want to highlight pages that would otherwise get lost in a sea of mega menu options. The most popular links include (but aren’t limited to) free trials, product indices, industry information, or overview pages.

 

CA.com’s Highlighter mega menu provides high-level navigation links on the left side of the panel with detailed options on the right. This layout lets visitors get to top level pages, such as a product overview, product index, and trial software, while keeping access to specific products front and center. CA.com also uses a subtle Hero Spot style (see design style #2 below) to highlight related resources.

 

PaloAltoNetworks.com is an example of The Highlighter mega menu – and then some. Not only does the menu deliver high-level navigation and detailed navigation (with descriptions), but it has dynamic navigation within navigation. If the visitor selects a high-level option with a plus sign next to it, it opens a whole new set of selections right in the menu. This lets visitors get to almost any page on the site directly from the mega menu. If Palo Alto Network’s site isn’t usually in your travels, stop by and give this mega menu a test drive.

SAP.com has a unique take on the Highlighter mega menu style. It uses a gold side panel to feature points of interest for each major navigation area. For example, the Products menu uses the space to list the most relevant solutions topics (e.g., IoT, Blockchain, Cloud), which eliminates that pesky “Solutions” link and helps keep the navigation clean. Meanwhile, its Community menu highlights important points of interest that illustrate some of SAP.com’s Community features (e.g., Member of the Month, Rules of Engagement, and a Quick Start Guide).

2. The Hero Spot

This mega menu style is the most eye-catching of the group. It saves ample space for a hero spot that promotes a product, solution, event, or piece of content. These designs are more elaborate than other styles since they often use bold imagery to capture visitors’ attention.

 

HPE.com’s Hero Spot mega menu is the most beautiful of the bunch. It displays photos that run off the edge of the menu margin and includes bold headers and descriptions. Also, the large menu footprint allows ample space for clean, well-organized link selections including short summaries.

Salesforce.com’s Hero Spots use a more conventional presentation than HPE.com in that the content is displayed within the menu margins. What sets Salesforce.com from the pack is its bold use of color and varied placement on the different menus. The site mega menus also use The Highlighter approach on the Products panel to get visitors to a greater selection of high-level pages.

 

IBM.com uses the Hero Spot menu to present one large promotion per product, service, or developer topic. Like Salesforce.com, IBM.com displays its images in bright, bold color that aligns with the site’s overall design. The only real difference is that IBM.com’s roomy mega menu layout allows for larger images and more space for descriptive summaries. Of all the Hero Spot designs, IBM.com’s approach provides the most bang for the buck since it can highlight multiple features per navigation topic rather than being limited to only one.

3. The “Sticky” Menu

“Sticky” mega-menus stay open once a navigation option is clicked and require the visitor to close them by either scrolling down the page or selecting another link at the top of the page. This design keeps the navigation panel stable as the visitor moves around the menu.

 

 

Adobe.com recently turned in its hamburger menu for a more conventional, “Sticky” mega menu style. When visitors want to see what’s on the menu, they simply click on the navigation area that interests them. The menu stays open until they scroll down the page or they click on another link.

Accenture.com’s “Sticky” menu behaves similarly to Adobe.com’s, except it stays open even if the visitor scrolls down the page. To exit the menu, all a visitor needs to do is click on the link again or elsewhere on the page.

4. The Mega Mega-menu

The Mega Mega-Menu is a mega menu on steroids. Not only does it provide navigation to areas around the site but offers functions that allow visitors to perform a task from the menu. The most popular features are product selections and searches for support areas.

 

 

Cisco.com could be called the inventor of the Mega mega menu. Before this design hit the screen on Cisco.com, the IT world was stuck with boring mega menus that offered nothing but listings of links. Cisco.com’s addition of product selections and search for its support zone changed all the rules. The mega menu became more than navigation. It became a fully functioning panel that let visitors find support information many levels down in the support site and efficiently reduced long laborious click streams.

 

Citrix.com has taken a page directly from Cisco.com’s Mega Mega Menu playbook and expanded on it. Visitors can select a product or search the support site and the downloads area directly from the mega menu. Although Citrix.com doesn’t have all the bells and whistles available on the Cisco.com site, it provides the ones that really count for visitors – getting to support information quickly and accurately.

5. The Full Screen

Full-screen navigation mega menus are all the rage. These panels take over the entire screen to provide a wealth of navigation options that range from simple navigation to advanced features, such as imagery, site search, and product selection menus.

 

DellEMC.com was one of the first kids on the IT block to use the Full-Screen mega menu style. What’s more, it does it the most efficiently. Just from the Products menu, visitors can get to product information, search for products, browse products by name, shop for storage products, get to the community and downloads, and find out ways to contact the company. That is a ton more options than one could fit on a standard mega-menu fly-out panel.

Cognizant.com uses its Full-Screen mega menu to provide summaries of each service plus a space to highlight a service segment – Cognizant Consulting. Although this linking structure doesn’t get visitors to the lower levels of the site, the service descriptions help visitors make the right selection the first time.

Final Words

Even though each of these mega menu styles and implementations are very different, they all have common traits:

  1. They are located where people go. Visitors must use the mega menu if they are going to move throughout the site, so why not capture their attention at the beginning of their journey?
  2. They engage the visitor at the menu level. They put additional features on the menu to entice visitors to do something – read a piece of content, learn about a new product, or check out a site feature.
  3. They provide visitors with added value. Whether it’s checking out some highlighted content, finding support information quicker, or just moving around the site easier, these mega menus provide visitors with more value than a simple listing of links could ever deliver.
  4. They use valuable real estate wisely. With pixel space at a premium, teams must laser focus their content and features to fit small spaces while giving the biggest bang for the buck.
  5. They don’t let additional features and content get in the way of the primary objective – navigating the site. Even though there may be additional content or features on the menu, they either enhance the visitor’s navigation experience or at least stay out of the way.

These examples show that there is more to mega menus than just a listing of links that move visitors from one page to another. When designed correctly they can be valuable marketing vehicles that speed visitors to the information they need.

Category: Case Study

Class: Best Practice

Websites Profiled: Adobe.com, Accenture.com, CA.com, Cisco.com, Citrix.com, DellEMC.com, SAP.com, PaloAltoNetworks.com, HPE.com, IBM.com, Cognizant.com, Salesforce.com

Related Research:

copyright © 2018, siteIQ
Print Friendly, PDF & Email
2018-07-17T08:46:26+00:00

About the Author:

President of siteIQ :: I focus on best practices – and share with our clients and Library members how leading Web teams deliver world-class user experiences. My job is to find best practices and illustrate why they work. How the smartest Web teams innovate – and solve common problems. How leaders put the right pieces together to perfect effect.

Leave A Comment