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

VTEX Mega Menu provides an administrative app that allows to manage a custom category tree of up to 3 levels which can be used as the main navigation menu, it is implemented in the store using a set of components.

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

vtex install [email protected]

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

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:

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

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

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

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

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"]
  },
  "flex-layout.col#trigger-mega-menu": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["mega-menu-trigger-btn"]
  }
}

To configure the mobile version:

{
  // ...

  "drawer": {
    "children": ["mega-menu"],
    "blocks": ["drawer-header#my-drawer"]
  },
  "mega-menu": {
    "props": {
      "defaultDepartmentActive": "Tecnología"
    }
  },
  "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
    }
  }
}

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.

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

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.

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.