Mega Menu

Getting Started


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 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

how-to-style-your-menu-without-editing css-file

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?


25 thoughts on “Mega Menu

  1. MaynardWramy

    If you are an app developer and demand motorized marketing then this article is for you. We equip app downloads, app installs and app reviews so your app can retrieve the leaking it deserves. We have helped thousands of customers to reach more users pro their versatile app. We grow your app official users, and then your app will reach the google play chart. This works after all mechanical developers.

    mobile marketing degree

  2. RogeranAck

    NetGameCasino на самой популярной платформе RIVERSLOT.
    Так же доступна версия для смартфонов и
    планшетов на ОС Android.
    Самая динамичная игровая платформа, которая уже запомнилась игрокам впечатляющим
    ассортиментом игр, великолепной графикой и невероятными выигрышами!

    Огромное количество бонусов!!!!!

  3. GeorgeFah

    If you are an app developer and necessity motorized marketing then this article is for you. We equip app downloads, app installs and app reviews so your app can retrieve the revelation it deserves. We give birth to helped thousands of customers to reach more users for their versatile app. We grow your app veritable users, and then your app intent reach the google challenge chart. This works in behalf of all mechanical developers.

    mobile marketing engine

  4. Martindew

    РџРѕСЂРЅРѕ фото РІ поезде девушек. Молодые Рё красивые девушки снимаются РІ РїРѕСЂРЅРѕ фото сессии голыми Рё обнаженными РІ поезде. Различные интимные&n РїРѕСЂРЅРѕ голые девушки РІ поезде bsp;…

  5. Best-Superfood-Wag

    Next time I read a blog, Hopefully it doesn’t fail me just as much as this particular one. I mean, Yes, it was my choice to read through, however I really thought you would probably have something useful to talk about. All I hear is a bunch of crying about something you can fix if you weren’t too busy looking for attention.
    the best green superfood

  6. Ignaciocer

    Afhdjhfdifj jfbdjw efwjjfwefkwenwj gbfhewifw
    gbuewhifjw weifhwef jvsnkqwkf jqwokd n jwegjwfoewjih
    fnejnfbvuef fijiwrotpojegi owkemwnjrj rowjrokwk nirjwok wn wjrkwkr
    bvncmcieughfijdf hiwjeow jw riwjoe wkkfn iw jrwjfeigeiwkjfehbks
    srhreiutregreshv hur erh weiiewhbahewvhjvetjhwahj vahwtvhwebrbw hbewhr
    rwhetiuawhhewahtbehtbwehjbfsdhlfuh hfwebfa

  7. Karinespelf

    Les bandeaux pour cheveux, un accessoire indémodable et indispensable qui met en valeur tous les styles de coiffure
    bandeaux cheveux Les objets capillaires qui font maintenant parti de notre quotidien. Et pour cause, si ces derniers se déclinent sous toutes les formes, ils savent mettre nos coiffe en avant en toute circonstance. Que vous cherchez un look plutôt sophistiqué, le bandeau cheveux vous rendra plus belle que jamais, jusqu’à la pointe des cheveux
    il faut pensee qu’il s’agit d’un accessoire prisé depuis longtemps ! Déjà utilisée au temps antique, le bandeau pour votre coiffure pouvait autrefois être composé de piere precieuse ou de feuillage d’arbres sacrés. C’est avec succes qu’il à su traverser toutes les périodes, des années 20 jusqu’à aujourd’hui, en passant par les années yéyé.
    En quelle circonstance peut-on porter un bandeau pour ma tete et comment mettre en avant mon style rock
    Si vous avez les cheveux longs, le bandeau pour ma tete sera un excellent moyen de sublimer aussi bien un chignon. De plus, c’est rapide ! Plutôt romantique ou décoiffé
    accessoire cheveux effet push up

  8. Wayneedula

    Наши условия сотрудничества

    Как с нами зарабатывать?

    У нас все прозрачно и четко. Вы открываете счет на нашем сайте, и через личный кабинет контролируете его баланс. Счет вы можете открыть на один из 4-х периодов – 24 часа, 7, 14 или 28 дней. В любом из пакетов прибыль – стабильная: 1,6% в день от суммы, которую вы внесли на счет. Или до 59% процентов в месяц.
    К примеру, поехали сегодня на дачу, а 1,6% от сумы вклада в конце дня – у вас на счету. Некоторые наши клиенты все время путешествуют, наслаждаются жизнью, и делают они это за счет процентов TrustBet, получая стабильную прибыль каждый день.
    Хотим отметить, что в любой момент вы можете вывести с Вашего счета деньги без дополнительных комиссий, подтверждений или верификаций.
    Наша команда работает с оборотом средств на вашем счету, четко распределяя, какую сумму, на какое событие и где поставить. Мы зарабатываем на ставках вместе с вами благодаря собственному уму и опыту. Компания TrustBet гарантирует вам стабильную прибыль, потому что риск берет на себя: выиграет или проиграет та или иная команда на ваш заработок не влияет. У вас – стабильная прибыль в размере 1,6% в день или 59% в месяц вне зависимости от исхода того или иного спортивного события. Очень неплохо, согласитесь. Поэтому, присоединяйтесь к TrustBet! С нами удача всегда на вашей стороне!

    А можно вкратце объяснить?

    Мы гарантируем Вам стабильную прибыль 1.6% в день или до 59% в месяц от Вашей суммы инвестиции. Все, что Вам необходимо сделать, это:
    1 — открыть аккаунт в компании TrustBet
    2 — сделать депозит выбрав при этом соответствующий тариф
    3 — ожидать окончания депозитного периода, после — создать заявку на вывод средств

  9. OlgaMak

    Here and ended style week in fresh York in 2017. Considerable week I’ll demand that you, but not without scandals and enchanting spices! Remarkably to the nth degree roasting discussed models that gave us clothing. They sway many of them from elite escorts, and some consummately whores. Which was picked up from the avenue or from the instal profound Dating. Who wants in you’ll take care it can be viewed here There you at one’s desire sight pictures and a quantity of other show but unfortunately at most after registration, if you are solo then you presumably will like it there).

Leave a Reply

Your email address will not be published.