How to build a custom menu with the new Nop Mega Menu plugin for nopCommerce 3.80.

How to build a custom menu with the new Nop Mega Menu plugin for nopCommerce 3.80.

In the past months, we have been on a quest of improving some of our early plugins for nopCommerce. The Nop Cloud Zoom plugin was the first to get a major upgrade. The Nop Mega Menu plugin is the second one to follow suit. However, the upgrade this time goes way beyond adding new features and making improvements. We have rebuilt the plugin from the ground up in order to create a whole new experience of building a website menu.

With the new Mega Menu plugin, you can build your mega menu any way you like. The plugin has a brand new administration which makes building a custom menus easy, fast and fun. 

To demonstrate how powerful the new Mega Menu is, let’s build a custom menu from scratch. For illustration purposes, I will be using the default clean theme for nopCommerce.

Let’s say I have a website which sells various products and I want to have a custom mega menu, one that is functional and easy to navigate. I don’t want to tackle any code or hire a technical person to do it for me. I want to do it myself and to be able to change it easily anytime I need in the process.

Let’s get started.  

First of all, I want to have my products easily accessible from the main menu navigation. To achieve this I simply have to perform the following actions in the administration of the plugin. In the left side panel, I have to click on the categories tab. A drop down opens with two options, either to select all categories or to have a selection of categories. In this particular case, I will choose to display all categories. I click on the “add to menu” button and the tab is moved to the right side panel of the page. I like to call this particular part of the plugin administration my canvas. This is where all creative process will take place from now on.


add categories

I can further specify how my categories drop down will look like. From the set of templates, I choose the one with pictures. I choose to have 1 sub-category per category item and 4 boxes per row. I can also specify the size of the images for each main category. Now I have my first main menu item added to my website menu navigation. I can always go back and change the settings any time I want.

add categories 2

Next, I want to add a menu item with manufacturers to my menu navigation. From the drop down menu on the felt I choose to display all manufacturers, I click on the “add to menu” button, and the link is added to my menu. However, this time I choose all manufacturers to be displayed in "list" with 10 being the maximum number of entries. Now, I can go to the public store and see the result.

add manufacturers

The same way, I could add a vendor link to my menu.

add vendors

Now my menu has three links, but I am not done yet.

With the new Mega Menu plugin, you can easily add pages to your main menu navigation. From the list of available pages, I choose to add the following links – home, contact us and blog.

add pages

I have good news for those who want to get more creative. You can create custom links with the new Mega Menu plugin and make your menu unique. To demonstrate how it is done, I will add a “Sale” link with my hot offers to my menu. All I have to do is select custom link building block in the left side of the panel and specify a URL.

add custom link

The possibilities here are endless and yes, it is that easy.

My menu navigation looks pretty good, but I just need to do a few more things. I am not quite happy with the order of my menu links. But that is not a problem because with the new Mega Menu plugin I can nest and arrange menu items in any way I need simply by dragging and dropping the menu item boxes. In this particular case, I will move my blog link before my contact us link and my home page link before all other links in the menu.  


change the places of the menu items

One more thing worth mentioning about this great new plugin is that you can have multiple menus and add them to different widget zones. To illustrate this feature, I have built a specific menu for my website footer.

map to widget zones

I almost forgot to point out a feature I find very useful - the mega menus can be limited to a store.

limited to store

 

As you can see, the new Mega Menu plugin just rocks. We are super happy with what we have managed to achieve and we hope that the plugin will be helpful to many nopCommerce users. Download the free trial of the plugin and take it for a spin. Please share your feedback in the comments below.

The Nop Mega Menu plugin is part of the Nop Ultimate Plugin Collection which now includes a total of 27 powerful plugins.