Guide for Mega Menu for Magento 2

Apply dynamic and flexible navigation menu to your webstore with Magento 2 Mega Menu extension. Add various types of content right to the menu bar to attract customers’ attention and enhance their shopping experience.

• Adjust your menu display using different layouts
• Add dynamic blocks, videos, images and links
• Apply various catchy labels
• Configure the menu without any technical skills
• Make your menu mobile friendly

This version has a set of features for desktop menu customization. Using the Lite version, you can:

• change a color scheme;
• enable hamburger menu for desktops;
• create custom menu items with links;
• adjust the sort order using the menu builder;
• highlight particular items with labels.

Keep in mind, that you won't be able to create engaging content for your categories and subcategories.

To choose a menu type and customize a color scheme, navigate to Stores → Configuration → Amasty Extensions → Mega Menu Lite.

Enabled - set to Yes to activate Mega Menu.

Enable Hamburger Menu For Categories - enable this option if you want to hide the categories into a separate menu type.

This type of menu is hidden under the three lines in the left corner:

A hamburger menu display:

A usual menu display:

Color Scheme Template - select one of the ready-made templates or choose Custom to adjust colors manually.

With a handy color-picker tool it is possible to configure the colors for:

• Menu Background/Text;
• Submenu Background/Text;
• Active Menu Item Color;
• Menu Item Hover;
• Hamburger Button.

You can also set a custom submenu background image if needed.

The whole color scheme is configured as below:

A color scheme customization for a hamburger menu has some peculiarities, e.g. Menu Item Hover Color is also used for a top tab with the default welcome message:

Background images are also displayed.

With the extension, you can add custom items to the menu bar. To see all additional items on a separate grid, go to Amasty → Mega Menu Lite → Custom Menu Items.

Here you can check the items' Title, URL Key (internal or external) and active Status.

Edit or Delete items in the Action column or perform mass actions via Actions dropdown menu.

To create a new menu item, click Add New Custom Item.

Title - fill in the title that will be displayed in the navigation menu.

URL Key - set the URL to redirect customers after clicking the menu item: Internal URL or External URL.

Internal/External URL - provide the required URL address.

Status - enable an item for mobile devices, desktops or for both. Disable an item if needed.

Menu Label Text - specify a text to highlight a custom item with a label if necessary.

Label Background/Text Color (hex) - adjust label colors to match menu design.

Hit the Save button.

Custom items and labels are displayed as below:

You can also customize the menu items order.

Navigate to Amasty → Mega Menu Lite → Menu Builder.

Adjust the position of each menu item (both top categories and custom menu items) using handy drag-and-drop functionality.

Using the Pro version, you can add various content types to make your menu more appealing and catchy. Pro version has the following features:

• use 2 extra menu types for mobile display (According and Drill Down);
• add the content to subcategory dropdowns on any levels (images, videos, widgets, etc.);
• make categories intuitive with icons + use ready-made icon packs;
• enable sticky menu.

To set the general settings of the extension, go to Stores → Configuration → Amasty Extensions → Mega Menu Configuration.

Visual content is available for desktops only, but in the mobile version, the general submenu dropdowns and color schemes are also displayed.

Expand the General tab.

Enabled - set to Yes to activate Mega Menu.

Enabled Sticky Menu - enable to display sticky menu navigation during vertical page scrolling.

Enable Hamburger Menu For Categories - enable this option if you want to hide the categories into a separate menu type.

Three lines at the top left corner will appear.

When you click it, all the categories will drop down.

So all the categories are nested under the 3 lines. It is useful if you would like to have additional space for custom tabs in the top menu bar.

Template for Mobile View - choose the way the categories will be displayed on mobile devices. Two options are available: Accordion and Drill Down.

Show Mega Menu Icons on - select the views to show category icons. 3 options are available:

• Both Desktop and Mobile
• Desktop Only
• Mobile Only

Icons can be added to the main categories and subcategories. In a hamburger menu it looks like this:

For the horizontal menu the icons will be displayed in the same way:

In the Color Settings tab, you can customize the menu style to match your website design.

Color Scheme Template - select one of the ready-made templates or choose Custom to adjust colors manually.

With a handy color-picker tool it is possible to configure the colors for:

• Menu Background/Text;
• Submenu Background/Text;
• Menu Item Hover;
• Hamburger Button.

You can also set a custom submenu background image if needed.

Submenu background image sample:

The whole color scheme is configured as below:

A color scheme customization for a hamburger, accordion and drill down menus have some peculiarities, e.g. Submenu Background Color is used for top tabs and Menu Item Hover Color is also used for a top tab with the default welcome message:

Background images are displayed on a desktop hamburger menu, but not on the mobile menu types.

To adjust the display of default menu items, please go to Catalog → Categories and click the category you need.

Expand the Mega Menu tab.

Submenu Width - set the width of the dropdown tab that will fit your website style.

Full Width - submenu will have the same width as the general menu bar.

Auto - the width will be set automatically according to the content options.

Custom - this option allows to set the width manually (in pixels).

Menu Label Text - specify the text of the label to attract customers’ attention to the necessary block of the menu.

Text/Background color - customize label’s style using color picker tool.

Mega Menu Icon - upload or select from the gallery an icon if you want to visualize the menu item. It can be applied to desktop and/or mobile view depending on General Configuration.

Submenu Type - two options are available: With Content or Without Content.

With Content: if you enable this setting, you will be able to configure the menu content for subcategories. In this case, child categories will be displayed anyway, but you can still add any content for the main one.

Without Content: in this case, subcategories content won't be displayed.

Subcategories Position - choose where to display the subcategories - left or top.

How it works:

In the hamburger menu we've enabled the 'With Content' option for the Women category, and it becomes possible to configure the content for subcategories of any level. Also, the 'Subcategories Position' setting is set to Top. In the case below, we've added the product widget to the subcategory of the 2nd level, and the categories of the higher level are displayed at the top of the window.

The example of the hotizontal menu and the Left position:

In this tab, you can adjust submenu content. The extension allows you to add images, videos, CMS blocks, banners, widgets and products. You can arrange elements the way you need using WYSIWYG editor. Also, the extension is fully compatible with the Page Builder for Magento Enterprise.

Page Builder allows creating rich in content pages just in few clicks via the handy drag-and-drop function.

This tool includes various layouts, content and media elements. With the preview mode, you can check the result and make edits if needed. Each element has its own settings so that you can configure it according to your website style and business needs.

Here you can see all available elements:

If Page Builder is not installed, it is possible to customize the menu bar via WYSIWYG editor.

For example, to make columns you need to insert the table and specify the necessary number of columns, rows and adjust additional settings. You may use the {child_categories_content} variable for showing child categories and so on.

Add a special MegaMenu widget to the drop-downs to promote your new, featured or best-selling products right in the menu.

Click Insert Widget in the editor.

Adjust Widget Options according to your business needs.

Widget Type - choose Amasty MegaMenu Products widget type.

Title - specify the title of the block that will be displayed to customers.

Block Layout - select the layout for the block: Grid or Slider.

Number of Visible Items - if Slider layout is chosen, set the number of items that will be shown at once.

Slider Width(px) - adjust the width of the slider to match your Mega Menu configuration.

Slider Autoplay - if Yes, the products will be switched automatically. If No, customers will have to switch manually.

Slider Autoplay Speed(ms) - set the particular switching speed if needed.

Show Product Options & 'Add to Cart' Button - if Yes, the customers will see product options and will be able to add a product to cart right from the drop-down.

Number of Products to Display - specify the general number of products you want to be shown in a grid/slider.

Template - Amasty Products Grid Template is chosen by default.

Conditions - set flexible conditions to show the products you need.

Cache Lifetime (Seconds) - specify the time between the widget updates in seconds. If not set, equals to 86400 seconds (24 hours). To update widget instantly, go to Cache Management and clear Blocks HTML Output cache. The widget will not show products that begin to match the specified conditions until the cache is refreshed.

You can add the widget to any category or custom menu item.

With the Mega Menu extension, you can add custom items to the menu bar. To see all additional items on a separate grid, go to Content → Amasty Mega Menu → Custom Menu Items.

Here you can check the items' Title, URL Key, active Status and Sort Order.

Edit or Delete items in the Action column or perform mass actions via Actions dropdown menu.

To create a new menu item, click Add New Custom Item.

Specify the General Settings and the Content of a new menu tab.

Title - fill in the title that will be displayed in the navigation menu.

URL Key - set the URL to redirect customers after clicking the menu item: Internal URL, External URL or CMS Page.

CMS Page - select the page to direct customers to. If Internal/External URL is specified in the option above, set the particular URL.

Status - enable an item for mobile devices, desktops or for both. Disable an item if needed.

Adjust Submenu Width and Menu Label if needed.

Hit the Save button.

With the extension, you can easily customize the menu items order.

Navigate to Admin Panel → Content → Menu Builder.

Adjust the position of each menu item (both top categories and custom menu items) using handy drag-and-drop functionality.

Enrich your site menu bar with unique content.

Adjust submenu dropdown style according to your website design. Add catchy labels to any item of the menu.

Increase the number of purchases by show reviews in menu with Amasty Advanced Product Reviews for Magento 2.

With a ready-made PWA solution, you can provide shoppers with the outstanding mobile experience. Customers can surf the store with a stylish and responsive menu.

If the add-on is installed, Venia theme will display a Accordion Hamburger menu with icons in a dark color scheme in the following way:

A Drill Down menu in a light color theme looks like this:

How it looks on tablets:

The sample of top menu on the Venia theme:

Find out how to install the Mega Menu for Magento 2 via Composer.

Rate the user guide

from 2 votes (Details)       1 visitor votes 0 visitor votes 0 visitor votes 0 visitor votes 1 visitor votes