How to configure MegaMenu in Magento 2 – Easiest way

How to configure MegaMenu in Magento 2 – Easiest way

Hi guys,

If you are reading this blog, it seems that you are owning a website and want to control it with megamenu. Oh! Pardon? What is that? Megamenu? Yes, that’s right. A module which every website need have to show multi-categories in logical and good-looking view. Let’s discover more!

What is megamenu?

As you see it, the name is all the meanings for this word: ” Megamenu = Mega + Menu “. It is big menu which you can show a thousands of kinds of products with images or anything.  Here are some of images about Megamenu:

Vertical Megamenu:

Horizontal Megamenu:

How to configure Megamenu in Magento 2

Let’s move to the main part of this blog. Do not forget why you come here. Now we will show you how to use it.

Before showing all steps, we would like to remind you that we will do not mention “Flush Cache” action in this blog because it is very base in Magento, you need to do it by yourself.

Step 1: Login your Admin Panel to see SM Megamenu Section, then choose: “Add New Menu” to add menu group (vertical or horizontal)

Step 2:  Let’s Configure some fields in general setting to move to specific parts inside: Back to SM Megamenu Section and choose: Configuration

Step 3: Start to create Menu Items: SM Megamenu Section >> Menu Manager >> Click “Edit” in the chosen/ created megamenu group

Of course, you may have variety of kinds of menu items. Normally, it will include: Home, Collection, Sale/ Hot Items, About us, Contact us  in Horizontal Megamenu; Full kinds of products will be shown in Vertical Megamenu. Today, we just show you some special types that you will use during configuration.

There are 6 types of menu: External Link, Product, Category, CMS Page, CMS Block, Content . Which types for special sections is up to you. Feel free to create as you want.

Before coming with all types of menu, we would like to remind you some of following things:

  1. There are 2 types of Alignments: Left and Right . You can change to be the most suitable view for your store. Image
  2. Parent Items: If your menu item is the 1st one (1st level) , choose “Root”; If it is submenu, do not forget to choose the upper level + 1 (for example, Parent items of Men is Shop)

External Link:

Not difficult at all in this type of menu. You only need to insert link that you want to direct customer in “Data Type” Box:


1st level

The only thing you need  to pay attention to is “column number”. Which number you should select ?

Normally, user often 6 columns. As you see in every demo, the menu which width is as long as the width of website. In other words, 6 columns means 100% width. As a result, 5 columns, 4 columns, 3 columns, 2 columns and 1 column will comprise 5/6 , 4/6, 3/6, 2/6, 1/6 length of whole site respectively.

6 column width


You can also add image or HTML code in showing megamenu. Let’s see the following example:
The only thing you need to do is insert the content that you want to show in content box. Remember that when inserting image, you can choose from your desktop to make it easy.


You have so many of products but there is only one core item which is the main revenue. And now you want everyone to know it? Easily! Let’s try Product Type and choose Product ID. Don’t forget to activate the following related param: Show Image Products, Show Title Products, Show Rating Products, Show Price Products.


CMS Block/ CMS Page

Please note that if you select CMS Page or CMS Block, you need to create CMS Page or CMS Block before.

There are 2 type of showing content: Dropdown and Link to Page.

All details including back-end will be shown in this following video.

If you have any question, feel free to ask us! Enjoy our extension!




Nothing is impossible!

Related News