📢 Don't fork this project. Use, contribute, or open issues through Store Discussion.

Mega menu

VTEX Mega Menu provides a form to create and manage the custom menu until three levels in the category tree. The stores can use this app as the main navigation menu.

Configuration

Step 1 - Installing the Mega Menu app

Using your terminal, log in to the desired VTEX account and run the following command:

vtex install [email protected]

Step 2 - Define the category tree to be used as a menu in the admin

In the account's admin dashboard, access STORE SETUP > Mega Menu and using the available options configure the category tree according to your needs:

Step 3 - Implementing the app's blocks in your store theme

IMPORTANT: If you have installed this app previously, please validate with your block settings and add the new components to modify the orientation Menu. No change the option to vertical Menu if you haven't yet this configuration in your store.

---

Once the app is configured, it is time to place the following blocks in your Store Theme app.

Import the mega menu app to your dependencies as manifest.json, for example:

"peerDependencies": {
	"vtex.mega-menu": "2.x"
}

mega-menu

This block is responsible for querying the previously built category tree and displaying it in the store.

Prop name	Type	Description	Default value
title	String	Title for the first level elements (departments) used in the mobile version or when the orientation is vertical.	Departments
orientation	String	Type of menu to be built. Possible values are horizontal and vertical	A value is determined depending on the resolution of the device, if it is a mobile (phone and tablet) it is used vertical and for the rest horizontal.
defaultDepartmentActive	String	You can use this property to determine a department that will be shown when first displaying the menu, this is useful if you want to highlight a specific department.	🚫
openOnly	String	Define the orientation of the menu. You can choose between vertical or horizontal.	verticalor horizontal

mega-menu-trigger-btn

This block renders an icon that will be used as a trigger to open the desktop menu or when the orientation is horizontal or vertical.

Note: Currently, this block receives the same props as an VTEX Store Icon.

mega-menu-go-back-btn

This block can go back to the list of items in the first level of the menu (departments) only works when it is a mobile device or the orientation is vertical.

To configure the desktop version:

{
  // ...

  "sticky-layout#4-desktop": {
    "children": ["flex-layout.row#4-desktop", "flex-layout.row#mega-menu"]
  },
  "flex-layout.row#4-desktop": {
    "children": [
      "flex-layout.col#trigger-mega-menu"
      // ...
    ]
  },

  "flex-layout.row#mega-menu": {
    "children": ["mega-menu#desktop"]
  },
  "mega-menu#desktop": {
    "props": {
      "openOnly": "horizontal"
    }
  },
  "flex-layout.col#trigger-mega-menu": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["mega-menu-trigger-btn"]
  },
  "mega-menu-trigger-btn": {
    "props": {
      "Drawer": "drawer"
    }
  }
}

To configure the mobile version:

{
  // ...
  "flex-layout.row#1-mobile": {
    "children": [
      "flex-layout.col#trigger-mega-menu"
      // ...
    ],
    "props": {
      // ...
    }
  },

  "drawer": {
    "children": ["mega-menu#mobile"],
    "blocks": ["drawer-header#my-drawer"]
  },
  "mega-menu#mobile": {
    "props": {
      "defaultDepartmentActive": "...",
      "orientation": "vertical",
      "openOnly": "vertical"
    }
  },
  "drawer-header#my-drawer": {
    "children": ["flex-layout.row#drawer-header"]
  },
  "flex-layout.row#drawer-header": {
    "children": [
      "flex-layout.col#mega-menu-go-back-btn",
      "flex-layout.col#spacer",
      "flex-layout.col#drawer-close-button"
    ],
    "props": {
      "blockClass": "drawer-header",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "flex-layout.col#drawer-close-button": {
    "children": ["drawer-close-button"],
    "props": {
      "verticalAlign": "middle",
      "horizontalAlign": "right"
    }
  },
  "flex-layout.col#mega-menu-go-back-btn": {
    "children": ["mega-menu-go-back-btn"],
    "props": {
      "verticalAlign": "middle",
      "horizontalAlign": "left",
      "paddingLeft": 4
    }
  }
}

Notes

Icons for menu items

In the form of creation and edition of a menu item it is possible to add an icon, currently you can select any of the ICONPACK that comes default with your store, but if you have customized (for more information read the following guide) that file the modifications will not be visible in the select, therefore you must write the id of the icon manually.

Styles for menu items

You can customize an element in a basic way using comma (,) separated CSS properties, for example:

⚠️ It is important not to abuse this functionality, for complex persoanlizations use CSS Handle.

padding-top:5px,
padding-left:20px,
padding-right:20px,
padding-bottom:5px,
font-size:20px,
font-weight:bold,
background-color:yellow,
color:red

Customization

In order to apply CSS customizations on this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handle
goBackContainer
goBackButton
goBackButtonIcon
goBackButtonText
menuContainer
menuContainerNav
menuItem
submenuContainer
styledLink
styledLinkIcon
styledLinkContainer
styledLinkContent
accordionIconContainer
accordionIconContainer—isOpen
accordionIconContainer—isClosed
accordionIcon
submenuContainer
submenuList
submenuListVertical
submenuItem
submenuItem—isOpen
submenuItem—isClosed
submenuItemVertical
collapsibleContent
collapsibleHeaderText
seeAllLinkContainer
seeAllLink
triggerContainer
triggerButtonIcon
triggerButtonIcon—active
triggerButtonIcon—muted
menuContainerVertical
departmentsContainer
menuContainerNavVertical
menuItemVertical
submenuContainerVertical

Upload mega menu data from CSV file

To upload data from a CSV file, You should create an import file with the following structure. The data will then be stored in the VBASE successfully.

The field subMenus is a String with the following structure:

[{ "id":"submenu1383316", "name":"submenu1", "icon":"","slug":"Menu1/submenu1", "styles":"","display":true, "enableSty":true,"order":1, "slugRoot":"submenu1", "slugRelative":"Menu1", "menu":[{ "id":"sub-tercernivel-menu12121", "name":"sub-tercernivel-menu1-3", "icon":"", "slug":"Menu1/submenu1/menu1-3", "styles":"", "display":true, "enableSty":true, "order":1, "slugRoot":"menu1-3", "slugRelative":"Menu1/submenu1"}] }]

The file should have the field like to show below:

You can add the rows quantity that you want. Remember to keep the structure defined previously in all data.

Save the file. You can choose any name for the file. Then go to the admin and select the option “upload data”

To generate backup data, download the information from the button “Download CSV”

This button only is available if the mega menu has data to save. The download file has the same structure defined at the begging of this step.

NEW FUNCTIONALITY: Choose the orientation of the Mega Menu on the Desktop

In this release, Mega Menu App has new functionality that allows you to choose the orientation. You can choose between Horizontal o Vertical.

IMPORTANT: before choosing the vertical option to desktop, configure the blocks in your store. Go to step 3 of this guide to configure the blocks

When you guarantee the configuration of blocks in the store, go to the new button to settings of Mega Menu and change the orientation.

Press the Confirmbutton to save the configuration of orientation menu.