The specified version of the app (2.x.0) does not exist. This page is about the latest stable version, which is 2.9.1.

Mega menu

${"base64":" ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square"}}$

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.

{"base64":" ","img":{"width":1766,"height":1297,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":487241,"url":"https://user-images.githubusercontent.com/12108601/121273428-e140db00-c88d-11eb-850c-02399b803d18.png"}}

Configuration

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

vtex install vtex.mega-menu@2.x

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

{"base64":" ","img":{"width":1361,"height":614,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":51405,"url":"https://user-images.githubusercontent.com/8409481/185652487-8ca70f56-59f8-440c-b173-ad65a1763686.png"}}

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:


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

`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.	`vertical`or `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:


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

To configure the mobile version:


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

Notes

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.

{"base64":" ","img":{"width":1299,"height":408,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":31780,"url":"https://user-images.githubusercontent.com/12108601/122150424-5595f400-ce23-11eb-9f1e-c52c668c35f4.png"}}

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.


_10padding-top:5px,
_10padding-left:20px,
_10padding-right:20px,
_10padding-bottom:5px,
_10font-size:20px,
_10font-weight:bold,
_10background-color:yellow,
_10color:red

{"base64":" ","img":{"width":1265,"height":514,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":66144,"url":"https://user-images.githubusercontent.com/12108601/122150523-8118de80-ce23-11eb-80af-182be8348db5.png"}}

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`

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.

{"base64":" ","img":{"width":922,"height":87,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":18760,"url":"https://user-images.githubusercontent.com/8409481/152260407-8f5220d3-9522-41a9-b974-08915240985e.png"}}

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:

{"base64":" ","img":{"width":1349,"height":351,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":83724,"url":"https://user-images.githubusercontent.com/8409481/152260595-0ba50600-52f3-42db-b754-85b794c4e567.png"}}

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

{"base64":" ","img":{"width":1355,"height":448,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":110718,"url":"https://user-images.githubusercontent.com/8409481/152260652-732fbeda-1d61-49ce-afa1-6a19b8d9b05c.png"}}

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

{"base64":" ","img":{"width":1289,"height":649,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":78015,"url":"https://user-images.githubusercontent.com/8409481/152260742-6ee24d1f-48ae-4383-ab02-b3d921a283e4.png"}}

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

{"base64":" ","img":{"width":1288,"height":649,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":89035,"url":"https://user-images.githubusercontent.com/8409481/152260800-7ecc499a-ba39-4168-8dcd-c0b225f610db.png"}}

{"base64":" ","img":{"width":1288,"height":650,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":91712,"url":"https://user-images.githubusercontent.com/8409481/152260876-07321655-a4ca-43eb-9c92-974ff8f9b12b.png"}}

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.

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.

{"base64":" ","img":{"width":1161,"height":611,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":25319,"url":"https://user-images.githubusercontent.com/8409481/185653890-f6c423bd-8d32-404e-a416-141820f73112.png"}}

{"base64":" ","img":{"width":884,"height":368,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19337,"url":"https://user-images.githubusercontent.com/8409481/185654543-a245860e-d661-4011-a89a-7b3db33b3cd3.png"}}

Press the Confirmbutton to save the configuration of orientation menu.

Mega menu

Configuration

Step 1 - Installing the Mega Menu app

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

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

`mega-menu`

`mega-menu-trigger-btn`

`mega-menu-go-back-btn`

Notes

Icons for menu items

Styles for menu items

Customization

Upload mega menu data from CSV file

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