Configure menu item

Configure Menu

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

A menu item have 8 tabs:

• General Information

• Dropdown

• Header

• Left Block

• Main Content

• Right Block

• Bottom Block

• Design

Before configuring all item settings, we need to check a structure of each menu item

Sub menu design layout

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 short code: {{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 a icon for this item, then update icon position

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

Dropdown items enable Group option

• Disable Dimesions: 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: 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 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

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