Log in
Use cases
Log in

How to setup menu for your Magento 2 store

Website navigation is considered something of little importance when it comes to website designing. Generally, created as an afterthought once the pages and its relevant content has been written down. As per research, only 50% of the website users are able to predict where they might access relevant content based on the navigation structure of the website. Therefore, a website’s navigation structure has a huge impact on sales, conversions and bounce rates.

Since today’s consumer spends less time online therefore, they want easy to navigate websites. This poses a serious challenge for website designers to design websites in a way that they find what they need in 3 clicks. This enhances the User experience (UX) ten folds and keeps them engaged. Based on a recent survey, 94% of the users confirmed that an easy navigation is the best possible feature a website can offer to its audience. This allows them to look out for the desired content faster and switch between pages efficiently.

Apart from providing ease to the user who’s visiting the website, on the business’s end too, a carefully designed website navigation structure can impact the consumer traffic, lead generation and the overall brand perception of the business. Therefore, it could be said that an online stores navigation system is to a certain extent its backbone and can simply not go unnoticed by the user. A well-designed navigation (menu) can seamlessly lead different customers to your online store.

Mega Menu (Navigation) in Magento:

This brings us to the main purpose of this article which is to clearly set up a menu for your Magento 2.0 store. Magento provides the flexibility to customize one’s menu as per desire or adjust keeping in view future growth and expansions in product categories. So, either a simple horizontal navigation bar on the top could be made or a vertical navigation bar on the extreme left.

Another interesting thing about Magento 2.0 is that it provides the opportunity to set up Mega Menus instead of little drop down menus. Usability studies prove that little drop down menus can be a bit frustrating because once a user decides to click a menu item, the options in the drop-down menu cause visual friction for the user. Most importantly, they make the user miss out on some real good content on the website. However, Mega Menus perform very well against drop downs. They are like mini site maps with great visualizations like pictures and a lot of other stuff that makes the friction worth it and not let anything on the website be missed out!

Figure1: Mega Menu

1XXpf biKwUbKN6sGZUYyOOOVsOkbw7avpYQpViaA6ITszH8rmy5ay1qfb7fCTlowPQ0qfWy2Rk6vvCTfXEf2YvlP0b ocuq4U4RuSo68N0XttHeqxIdzYktrASM4

Magento 2.0 Mega Menu Extensions/Modules:

In order to set up a menu in Magento 2.0, there are different extensions and modules available that allow the user to expand the default Magento functionality and explore various other features that can make the whole experience all the more exciting. Some of these extensions are:

  • ·         Mega Menu by Magedelight
  • ·         Mega Menu by Amasty
  • ·         Mega Menu by Magezon

and many more.

Setup menu for your Magento 2 store:

In order to set up Mega Menu for your Magento 2.0 store, the version we’ll be covering in this article to achieve this particular task would be Mega Menu by Magedelight. It specializes in adding elements like images and videos to its Mega Menus, allows to add different animation styles to it, dragging and dropping fields in that menu and most importantly allowing it to be created anywhere as per one’s desire. In addition to this, it has features that allow users to add vertical, horizontal and drill down menus. Finally, it allows the user to also make sticky menus.

Moving on, in case anyone has this extension already installed then it only needs to be activated and then follow the below steps:

1.  Configure the Menu:

In order to start from scratch and no menu has been previously created then simply go to Mega Menu in its drop down click on the Manage Menu section and finally click on the “Add New Menu” option in red at the extreme right. After that a Menu page will open under which varying sorts of options would be listed that will allow the user to configure the look and vibe of the menu. Primarily, what one needs to do is enable the Menu tab and then do with the rest of the options. For instance, it provides the opportunity to set the title and style of the Menu. Despite the fact that Mega Menus are more preferable still through “Menu Type” either a Normal Menu or a Mega Menu could be chosen. In the “Menu Design type”, different designs that include Horizontal, Vertical navigations bars as well as a drill down menu is available.  Moreover, it also gives an option to choose what kind of Customer groups and store views can access the Menu through the “Customer Groups” and “Store View Option”.

4kZN65Xws5ktTLckeQlNAusmt13XfJE MrAtJ9xuN1SjwvJweFCsIJ2 vaTZSk0wE9feLXNgrK SorQwfwi7aNY6Jsv5ufZwP45kndF 1XcNjQjsXiG5uwLlW3gtr5LYxnAU0eLkbhf ckssEifRj8
21X6b4kRbWAMEnUgOPc0U2HfLARAxAH mr5yL5lFt2sphp4u0TqaaFdek efs bfLF4ap7vvutYA4Pad8SSyQ6Kp7mePhaiW9pbPG3cQ5glTM2iB6PVcia1ilGlHlJx3FRjPFxrACU8AL6Md roAICA

2.  Add items to the Mega Menu:

Once you’ve been successful in configuring the menu then comes the step to add items to the Mega Menu. There are several options available that can be used to customize the whole menu. For instance, by adding animations in the Menu through the “Animation Fields” option will make it appear more physically appealing. Moreover, custom blocks, Magento Categories, external links as well as images can be added to make it distinguishable. Magento 2.0 also allows users to drag and drop menu items in the Mega Menu which makes it a highly flexible and easy to use platform.

Once done with it, simply save it by clicking on the save menu option. To see the made changes on the front end simply refresh the Magento 2.0 cache.

tIzdK8Tnj1kzW6sls 6FMAn9RRNaFMkK3V3TKm3t294HF6vm0AwNK ZGttEQSqJ8zunDoGLjdQ0O9G9N78ULDv5b oa9nLr83DQxn pEc bwGkpL1zAKylh9t zZQ
tN43PB2JBmcXhMr7PoZiMHtJnlgw Z2o Rj

Finally, in order for you to set up a menu in Magento’s store that stands out, choose menu items carefully. A well thought out Menu goes a long way because it is easy on the eyes and is visually appealing. Therefore, keep the following things in mind while designing a menu:

  • Avoid overcrowding the menu and do not add unnecessary images or content in it so that it adds to the overall user experience
  • Only add images where visibility is required in order for the customer to better be able to scan menu items.
  • ·  Group like items so that it saves the users time and allows him to check out content that is more of his interest.
  •  Avoid drop down menus with more than 2 Levels.

To sum it up, navigation is an integral part of any online store therefore one should deliberately design it, ensuring it provides your user a seamless, user friendly, easy-on-the-eyes User experience and whatever time he spends on the website turns out to be productive in his favor. In the end, it’ll always compel him to come back for more! 

Get help from a human
Submit a request for help with your Braintree sandbox or production account.
Get Help
Select location and language

Contact Our Sales Team

Learn more about our products, features, and pricing options.
By submitting this form, you agree to receive promotional messages from Shopify about its products and services. You can unsubscribe at any time by clicking on the link at the bottom of our emails.
Use cases
Log in
Start a free trial