How to Create Magento 2 Menu with 6 Types – Magento 2 Mega Menu- Landofcoder

In Magento 2, this Magento 2 Mega Menu comes with tons of powerful features. By Drag n Drop Features and tons of pre-made styles in Mega Menu, it helps to create a wide range of rich menus. It is very ease to setup, use & customization. One of the reasons why You Should choose Magento 2 Mega Menu on Landofcoder is that it supports to create 6 Types of Menus in Magento 2.

So in terms of our blog, we will show you 6 Styles to Create Magento 2 Menu:

  1. Anchor Text
  2. Dynamic Category Listing
  3. Child menu
  4. Content
  5. Product Listing
  6. Product Grid
  7. Default Category Listing

Follow us! Let’s discover “How to Create Magento 2 Menu with 06+ Styles by Magento 2 Mega Menu Extension” – Landofcoder.

Note: This Blog ensures you Create Magento 2 Menu with style. You have to know these steps:

+ How to Create Simple Menu Magento 2 ?
+ How to Add Category Link to Menu in Magento 2 ?

Watch Video -> 

1. Create Magento 2 Menu with Anchor Text Styles

Being the first style in Magento 2, Anchor Text Menu in Magento 2 Mega Menu is the most simple style in both style and use.

Start to Create Magento 2 Menu with Anchor Text Menu Style:

You have 2 styles:

  • Add Link Category: View more ->Â
  • Custom Link: For other link ( not category link)

Add New Menu -> Fill General Menu Information:

  • Name menu:
  • Link Type: Custom Link
  • Custom Link: # or detail link to other page, not category
    (This hash (#) to make this item not clickable in the top menu ) -> Update

Save & Continue Edit -> View it on Frontend to see How it Display.

2. How to Create Magento 2 Menu with Dynamic Menu Category Listing:

Add New Menu -> Edit -> Insert Widget -Settings -> Update -> Save & Continue Edit

  • Add New Menu: Menu Gear

+ At General Settings:

Link Type: Category Link
Category: Choose The Category link you want to link -> Update
Content: Choose Dynamic Content Tab

At Subcategory (Child menu) and Click “Edit”

Main Content Type: Choose “Content”

  • Insert Widget:

Widget Type: Ves Megamenu: Products
Widget Options: Choose categoies: Select categories you want

Number of Item: 20

  • Owl Carousel Settings:

Enable: Yes
Number of Item per Column: 2
Margin: 1
Auto Width: Yes/No
Autoplay: Yes/No
Auto HoverPause: Yes/No
Show Dots Navigations: Yes/No
Show next/prev buttons: Yes/No

  • Item Settings:
    Show Name: Yes/No
    Show Price: Yes/No
    Show Image: Yes/No
    Image Width: 150
    Image Height: 200

-> Insert Widget -> Update -> Save & Continue Edit

3. Create Child Menu (Submenu) in Magento 2

Child menu (Submenu) is the secondary menu. It is a list of choices that is part of another list of choices. If you enable the field “Is Group” is “Yes”, both menu & submenus items will be displayed in the same level.

Create New Menu -> Add Submenu – the same steps to create single menu in Magento 2

You need to add parent menu A -> Submenu (secondary menu) and child menu

And Edit menu A:

+ At Dropdown:

Set Width: 100%

And “Update”

At Menu 1:
Click Edit -> At General Information -> Is Group: Choose “Yes”

And “Update”

At Main content You can set 1 or 2: -> “Update -> Save & Continue Edit”

View How it Displayed at the Frontend.

4. How to Add Custom Menu with HTML Video, Google Map in Magento 2?

Add New Menu -> Name Menu -> Update

-> At Main Content -> Choose “Main Content Type” = “Content”

4.1 Add Custom Menu with HTML Video:

Copy HTML VIDEO:

Choose HTML Element:
Insert Video HTML: -> Update -> Update

At Dropdown:

Width: 500px
Choose Alignment: From right menu
Classes: Pull-right

-> Update -> Save & Continue Edit

5. How to Add Menu with Product Grid/Listing in Magento 2 ?

Add New Menu -> Name Product -> Update

Main Content -> Main Content Type: Choose Content

At Content HTML -> Insert Widget -> Widget Type: Choose Ves Mega Menu Products

Widget Options:

Choose Categories: All
Number Item: 20

On Owl Carousel Settings:

  • Enable: Yes/No
  • Number of Item per Columm: 2
  • Mouse Drag: Yes/No
  • Pull Drag: Yes/No
  • Free Drag: Yes/No
  • Autoplay: Yes/No
  • Autoplay HoverPause: Yes/No

Item Settings:

  • Show Name: Yes/No
  • Show Price: Yes/No
  • Show Review: Yes/No
  • Show Image: Yes/No
  • Set Image Width: 150
  • Set Image Height: 200

Then Click ” Insert Widget” -> Update

  • At Dropdown:
    Set Width: 100%

-> Update -> Save & Continue Edit

6. How to Add Magento 2 Menu with Default Category Listing ?

Create New Menu -> Update -> Save & Continue Edit -> Update

Edit Menu -> Edit:

Main Content:

Main Content Type: Sub-categories
Parent category: Choose Category for Parent

Child Menu Column: 2

Dropdown:

+ Set Width: 400px
+ Alignment: From right Items
-> Update -> Save & Continue Edit

7. Clear Cache

System -> Cache Management -> Sellect All -> Submit

This our blog “Create Magento 2 Menu with 06+ Styles easily by Magento 2 Mega Menu Extension – Landofcoder. We hope this blog helps you enrich your menu content & style.

Magento 2 Mega Menu Tutorials

Some other extensions you maybe interested in

Related Posts

Nhu Quynh

Recent Posts

Upskilling for the AI Era: What Skills Will Matter Most by 2030

AI Era marks the infinite game of the technology business. The future must be faster…

23 hours ago

From Banking to Blockchain: How Fintech Apps Are Redefining Digital Transactions

Money and technology have always been connected, but the last decade has completely revolutionized how…

24 hours ago

Top BI Trends in 2025 Every Data-Driven Leader Should Know

BI Trends in 2025 — Every business is driven by data, and they use data…

1 week ago

Why Magento 2 Integration Boosts Umbraco Development Efficiency

The pandemic brought a huge difference in consumer behavior, digital adoption, and online sales rate.…

2 weeks ago

The Essential Guide to Optimize Website Layouts for Superior Speed

To optimize website layouts effectively is one of the most crucial steps in enhancing site…

2 weeks ago

The Importance of SEO Services for Manufacturers: Driving Online Success in a Competitive Industry

In the manufacturing industry, staying ahead of the competition is essential for long-term success. As…

2 weeks ago