How to Config Magento 2 Menu Item – Magento 2 Mega Menu Tutorial

This tutorial will help you How to Config Magento 2 Menu Item for Magento 2 Store by our Magento 2 Mega Menu Extension.

There are 8 Tabs which need to Config Magento 2 Menu Item:

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

With this configuration, you can set the width of dropdown, position, animation, color, backgroud with image or not, menu types, …
In order to config correctly position of the menu which is displayed well on Frontend Menu. Follow us to check Magento 2 Menu Structure:

1. Set General Information:

At general information Tab, you should fill all information relate name, type of menu, icon, group or not, dimension, screen width, etc

1.1 Name: Set menu title. It maybe Women, Men, Fashion, etc.
1.2 Link Type: Category Link or Custom Link.

+ Category Link: It allows to add specific category link to menu. You can choose one of Magento 2 Category in your store. View more How to Add Category Link to Menu in Magento 2

+ Custom Link: Allows to enter your custom link, it supports Magento 2 Shortcode: If the link is http://domain.com/contact -> Magento 2 Shortcode is {{store url=”contact”}} 

1.3 Link Target:

+ 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

1.4 Show Icon: Enable to “Yes” or not. Upload Icon, hover icon for this item then update icon position

Hover Icon:

Choose Icon Position: Left or Right

Icon CSS Class: Allows to add class CSS for icon to make it more different.

1.5 Caret, Hover Caret: Insert Icon & Hover Icon Caret for Menu

1.6 Disable Dimensions: 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: Enable/Disable Item

 

2. Config Magento 2 Menu Item Dropdown

2.1 Is Group: 

Set Yes/No

There are 2 choices: Yes/No

+ “Yes”: All Sub-menu items will be shown-off in the same level of parent menu without hovering on parent menu.
+ “No”: All Sub-menus are not shown with the same parent menu level. When hovering on parent menu, sub-menu Items just appears.

2.2 Width: Set Width for Menu Item Dropdown:

Ex: 400px, 100%

2.3 Show Effects: Set Animation of dropdown effect: It includes 9 groups & 44 effects

2.4 Show Duration (s): Set total time of effect in the second.

2.5 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

2.6 Background Options: background color, background image, background repeat, background position x, background position Y.

2.7 Background Color:
+ Background Image: Set Image Background for Dropdown Menu

2.8 Insert Image:


+ Background Repeat:
+ Background Position X:
+ Background Position Y:

2.9 Inline CSS: Add custom code CSS for this item. Semi-colon separated.

3. Config Magento 2 Menu Item Header:

  • Default width is 100%.
  • There are 2 choices: Enable/Disable
  • Top HTML: Supports WYSIWYG editor. Magento Widget, etc

4. Config Magento 2 Menu Item Left Block:

  • Width:Â Set width of your left block
  • Enable: Yes/No
  • Top HTML: Supports WYSIWYG editor, you can insert HTML code, Video(youtube, ,…), Magento widget,etc

5. Config Magento 2 Menu Item Main Content:

5.1 Enable: Yes/No

5.1 Width: Set the width of main content. (percentage or pixel)

5.3 Main Content Types: There are 4 content types:

  • Child Menu Item: Display menu item in the menu editor section
  • Dynamic Content Tab: Each item as a tab, the first tab is default active
  • Sub-Categories: Show all sub-categories by specific category

5.4 Child Menu Column: Insert the number of columns childmenu.

5.5 Content: Supports WYSIWYG editor: insert HTML code, Video(youtube, vimeo,…), Magento widget.

6. Right Block:

  • Enable: Yes/No
  • Width: Set Block Width: Fx: 100%, 400px.
  • HTML Content: Support WYSIWYG editor: insert HTML code, Video(youtube, vimeo,…), Magento widget.

7. Bottom Block:

  • Enable: Yes/No
  • Default width is 100%.
  • HTML Content: Support WYSIWYG editor: insert HTML code, Video(youtube, vimeo,…), Magento widget.

8. Design:

Customize the style of menu item: color, background color,…You will set color for:

 

  • Text Color:
  • Hover Text Color
  • Background Color
  • Background Hover Color
  • Inline CSS

When you config all above information, you should click “Update” before “Save & Edit” to ensure your content is saved successfully.

9. Clear Cache

Then Clear Cache: System -> Cache Management -> Select All -> Submit

 

This is all our blog “How to Config Magento 2 Menu Item”. We hope that it will help you well in the menu configuration for Magento 2

Magento 2 Mega Menu Tutorials

Some other extensions you maybe interested in

Related Posts

Nhu Quynh

Recent Posts

Top 6 Powerful LearnDash Themes to Skyrocket Your Online Courses

Presentation is as important as content in online learning. From your LearnDash theme, the professional…

2 hours ago

Streamoz Review 2025: What Twitch Growth Services Reveal About the Future of eCommerce Visibility

Daily, millions watch live streams on Twitch in the form of games, music, IRL content,…

2 days ago

How Powerful Social Media Boosting Tools Like Jaynike Music Marketing Are Transforming eCommerce Marketing in 2025

In the contemporary setting of competitive musicality, even the most talented are having unspeakable trouble…

2 days ago

TikTokstorm Review 2025: Powerful Social Media Boosting Tool Shaping the Future of eCommerce

In the dynamic world of eCommerce, visibility is everything. Whether you’re running a small Shopify…

2 days ago

Top Magento 2 SEO Extensions to Supercharge Enterprise SEO in 2025

Magento 2 SEO Extensions are essential for enterprises in 2025 to boost visibility, optimize performance,…

1 week ago

Life Insurance In The Digital Age: How Technology Is Changing Protection

The best life insurance should always be about one thing: financial security for our loved…

1 week ago