Categories: Magento News

Magento 2 Mega Menu Documentation |Landofcoder

Magento 2 Mega Menu extension supports you reorganize the entire list of products in a neat and spectacular way by creating dynamic navigation menus with no code required.

This Magento 2 Mega Menu Documentation covers the installation, setup, and use of this extension and provides answers and solutions to common problems and issues. We encourage you to read this document thoroughly if you are experiencing any difficulties.

I. Overview

1. Introduction

Latest Version:

Magento 2 Megamenu Normal Version: Version 1.1.6 – August 27, 2021

Magento 2 Megamenu PRO Version: Version 1.1.9 – August 06, 2021

By: Landofcoder Team

2. Installation

2.1. Setup via FTP or cPanel

At now the module just supports setup via uploading module files via FTP and running Magento 2 commands.

You should go to our site, log in with your account > go to Dashboard > Download Products > then download module file “Ves Megamenu” will get the file like this “ves_megamenu.zip“ or “ves_megamenu_pro_v1.1.3.zip”. After decompressing it we will get the folder and module files for each Magento 2 version. If your site is running Magento 2.4.x, set up the module file under folder Magento 2.4.x.

After upload module files to your server with FTP client or cPanel. Please run magento 2 commands via SSH terminal:

php bin/magento setup:upgrade –keep-generated

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

php bin/magento cache:clean

2.2. Install sample data

Please follow the steps:

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

2. Select the sample data file (in download file)

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

Video Guide To Install Magento 2 Megamenu

View video guide at link: https://youtu.be/dBNDrcMCkvk

II. Detail Document

1. Getting started

This document covers the installation, setup, and use of this extension and provides answers and solutions to common problems and issues. We encourage you to read this document thoroughly if you are experiencing any difficulties.

2. Information

Magento 2 Mega Menu extension supports you reorganize the entire list of products in a neat and spectacular way by creating dynamic navigation menus with no code required.

In this Magento 2 mega menu extension, we offer various fruitful features to let customers find all desired products at the first sight.

3. Features

  • Drag & Drop Menu Builder
  • Vertical and Horizontal Menu
  • Mobile Menu: Off-Canvas Menu & Accordion Menu, Drilldown Menu
  • 7 Submenu Types: Anchor Text, Dynamic Category Listing, Product Listing, Product Grid, Child menu., Default Category Listing, Content
  • Unlimited Menu Possibilities
  • Widget Support or add code to file XML on any position
  • Multiple Animations Effects Supported
  • Structure Preview
  • Auto Data Backup
  • Use Custom Menu For Mobile
  • REST API Support
  • Dynamic Magento 2 Navigation Menu
  • Right To Left Language Support

4. Module Configuration

Go to admin > Stores > Configuration > Venustheme > Ves Megamenu:

5. Create New Megamenu Profile

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

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

There are two tabs: General Settings, Menu Editor (for the normal version, PRO version is more advanced)

Edit menu profile (Normal Version):

Edit menu profile (Pro Version):

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 removed when your screen width is 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 screening width is more than 768px. There are 3 template types:

 Horizontal Menu

Vertical Menu Left

Vertical Menu Right

Mobile template: There are two template types:

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 managing menu items

6. Configure menu item

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

A menu item has 8 tabs:

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

Before configuring all item settings, we need to check the 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 shortcode: {{store url=”contact”}} => http://domain.com/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 an icon for this item, then update the icon position

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

Disable Dimensions: Enter the width(pixel) want to disable, the menu will be hidden when screening 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

Dropdown

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 are four alignment types for the menu content to appear

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

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

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

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

From right item: menu dropdown content will appear from the right of the 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,…

7. Show menu on frontend

Default menu profile with alias = “menu-top” (normal version) or “top-menu” (pro version) will show on frontend. 

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

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

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

III. Support Information

If you have any questions or requests, please contact us at info@landofcoder.com. We are very happy to assist you!

Website: https://landofcoder.com/

Blog: https://blog.landofcoder.com/

Support: https://landofcoder.ticksy.com/

Thank you and stay safe!

People also search for:

  • magento mega menu documentation
  • Guide for Mega Menu for Magento 2
  • how to add mega menu in magento 2
  • magento 2 custom navigation menu
  • magento 2 mega menu free by landofcoder
  • how to add menu in magento 2 frontend
  • magento 2 mega menu extension
  • mege menu extenstion for magento
  • guide for mega menu extension
Catherine Nguyen

Recent Posts

Top 10 Trusted Web App Development Companies to Elevate Your Digital Strategy

In today’s digital landscape, the rapid evolution of advanced web applications, particularly Progressive Web Apps…

11 hours ago

Why Your Retail Business Needs Big Data eCommerce In 2025?

As eCommerce booms, big data eCommerce will be all about providing insight into how to…

13 hours ago

The Best Role Of Magento 2 In Shaping The Future Of Ecommerce

The ecommerce industry is booming like never before. In fact, global retail ecommerce sales are…

2 days ago

13 Best Practices For Developing Custom WordPress Solutions

From brick-and-mortar retail to SaaS, a robust online presence is vital for business success. A…

4 days ago

AML Compliance In E-commerce: Why It’s Essential For Fraud Prevention?

In the e-commerce world, complying with Anti-Money Laundering (AML) regulations is more important than you…

7 days ago

How to Optimize Your Magento Store’s Marketing Strategy

Magento is the 4th most popular eCommerce platform used globally, and optimizing the marketing strategy…

1 week ago