The use of mega-menus is nothing new, e-commerce giants like Apple, Amazon, and Google Play have done a lot over the years to experiment with these kinds of menus. They’ve become a near necessity for large online stores that have a great number of products and content pages, and make navigation through the store a much less daunting task. In truth, it might be the only way for large online stores to provide easy access to product categories and site content.
For the absolute beginner: mega-menus are large, prominently displayed navigation panels, usually located at the top or the side of a webpage. They’re typically divided into groups and navigation options, and appear when hovering over or clicking on main navigation buttons that may show categories, subcategories, specific promotions, content pages etc. Here are some examples of mega-menu implementation on Magento sites:
Pretty nifty, right? We’ve intentionally selected examples in a similar color scheme so they rest easier on the eyes and also help focus attention to detail. Looking at the four examples above, you’ll definitely see that they have a lot in common but each example has some elements that differ from the other such as usage of icons, bright category images, featured products etc. But what they do have in common: they are extremely well organized. All important categories are clearly highlighted and easily identifiable, making it easy for customers to spot categories and promoted content.
So it’s pretty obvious why using mega-menus is a good idea, but just in case you need a recap:
- They’re a great way to display all required content at a glance.
- They can include multiple menu items and categories.
- They’re perfect for organizing virtually any menu the way you want it: horizontally or vertically.
- They create more free space to promote particular products, offers etc.
- They can include icons, illustrations and company information to promote brand, as well as product categories and other menu items.
Default menus in both Magento 1 and Magento 2 function just like regular drop-down menus, and are a great solution if there aren’t a vast number of categories being displayed. This means customers can quickly and easily find the information they need, without clicking through long lists of categories and subcategories.
Magento 2 CE
But, if you have a larger number of products to offer, a mega-menu is definitely the way to go. Having those extra navigation menus to organize your products really makes all the difference to those looking to consume. As you see here, to make a mega-menu work for your Magento store, it will take a bit of effort.
There are two ways to implement mega menu’s in Magento. The first one is to add a mega-menu extension to your site and adjust it to the look and feel of the current site. The second option is to develop a custom solution for your particular case.
While adding a ready-made solution to your site may seem to be an easier and more cost effective way, it has its downsides as well. The first reason is that ready-made extensions often don’t include all the features you may need, so it will require some customization anyway. The second, it’s not uncommon that ready-made extensions conflict with existing extensions, and can add to the list of site development expenses. And last but not least, third party extensions may significantly influence site performance, and not always in the most cheerful way. For these reasons, implementing a custom solution to your website will probably give you more benefits in the long run. But the choice is yours, it’s like playing a less deadly game of russian roulette: it all comes down to luck.
If you prefer a ready-made solution, you could have a look at the following extensions.
Price: $79, Magento 1x
This extension enables you to create both horizontal and vertical mega-menu layouts and customize the style of your menu and its content. You can easily configure everything from the size, color, shape, logo, and even the number and position of information columns. One can even add small preview images to each product category as well as to add static content in line with the list of sub-menus you may want to create as well.
Price: $88, Magento 1x
Mega-menu extension by MageWorld grants a wide range of opportunities for both front-end and backend development. When talking about front-end features it’s important to point out that a mega-menu can have horizontal and vertical menu display positions, as well as the manipulation of the visible menu categories (choosing to show only broad categories, or both categories and products). As for backend development, the administrator managing the extension is able to select the number of visible menu columns, their type, set menu effects, and much more detailed information that will help contribute to a positive user experience in a completely customized client space. One last important feature here is the support of multiple stores and languages.
Price: $181, Magento 2x
Along with optional horizontal or vertical layouts, this extension offers a lot of flexible features that help simplify the lives of both store managers and visitors. This option has a drag and drop interface, multiple content support type (for example featured products, new arrivals, contact forms, maps and other promotional options). The manager can also upload custom icons to the site to make menu elements more eye-catching and personal, and even configure animation elements.
If you decide to create your own mega-menu solution, there are dozens of possible options and implementation methods, so we would suggest you to do a bit of research on what features you want to offer your customers and contact your Magento developers for advice or drop us a line – we can provide you with a guideline.
Despite our love for the mega-menu options, we realize that they’re not for everyone, and we’re here to help with that part too. For example, if you have a relatively small store with only a couple of categories, and a couple of dozens products: In this case mega-menus make those online stores look more complex than they are. It’s not such a good idea to frighten people with all that complexity.
All in all, the main point here is to keep a close eye on the way existing customers and future customers navigate and connect with your website. Easy and intuitive navigation is key when it comes to UX improvement, and these are some really simple and cost effective ways to make sure you’re putting your best foot forward. Because we all know, when your users are satisfied, and have a positive experience, your sales are much more likely go up which is what makes all of us happy in the end.