VTEX Menu by vtex

This page is about version 2.24.1 of the app, which is not the most recent version. The latest stable version is 2.35.2.

${"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 Menu is a store component responsible for displaying a bar containing links and drop-down sub-menus.

{"base64":" ","img":{"width":2876,"height":1636,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1421988,"url":"https://user-images.githubusercontent.com/52087100/68619014-5af1c680-04a9-11ea-9cdc-23468bd55c23.png"}}

Configuration

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


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

Add the vtex.menu@2.x:menu block to the store header template.
To build the store's menu options, you need to configure the menu-item blocks. These can be declared in two different ways in vtex.menu@2.x:menu: as children or as props. The advantage of this latest menu-item configuration compared is that Site Editor can be used to edit the blocks.

`menu-item` as children

Example:


_28"vtex.menu@2.x:menu#websites": {
_28  "children": [
_28    "menu-item#shop",
_28    "menu-item#about-us"
_28  ]
_28},
_28"menu-item#shop": {
_28  "props": {
_28    "id": "menu-item-shop",
_28    "type": "custom",
_28    "highlight": false,
_28    "itemProps": {
_28      "type": "internal",
_28      "href": "#",
_28      "noFollow": false,
_28      "tagTitle": "Shop",
_28      "text": "Shop"
_28    },
_28    "iconProps": {
_28      "id": "bnd-logo",
_28      "size": 16,
_28      "viewBox": "0 0 16 16",
_28      "activeClassName": "rebel-pink",
_28      "mutedClassName": "c-action-primary"
_28    },
_28    "iconToTheRight": true
_28  }
_28}

`menu-item` as props

Example:


_32"vtex.menu@2.x:menu#websites": {
_32  "props": {
_32    "items": [
_32      {
_32        "id": "menu-item-shop",
_32        "type": "custom",
_32        "iconId": null,
_32        "highlight": false,
_32        "itemProps": {
_32          "type": "internal",
_32          "href": "#",
_32          "noFollow": false,
_32          "tagTitle": "Shop",
_32          "text": "Shop"
_32        }
_32      },
_32      {
_32        "id": "menu-item-about-us",
_32        "type": "custom",
_32        "iconId": null,
_32        "highlight": false,
_32        "itemProps": {
_32          "type": "internal",
_32          "href": "/about-us",
_32          "noFollow": false,
_32          "tagTitle": "about-us",
_32          "text": "About Us"
_32        }
_32      }
_32    ]
_32  }
_32}

You can define a submenu for a menu-item:


_24"menu-item#shop": {
_24  "props": {
_24    "type": "custom",
_24    "highlight": false,
_24    "itemProps": {
_24      "type": "internal",
_24      "href": "#",
_24      "noFollow": false,
_24      "tagTitle": "Shop",
_24      "text": "Shop"
_24    },
_24  },
_24  "blocks": ["vtex.menu@2.x:submenu#shop"] // Defining a submenu
_24},
_24"vtex.menu@2.x:submenu#shop": {
_24  "children": [
_24    "vtex.menu@2.x:menu#submenushop"
_24  ]
_24},
_24"vtex.menu@2.x:menu#submenushop": {
_24  "children": [
_24    "menu-item#shop"
_24  ]
_24}

The available menu-item block props are as follows:

Prop name	Type	Description	Default value
`type`	`String`	Menu item type, either `category` or `custom`	`category`
`id`	`String`	menu item ID	N/A
`highlight`	`boolean`	Whether the item has highlight	N/A
`iconPosition`	`String`	Icon position relative to the menu item text. Either to the `left` or `right`	`left`
`iconProps`	`IconProps`	Icon props	N/A
`itemProps`	`CategoryItem` or `CustomItem`	Item props	N/A

For icons in the menu items:

Prop name	Type	Description	Default value
`id`	`String`	Icon ID	N/A
`isActive`	`boolean`	Whether the item is active or not	`true`
`size`	`number`	Icon size	16
`viewBox`	`String`	Icon view box	`0 0 16 16`
`activeClassName`	`String`	Icon classname when `isActive` is true	N/A
`mutedClassName`	`String`	Icon classname when `isActive` is false	N/A

For category related menu items:

Prop name	Type	Description	Default value
`categoryId`	`number`	Item category ID	N/A
`text`	`String`	Menu item text	N/A

For customized items:

Prop name	Type	Description	Default value
`type`	`String`	Menu item type, either `internal` or `external`	`internal`
`href`	`String`	Link to where the menu item leads	N/A
`noFollow`	`boolean`	No follow attribute	N/A
`tagTitle`	`String`	Menu item tag	N/A
`text`	`String`	Menu item text	N/A

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
`accordionIcon`
`accordionIcon--isOpen`
`accordionIcon--isClosed`
`container`
`linkLeft`
`linkMiddle`
`linkRight`
`menuContainer`
`menuContainerNav`
`menuItem`
`menuItemInnerDiv`
`menuLinkDivLeft`
`menuLinkDivMiddle`
`menuLinkDivRight`
`menuLinkNav`
`renderLink`
`styledLink`
`styledLinkContainer`
`styledLinkContent`
`styledLinkIcon`
`submenu`
`submenuWrapper`
`submenuAccordion`
`submenuContainer`

Configuration

menu-item as children

menu-item as props

Customization

`menu-item` as children

`menu-item` as props