Mega menus aren’t anything new. They’ve been around as long as sites have grown to include multiple subcategories under categories. Today’s mega menu designs, however, have morphed into interactive marvels. A mega menu is relatively standard and reveals lower levels of a website, showing all the categories in one menu with a drop down either on click or hover.
If using a hover option, you should create a 0.5-second delay before the menu expands otherwise you risk hiding the part of the screen while the user reads. Remember to check for mobile compatibility and make sure your navigation structure adapts to a smaller screen.
Businesses benefit from mega menus because they highlight every category in their business rather than limiting it to a few categories. While your site still needs a robust navigational hierarchy, users see the organization at a glance. If you’d like to utilize mega menus more, the five business websites below highlight some of the best methods for creating an expanded navigational structure.
1. Add Images to Your Menu
The tourism site for Nova Scotia utilizes a beautiful mega menu with images to highlight the subcategories under each category. For example, if you hover over “Explore,” you’ll see images of people surfing, kayaking, hiking through the woods and ships in port. You’ll gain access to subcategories, such as top attractions, info on beaches, cities and towns and local culture.
Any type of travel site or event site would benefit from this type of drop-down menu. Visual elements add a powerful punch to the text on your menu. Adding images which highlight what each category covers helps your site visitors decide at a glance where they want to navigate next. They say a photo is worth 1,000 words, so take advantage of how fast people process images to make an impact through your navigation.
2. List Popular Product Categories
Gamestop features a mega menu on their site to break down the different games under each category. They use just one photo to set the tone, and those photos change from time to time, depending upon popular games and trends in the industry. When you hover over “Cool Stuff,” a submenu drops down with an image of a ghostbuster model kit. Under that category are subcategories, such as “Video Game Stuff,” “Collectible Stuff” and “Apparel Stuff.” Under each of those subcategories are specific areas, such as links to items related to Assassin’s Creed, Call of Duty and Halo.
If you run an e-commerce site, GameStop’s layout is an excellent example of how you can cover a lot of different products in a limited amount of space. Users should be able to navigate anywhere on your site via the mega menu navigation. Focus on the most popular categories and then break down different types of product within each group. A photo here and there sets the tone without overwhelming the user.
3. Build Symmetry Under Categories
Advantage Outfitters splits their site visitors into two shopping categories—product type and vehicle type. Those landing on the page either already know what kind of product they want or they want to see available products for their particular vehicle. When you hover over the menu selection “Shop by Vehicle,” choices such as Sprinter, Metris and Transit Connect fill the screen. An image of the vehicle appears above the category and more specific products under each type of vehicle, such as rubber mats, shelving packages and commercial accessories.
The subcategories under each heading are all the same and in the same order, creating a balanced look to the menu. Users can quickly find parts for different types of vehicles in their fleet. The navigation becomes intuitive and predictable for users. This type of layout works well for any type of service or add-on product industry as it allows users to search in a variety of ways.
4. Grab Attention with Full-Width Menus
Take a look at how Moleskine creates a hover over mega navigation menu in a way which highlights their products. First, the expanded menu fills most of the screen above the fold leaving only a peek at the product image underneath. There is also a couple of images of products in that category included to the right of the links. Visuals show what types of products you find under those links.
Each category has subcategories, and each subcategory has additional selections. Adding detail to your mega nav allows users to filter results down to the exact type of item they’re looking for. Moleskin’s structure works well for any type of physical product. Think about which products fit best under which categories. You need a basic structure to your navigation for the mega menu to make sense to the user.
5. Add Contrasting Color to Your Expanding Menus
Draw attention to your mega menu by adding a contrasting color to the expanding navigation bar. The user’s eye is then drawn to the smaller menu choice. Note how Moosejaw utilizes contrast to grab the eye without distracting too much from the rest of the page. When the user hovers over “Climbing Gear,” for example, a partially transparent black box appears. The pop of black draws the eye, but the box is also slightly transparent, allowing the user to glimpse the striking hero image still behind.
Add a pop of color to your menu drop downs so that users have no doubt where they’re navigating and what happens when they hover over a specific category. The use of contrast makes your site more usable for site visitors and adds another level of user-friendliness that helps consumers engage with your landing page.
Try Your Own Mega Menu
If your site is larger than when you first started, you may benefit from a mega menu. Use some of the techniques of other companies and consider which type of mega menu best aligns with the needs of your customers. Add contrast, weave in images and expand on your menu until it is almost a mini-page in itself.
