Mega Menu

Getting Started

Version Upgrade

Prepare before update

– We recommend you to duplicate your live store on a development store and try update Ves Megamenu version on it in advance.
– Backup database of your site: Go to admin > System > Backup > Click on button “Backup Database”, input file name and submit it.
– Backup your modified files of the theme and extensions: app/code/lof/affiliate
– Disable all cache related section that you have in your magento.

Update Theme Files

Update to the last version of extension file

Step 1: – Download latest extension package on our site . Then decompress the package on your PC.

Step 2: – Upload the file Module File/ which you just decompressed into the webroot folder on your site (it will override the app/ folder in your site).

Step 4: – Open SSH Terminal of your site, then run there commands:

php bin/magento setup:upgrade --keep-generated

php bin/magento setup:static-content:deploy

php bin/magento cache:clean


Sometimes your site is broken, after running this command, it’s because of you ran this command with the incorrect user. If your site was broken, it’s very important to set the file’s permissions and ownership correctly, after run this command line. You can refer this command shown -R :
Typical examples:

chown -R apache:apache /var/www/html/magento2/landofcoder
chown -R www-data:www-data /home/domain/public_html

And also please refer this,


Drag & Drop Menu Builder

Our Magento 2 mega menu support amazing drag & drop features. That helps you to build rich content and professional menu within a few minutes.

Vertical menu & horizontal menu

With our magento 2 mega menu, you can choose to show as horizontal or vertical menu layout. Just need to add menu item in the backend then select menu type you want.

Responsive & optimized for Mobile menu

There are two mobile menu types supported including: Off canvas mega menu, Accordion Menu. You can choose one of them easily in the backend

Magento 2 Mega Menu Supports 7 Submenu Types

  • Anchor Text
  • Dynamic Category Listing
  • Product Listing
  • Product Grid
  • Child menu.
  • Default Category Listing
  • Content

Style your megamenu without editing css file

Our magento 2 mega menu extension allows you to style in design tab. Customizing menu styles is easy as pie: changing width, color, icon or even position.

Create as many menu as you want

There is no limit for user to create as many menu as you want. Users can find it very easy to set up new dynamic magento 2 navigation menu too.

Widget supported

Thanks to being supported with widgets. Admin can find it easy to place megamenu on any position of your site.

Multiple Animations Effects Supported

Show you menu attractively with the support of Animations Effects we bring you. Moreover, you can set times for each of them


To install Magento 2 Megamenu extension follow instructions bellow:

1. Back up your web directory and store database.

2. Download Mega Menu installation package

3. Upload content of the Mega Menu installation package to your store root folder via FTP/SFTP
install magento 2 megamenu

4. Connect to your store root directory with SSH

cd path_to_the_store_root_folder

Run 3 commands bellow:

php -f bin/magento setup:upgrade
php -f bin/magento setup:static-content:deploy
php -f bin/magento setup:di:compile


5. Flush store cache, log out from the backend and log in again

Execute the following command

php -f bin/magento cache:clean


Or go to Back-end > System > Cache Management. Click the following buttons to completely clear the store cache:

  1. Flush Mangento Cache
  2. Flush Cache Storage
  3. Flush Catalog Images Cache
  4. Flush Javascripts/CSS cache


Import Sample Data

1. Go to Back-end > Venustheme > Setup > Import

2. Select the sample data file


3. Refresh the cache under Back-end > System > Cache Management

Video Guide To Install Magento 2 Megamenu


How to change default horizontal menu on Header?

After setup the module on your site, you should create the menu profile which have Alias = “menu-top“, it will auto show on Header area of your site.

To change the default menu top to load other menu alias, ex: menu-top-default

You should edit the file “/app/code/Ves/Megamenu/view/frontend/layout/default.xml” or copy the file into your template folder “app/design/frontend/Theme Vendor/Theme Name/Ves_Megamenu/layout/“. Then change the code:

<argument name=”alias” xsi:type=”string”>menu-top</argument>


<argument name=”alias” xsi:type=”string”>menu-top-default</argument>

Flush cache of your site to apply change.

The megamenu module also support widget block, widget shortcode to load menu profile on frontend. So you can load it in cms page, create widget instance to load it to any other position.



The megamenu menu top block was reference to the block name “” – this is default block to load catalog navigation on header of default magento 2 theme. If your custom them are using other block, you also should change the layout xml file of the megamenu to reference to right block.

The default code in module layout xml file is:

<referenceBlock name="">
   <block class="Ves\Megamenu\Block\Menu" name="catalog.topnav" template="Ves_Megamenu::topmenu.phtml">
                  <argument name="alias" xsi:type="string">menu-top</argument> 


How to create a menu

In this tutorial, I will show you how to create a menu in magento 2 easily with drag n drop features and visual interface.

Firstly, Go to Back-end > Venustheme > Mega Menu > Add New Menu


There are two tabs: General Settings, Menu Editor

General Settings Tab


Name: Title of the menu, such as Top menu, Vertical menu,

Alias: You can display menus that have the same alias for different stores

Event: There are two options

  • Hover: Used to create Horizontal menu, Vertical Menu
  • Click: Used to create Tree menu, Accordion menu

Scroll to Fixed: Allow this menu fixed on the top page when scroll over menu position:

Additional Class: Add custom classes

Disable Dimensions: Enter the width(pixel) want to disable this menu. The menu will be remove when your screen width less than this value

Bootstrap 3 Media Query Breakpoints:

  • Large Devices, Wide Screens: 1200px
  • Medium Devices, Desktops: 992px
  • Small Devices, Tablets: 768px
  • Extra Small Devices, Phones: 480px
  • iPhone Retina: 320px

Desktop Template: Apply when screen width more than 768px. There are 3 template types:

  •  Horizontal Menu


  • Vertical Menu Left


  • Vertical Menu Right


Mobile template: There are two template types:

Off Canvas




Disable Item Blocks on mobile: Disable menu item blocks as Header Block, Left Block, Right Block, Footer Block.

Customer Groups: Select  customer group(s) can see this menu

Store View: Select store(s) that you want to show this menu

Status: You can enable or disable the menu

Menu Editor Tab

This tab allows manage menu items


How to add a menu using Widget?

Create a vertical menu in Back-end > Venustheme > Mega Menu > Add New Menu

We have 2 methods to add a menu widget in Magento2

I) Widget Instannce

Go to Back-end > Content > Widgets > Add Widget

Select the option Ves Megamenu and a theme that you want to show this menu

Complete the Layout Updates

a. In the Layout Updates section,set Display On to the category, product or page where you want the block to appear.

b. To complete the Layout Updates, do the following:

  • Select a page where you want the menu appear
  • Select the Block Reference to identify the place on the page where the menu will appear

Click Save and Continue Edit.

II) Insert into a CMS page

Go to Back-end > Content > Pages

Click on the page where you would like the menu to appear, open the Content section and click on the Insert Widget icon.


A new window will be opened, select the option Ves Megamenu. Then click the Insert Widget button.


The widget will be inserted. Click on the Save Page button in the Magento administrator area. After this you can check your page on the frontend to confirm the menu is showing properly.

How to add products in submenu

The menu extension supports Ves Megamenu Products widget, so you can add in Wysiwyg Editor to display a product list.

To add the product widget, please the following step by step as bellow:

Step1: Click the Insert Widget icon


Step2: Update widget options

Select Categories and 8 product sources:

  • Latest Products
  • New products
  • Special
  • Most Popular
  • Best Seller
  • Top Rated
  • Random
  • Featured

The widget supports 2 carousel:

Item Settings: Enable/Disable product elements


Step3: Refresh cache and check the widget in the frontend



How to configure menu item

I will show you how to config magento 2 menu with our magento 2 megamenu extension. Please follow our tutorials step by step.

A menu item have 8 tabs:

  • General Information
  • Dropdown
  • Header
  • Left Block
  • Main Content
  • Right Block
  • Bottom Block
  • Design

Before configuring all item settings, we need to check a structure of each menu item

General Information

Name: Title of the menu item, such as Home, Women, Men, etc…

Link Type: There are 2 link types:

  • Custom Link: Enter your custom link, this field supports Magento 2 short code: {{store url=”contact”}} =>
  • Category Link: render link by specific category

Link Target: There are 4 options:

  • Load in a new window
  • Load in the same frame as it was clicked
  • Load in the parent frameset
  • Load in the full body of the window

Show Icon: Upload a icon for this item, then update icon position

Is Group: Set Yes to allow Sub-menu items show in  the same level of parent without hover on parent to show them.


Disable Dimesions: Enter the width(pixel) want to disable, menu will be hidden when screen width less than the field value

Bootstrap 3 Media Query Breakpoints:

  • Large Devices, Wide Screens: 1200px
  • Medium Devices, Desktops: 992px
  • Small Devices, Tablets: 768px
  • Extra Small Devices, Phones: 480px
  • iPhone Retina: 320px

Status: You can enable or disable this item


Width: Set width for menu item dropdown. Fx: 1000px, 100%

Animation In: Dropdown appearance effect. There are 9 groups and 44 effects

Animation Time: Set total time of effect. 

Alignment: There four alignment types for the menu content to appear

  • From left menu: menu dropdown content will appear from the left of menu bar to the right

  • From right menu: menu dropdown content will appear from the right of menu bar to the left

  • From left item: menu dropdown content will appear from the left of menu item


  • From right item: menu dropdown content will appear from the right of menu item


Background Options: background color, background image, background repeat, background position x, background position y


Inline CSS: Add custom code css for this item.

Header: Default width is 100%.

Left Block: Supports Wysiwyg editor, you can insert HTML code, Video(youtube, ,…), Magento widget,etc

Main Content: There are four content types

  • Child Menu Item: Display menu item in the menu editor section

  • Content: Supports Wysiwyg editor: insert HTML code, Video(youtube, vimeo,…), Magento widget


  • Dynamic Content Tab: Each item as a tab, the first tab is default active

  • Sub-Categories: Show all sub-categories by specific category

Right Block: Change block width. Fx: 100%, 400px. Supports Wysiwyg editor

Bottom Block: Default width is 100%. Supports Wysiwyg editor

Design: Customize the style of menu item: color, background color,…

How to change the default menu

In order to change magento 2 default menu, please follow our below tutorials step by step.

1. Create the file app/design/THEME_VENDOR/THEME/Ves_Megamenu/layout/default.xml

2. Add code bellow into the file content and change YOUR_MENU_ALIAS_HERE to a menu alias that you want to show

<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="">
           <block class="Ves\Megamenu\Block\Menu" name="catalog.topnav" template="Ves_Megamenu::topmenu.phtml" ttl="3600">
                 <argument name="alias" xsi:type="string">YOUR_MENU_ALIAS_HERE</argument>


How to show parent menu and sub menus in the same level

In this tutorial, I will let you know how to show magento submenu and parent menu in the same level. You  only need to enable the field Is Group is Yes, and then both the menu and sub-menu items will be displayed in the same level


show magento submenu

How to add label into menu items

In this tutorial, I will show you how to add menu label with ease. Firstly, Add all html code bellow in menu title:

New Label

<span class="cat-label cat-label-v1 pin-top">New</span>


Hot Label

<span class="cat-label cat-label-v2">Hot!</span>


Sale Label

<span class="cat-label cat-label-v2 pin-top">Hot!</span>


How to add menu link to category and sub categories?

Ves Megamenu extension support menu link type “Category“. So at here we can add manually menu items to link to category item which you want. However we dont need add all menu items to link to categories.

1, How to add menu item link to category?

  • Edit menu item which you want to link to category
  • Choose “Link type” = “Category”
  • Choose “Category” = “your category which you want to link to”
  • Click “Update” button
  • Click “Save” Button on top bar


2, How to load sub categories in dropdown of a parent menu item?

If we have categories as this, how to load sub categories of parent cate “Women” in dropdown of menu item “Women”?



Config Megamenu As Steps:

  • Edit parent menu item which you want to load sub categories in dropdown (Women)
  • Edit  “Main Content” of parent menu item
  • Choose “Main Content Type” = “Sub-Categories”
  • Choose the “Parent Category” = parent category which you want to load all sub categories in dropdown (Women)




On frontend will show as this:


Video Tutorials

Video Tutorials

Theme Integration


Create the file app/design/frontend/Smartwave/porto/Ves_Megamenu/layout/default.xml and enter code

<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
		<referenceBlock name="catalog.topnav" remove="true"/>
		<referenceContainer name="">
			<block class="Ves\Megamenu\Block\Menu" name="sw.topnav" template="Ves_Megamenu::topmenu.phtml" ttl="3600" before='-'>
					<argument name="alias" xsi:type="string">menu-top</argument>

Refresh cache in the backend or run the command

php bin/magento cache:clean


Create the file app/design/frontend/Infortis/ultimo/Ves_Megamenu/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="">
      <block class="Ves\Megamenu\Block\Menu" name="" as="" template="Ves_Megamenu::topmenu.phtml" ttl="3600">
          <argument name="alias" xsi:type="string">menu-top</argument>

Download the file app/design/frontend/Infortis/ultimo/Ves_Megamenu/web/css/styles.css at here then update for your site

Finally, run the command

php -f bin/magento setup:static-content:deploy


Why can not view sub menus when hover parent?