logo
Magento® Extensions Guide
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Magento 2 Mega Menu-User Guide

Buy Now Frontend Demo Backend Demo

July 17, 2018 by Rootways-docs

Table of Contents

    • Introduction
    • Know Rootways Mega Menu Dropdown section
    • How to use and configure
      • 3.1 General Settings
        • 3.1.1 Settings
        • 3.1.2 Design
      • 3.2 Mega Menu Management
      • 3.3 Types of Mega Menu
        • Simple Dropdown
        • Dropdown with Title
        • Half Width
        • Half Width – with sub category as title
        • Full Width
        • Full Width – with sub category as title
        • Tabbing menu
        • Tabbing – horizontal
        • Products Only
    • Responsive Layout of Rootways Mega Menu
    • FAQ

1. INTRODUCTION

Do you know how long customers stay on web pages? Surprisingly, it’s only 10-20s on average (NNGroup, 2011) even if you have a variety of products and categories to show. To not let customers leave so soon, direct them the shortest way to what they are looking for.

Rootways Mega Menu extension is your solution to create the best sitemap right on the main navigation.

No technical knowledge required! You can flexibly set up your menu as per your requirements with Content, Products, Category and everything you want to feature.

You don’t need to worry about your site speed. Rootways Mega Menu doesn’t affect your site speed.

Let’s take a look at its Features below:

  • Easily create different types of menu items by selecting mega menu types.
  • CMS Static block within mega menu.
  • CMS Static block within mega menu.
  • Category icons.
  • Set number of columns.
  • Display products.
  • Add products to cart directly from Mega Menu.
  • New vertical tabbing menu with user friendly layout.
  • Easily manages position of content, number of columns, category image size, and show category image.
  • Arranging Position of Categories.
  • Show and hide specific category from mega menu.
  • Show and hide home icon.
  • Contact form in menu. Form submitted using Ajax without reloading page.
  • Set Contact Form in Mega Menu and Form is submitted using Ajax without loading page.
  • Responsive
  • Easy to install, configure and use.
  • Support by Rootways – any questions we are here to help you.

2. Know Rootways Mega Menu Dropdown section.

There are 5 parts/sections of each dropdown on the frontend.
Check following screenshot of front-end.

Check following screenshot of backend.

1) Category section: This displays all subcategories of the main category, this is fully dynamic, which means if you add any new subcategories in admin then it will automatically be added at mega menu “category section” in the dropdown in the front-end.
2) Left Side Content: This displays any static content added under “Left Side Content Block” at the admin side.
If you add any content here then you must have to choose/decide the width of this section. You can select Width this section from “Left Side Block Width”.
3) Right Side Content: This display any static content added under “Right Side Content Block” at the admin side
If you add any content here then you must have to choose/decide the width of this section. You can select Width this section from “Right Side Block Width”
4) Header Content: This display any static content added at the admin side under “Header Content Block” (Check the following screenshot)
5) Footer Content: This display any static content added at the admin side under “Footer Content Block” (Check the following screenshot)

In above points 2 and 3, you can see that we are selecting the width of left side content and right side content, so here a question may occur, from where we can decide/choose the width of the category section?
Ans: Category section width will automatically be decided based on the width you selected for left-side content and right-side content. Following is an example of how the front-end dropdown will be display based on the admin settings.

Example 1: Assume for main Category “A” you have selected the following from the admin.
Selected “3/12” in the “Left Side Block Width”
Selected “6/12” in the “Right Side Block Width”
You have added nothing for “Header Content” and “Footer Content”.

Now at front-end dropdown will be displayed as follows.
Left Side Content will be displayed in 25% (3/12)
Right Side Content will be displayed in 50% (6/12)
Category section will be displayed in 25% (Left Side Block Width – Right Side Block Width)
In header and footer displaying nothing.

Example 2: Assume for main Category “B” you have selected the following from the admin.
Selected “Do Not Show Content” in the “Left Side Block Width”
Selected “3/12” in the “Right Side Block Width”
You have added nothing for “Header Content” and “Footer Content”.

Now at front-end dropdown will be displayed as follows.
Left Side Content will not be displayed as you have selected “Do now show content” which means 0% width occupied by this.
Right Side Content will be displayed in 25% (3/12)
Category section will be displayed in 75% (Left Side Block Width – Right Side Block Width)
In header and footer displaying nothing.

3. HOW TO USE AND CONFIGURE

This section will guide you to configure Rootways Mega Menu Extension and how to use different layout with different categories. It’s very easy and fast!

You have to manage Mega Menu from two places, first one from Configuration setting and second one from Category section.

3.1 General Settings:
3.1.1 Settings:

This section will show you how to manage Mega Menu from Configuration settings.
Log in to Admin Panel and then click STORES -> Configuration -> Rootways Extensions -> Mega Menu. Below is the Screen shot for Mega Menu Settings


Configurations Settings

Admin: Configuration Settings for “Mega Menu”

  • Enable: Enable/Disable Mega Menu using this setting. If it is disabled, then you can see default Magento menu at front end side.
  • License key: Enter License key that was sent to you by us in the email.
  • Show Home link in Menu: Show/Hide Home link in Mega Menu.
  • Show Contact Form in Menu: If select “No” then contact form gets hidden from mega menu. If select “Only Contact Form” then display contact form only without content. If select “Form with Content” then display contact form with content.
  • Contact Us Menu Content: If selected “Form with Content” for above option then you can see this option. Add content of mega menu contact form from here.
  • Custom Link: You can add custom links to mega menu with dropdown at specific position.
  • Top Menu Alignment: Decide whether you want to display menu to left, right or center align.
  • Show Top Level Categories Icon: If set to “Yes” then you can see top category icon on mega menu.
  • Show View More: If you want to add “View More” link then set “Yes”, otherwise “No”.
  • Add View More After: If set “Yes” for above option then this option will be visible. If your website has 20 categories and you want to display first 10 categories only in mega menu and display other remaining categories under View more then add here 10.
  • Delay Dropdown Hover: Set “Yes” if you want delay in mega menu dropdown.
  • Delay Second: Add delay second of dropdown.
3.1.2 Design:

From this section you can change layout, colors, font, etc of mega menu.

Admin: Configuration Settings for “Mega Menu”


Mega menu general setting image


Mega menu general setting image


Mega menu general setting image

3.2 Mega Menu Management:

This section will guide you how to manage Mega Menu from category section.
Go to Admin Panel -> PRODUCTS -> Categories. Over here you can see New “Rootways Menu” tab is created using this extension.

Rootways Menu : This tab has options to display Menu as per your requirements. When you first open this tab of any category, there is no option of “Mega Menu Type” selected.

Note : You must have to select ‘Mega Menu Type‘ option with each and every main category of your website. No need to select for sub categories of main category, e.g. in below screen there are 12 main categories (Highlighted with arrow are main categories) and you only need to select ‘Menu Type’ with these main categories.


Mega menu general setting image

There are more than 11 types of Mega Menu and which will cover your entire required navigation menu. The types of Mega Menu are as follows:

  • Simple Dropdown
  • Simple Dropdown
  • Dropdown with Mega Layout
  • Half Width
  • Half Width – with sub category as title
  • Full Width
  • Full Width – with sub category as title
  • Tabbing menu.
  • Tabbing – horizontal
  • Multi-Tabbing
  • Products only
3.3 Types of Mega Menu:

Read about each Menu type in detail to know which type of menu matches your requirement and how it works.

1] Simple Dropdown

This is simple dropdown menu, with this menu you can see tree of categories with 4th level of categories that means it expands to sub-sub-sub categories.

Below are detail descriptions on each options of this menu type.

  • Dropdown Position: Whether open dropdown at left side or right.
  • Show Category Image: Whether to show category image or not.
  • Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
  • Category Image Width: Add the Category Image Width.
  • Category Image Height: Add the Category Image Height.
  • Label Color: Add a suitable color for the label as per your requirement.
  • Label Text: Add a suitable text for the label.
  • Custom Class: Add a custom class for the menu.

Admin: Menu Type= “Simple Dropdown”


Simple Dropdown FrontEnd

Front side: Result of Menu Type= “Simple dropdown”


Simple Dropdown Front End

2] Dropdown with Title

This is a dropdown menu having the functionalities same as the simple dropdown but the only difference is in the layout. The category title will be displayed.

Below are detail descriptions on each options of this menu type.

  • Dropdown Position: Whether open dropdown at left side or right.
  • Show Category Image: Whether to show category image or not.
  • Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
  • Category Image Width: Add the Category Image Width.
  • Category Image Height: Add the Category Image Height.
  • Label Color: Add a suitable color for the label as per your requirement.
  • Label Text: Add a suitable text for the label.
  • Custom Class: Add a custom class for the menu.

Admin: Menu options for “Dropdown with title”


Dropdown with title All Options Admin

Front side: Result of Menu Type= “Dropdown with Title”


Dropdown with title Front End

3] Half Width

Half Menu is for less sub categories. This dropdown displays in half width of navigation showing the sub categories. This is suitable for those categories that have few sub categories.

Below are detail descriptions on each options of this menu type.

  • Sub-category Columns: Choose the number of columns for the Sub-categories.
  • Dropdown Position: Whether open dropdown at left side or right.
  • Left Side Content Block: Add the content to be displayed on Left side Block.
  • Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
  • Right Side Content Block: Add the content to be displayed on Right side Block.
  • Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
  • Header Content Block: Add the content to be displayed on Header block.
  • Footer Content Block: Add the content to be displayed on Footer block.
  • Show Category Image: Whether to show category image or not.
  • Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
  • Category Image Width: Add the Category Image Width.
  • Category Image Height: Add the Category Image Height.
  • Label Color: Add a suitable color for the label as per your requirement.
  • Label Text: Add a suitable text for the label.
  • Custom Class: Add a custom class for the menu.

Admin: Menu options for “Half Width”


Half Width All options Admin

You can show Category image (as icon) with each sub-categories of this menu type.

Front side: Result of Menu Type= “Half Menu with category image”


Half Width with Category Images Front End

4] Half width with sub category as title

This menu is displayed in half width with sub- categories as titles. This is suitable for those categories only having sub categories and sub-sub categories.

Below are detail descriptions on each options of this menu type.

  • Sub-category Columns: Choose the number of columns for the Sub-categories.
  • Dropdown Position: Whether open dropdown at left side or right.
  • Left Side Content Block: Add the content to be displayed on Left side Block.
  • Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
  • Right Side Content Block: Add the content to be displayed on Right side Block.
  • Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
  • Header Content Block: Add the content to be displayed on Header block.
  • Footer Content Block: Add the content to be displayed on Footer block.
  • Show Category Image: Whether to show category image or not.
  • Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
  • Category Image Width: Add the Category Image Width.
  • Category Image Height: Add the Category Image Height.
  • Label Color: Add a suitable color for the label as per your requirement.
  • Label Text: Add a suitable text for the label.
  • Custom Class: Add a custom class for the menu.

Admin: Menu options for “Half Width with sub- category as title”


Half Width All options Admin

Front side: Result of Menu Type= “Half Width with sub- category as title”


Half Width with Title Front End

5] Full Width

This menu is displayed in half width with sub- categories as titles. This is suitable for those categories only having sub categories and sub-sub categories.

Below are detail descriptions on each options of this menu type.

  • Sub-category Columns: Choose the number of columns for the Sub-categories.
  • Dropdown Position: Whether open dropdown at left side or right.
  • Left Side Content Block: Add the content to be displayed on Left side Block.
  • Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
  • Right Side Content Block: Add the content to be displayed on Right side Block.
  • Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
  • Header Content Block: Add the content to be displayed on Header block.
  • Footer Content Block: Add the content to be displayed on Footer block.
  • Show Category Image: Whether to show category image or not.
  • Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
  • Category Image Width: Add the Category Image Width.
  • Category Image Height: Add the Category Image Height.
  • Label Color: Add a suitable color for the label as per your requirement.
  • Label Text: Add a suitable text for the label.
  • Custom Class: Add a custom class for the menu.

Admin: Menu options for “Full Width”


Full Width Admin

Front side: Result of Menu Type= “Full width”


Full Width Front End

6] Full width with sub category as title

This menu is displayed in half width with sub- categories as titles. This is suitable for those categories only having sub categories and sub-sub categories.

Below are detail descriptions on each options of this menu type.

  • Sub-category Columns: Choose the number of columns for the Sub-categories.
  • Dropdown Position: Whether open dropdown at left side or right.
  • Left Side Content Block: Add the content to be displayed on Left side Block.
  • Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
  • Right Side Content Block: Add the content to be displayed on Right side Block.
  • Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
  • Header Content Block: Add the content to be displayed on Header block.
  • Footer Content Block: Add the content to be displayed on Footer block.
  • Show Category Image: Whether to show category image or not.
  • Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
  • Category Image Width: Add the Category Image Width.
  • Category Image Height: Add the Category Image Height.
  • Label Color: Add a suitable color for the label as per your requirement.
  • Label Text: Add a suitable text for the label.
  • Custom Class: Add a custom class for the menu.

Admin: Menu options for “Full Width with sub- category as title”


Full Width with Title Admin

Front side: Result of Menu Type= “Full Width with sub- category as title”


Full Width with Title Front End

7] Tabbing Menu

It displays Mega Menu feature with vertical tab of category. This is an extra ordinary feature of Mega Menu ever used with Magento Websites.

Below are detail descriptions on each options of this menu type.

  • Sub-category Columns: Choose the number of columns for the Sub-categories.
  • Dropdown Position: Whether open dropdown at left side or right.
  • Left Side Content Block: Add the content to be displayed on Left side Block.
  • Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
  • Right Side Content Block: Add the content to be displayed on Right side Block.
  • Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
  • Header Content Block: Add the content to be displayed on Header block.
  • Footer Content Block: Add the content to be displayed on Footer block.
  • Show Category Image: Whether to show category image or not.
  • Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
  • Category Image Width: Add the Category Image Width.
  • Category Image Height: Add the Category Image Height.
  • Label Color: Add a suitable color for the label as per your requirement.
  • Label Text: Add a suitable text for the label.
  • Custom Class: Add a custom class for the menu.

Note: No need to select “Show Category Image” because with this category we take category image by default. So please add category images to every sub-sub category for better layout.

Admin: Menu options for “Tabbing”


Tabbing Menu Admin

Front side: Result of Menu Type= “Tabbing”


Tabbing Menu Front End

8] Tabbing Horizontal

It displays Mega Menu feature with horizontal tab of category. This is an extra ordinary feature of Mega Menu ever used with Magento Websites.

Below are detail descriptions on each options of this menu type.

  • Sub-category Columns: Choose the number of columns for the Sub-categories.
  • Dropdown Position: Whether open dropdown at left side or right.
  • Left Side Content Block: Add the content to be displayed on Left side Block.
  • Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
  • Right Side Content Block: Add the content to be displayed on Right side Block.
  • Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
  • Header Content Block: Add the content to be displayed on Header block.
  • Footer Content Block: Add the content to be displayed on Footer block.
  • Show Category Image: Whether to show category image or not.
  • Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
  • Category Image Width: Add the Category Image Width.
  • Category Image Height: Add the Category Image Height.
  • Label Color: Add a suitable color for the label as per your requirement.
  • Label Text: Add a suitable text for the label.
  • Custom Class: Add a custom class for the menu.

Note: No need to select “Show Category Image” because with this category we take category image by default. So please add category images to every sub-sub category for better layout.

Admin: Menu options for “Tabbing Horizontal”


Tabbing Horizontal Admin

Front side: Result of Menu Type= “Tabbing Horizontal”


Tabbing Horizontal Front End

9] Product Only

This Mega Menu displays Products only. It can be used to feature Best selling Products, Products with Special offer. User is redirected to Product detail page or Product can be added to Cart directly from mega menu. (Only simple Product can be add to cart)

To display Product under ‘Products only’ Mega Menu just create Category with any name (in given example we take Best Seller) then add products under this category and select Menu Type = “Products only” and you can see all products in Mega Menu under this category.

Below are detail descriptions on each options of this menu type.

  • Show Category Image: Whether to show category image or not.
  • Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
  • Category Image Width: Add the Category Image Width.
  • Category Image Height: Add the Category Image Height.
  • Label Color: Add a suitable color for the label as per your requirement.
  • Label Text: Add a suitable text for the label.
  • Custom Class: Add a custom class for the menu.

Admin: Menu options for “Products only”


Products only Admin

Front side: Result of Menu Type=”Products Only”


Products only Front End

Responsive Layout of Rootways Mega Menu

Responsive Layout of Rootways Magento 2 Mega Menu is adaptive to all screen resolutions whether it is Mobile or Tablet.

Have a look at some of the screenshots of the Responsive Magento 2 Mega Menu.


Responsice View


Responsice View

Tablet screen resolution.


Responsice View


Responsice View

5.FAQ

Que: How to add/display a label with main and/or subcategory?
Ans: You can add a label with any category using Rootways mega menu. Follow these steps to add a label.

  • Step 1: Go to Admin > CATALOG > Categories.
  • Step 2: Click on the category in which you want to add a label.
  • Step 3: Move to the “Rootways Menu” tab.
  • Step 4: Enter a text of the label to the “Label Text” text field.
  • Step 5: Choose the background color of the label from “Label Color”.
  • Step 6: Save category, clear Magento caches, (do reindexing if clear caches will not work) and you can see that label at the front-end.

Filed Under: Magento 2 extensions, Mega Menu

That's how easy it is to use Magento 2 Mega Menu by Rootways.

Buy NowFrontend DemoBackend Demo

Please contact us for any queries regarding Magento and custom web development of Ecommerce websites.

Our Website: https://www.rootways.com Email: [email protected]

Our team is working on the newer version of Rootways Mega Menu with an extraordinary feature that you've never seen with any extension!!!

  • Magento 2 extensions
    • Mega Menu
      • Installation Guide
      • User Guide
    • Chase Payment
      • Installation Guide
      • User Guide
    • Bambora Payment
      • Installation Guide
      • User Guide
    • Authorize.net Payment
      • Installation Guide
    • First Data Payeezy Payment
      • Installation Guide
    • Stripe Payment
      • Installation Guide
      • User Guide
    • FAQ Module
      • Installation Guide
      • User Guide
    • Canada Post Shipping Module
      • Installation Guide
      • User Guide
    • Vend POS
      • Vend POS for Magento 2
    • Moneris payment
      • Installation Guide
    • Elavon/Converge Payment
      • Installation Guide
      • User Guide
    • Helcim Payment
      • Installation Guide
    • PSiGate Payment
      • Installation Guide
      • User Guide
    • CardConnect Payment
      • Installation Guide
    • Purolator Shipping
      • Installation Guide
  • Magento 1 extensions
    • Magento 2 Canada Post Shipping Module – Installation Guide
    • Mega Menu Pro Menu Type Layout
    • Vend Magento Integration
    • Mega Menu
    • Mega Menu Pro Extension
    • FAQ Extension
    • Product FAQ Extension
    • Image Gallery Extension
    • Slideshow Extension
    • Free Gift Item Extension
    • Advance Sitemap Extension
    • Advance Sitemap Extension
    • Magento Stripe Payment Extension
    • Magento Beanstream Payment Gateway
    • Advance Product Filter
  • Magento® Extensions
  • Advanced Dynamic Sitemap
  • Mega Menu
  • Advanced Product Filter
  • Responsive Dynamic Slideshow
  • FAQ Management
  • Free Gift Item
  • Our Services
  • Web Design & Development
  • Open Source Development
  • E-Commerce & Online Payments
  • Android Apps Development
  • iPhone Apps Development
  • Company Info
  • Request A Quote
  • Launch Portfolio
  • About Us
  • Contact Us
  • Customer Support
  • Return, Refund & Delivery Policy
  • Get In Touch
Copyright 2020 Rootways Inc. - All Rights Reserved.
Privacy Policy|Disclaimer|Terms Of Use
TOP