Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Menu
Official extension
Version: 2.35.2
Latest version: 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 that displays a bar containing links and dropdown submenus.

{"base64":"  ","img":{"width":2876,"height":1636,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1421988,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-menu-0.png"}}

Configuration

  1. Import the menu app to your dependencies as manifest.json. For example:

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

  1. Add the vtex.menu@2.x:menu block to the store header template.

  2. Configure the menu-item blocks to build the store menu options. These can be declared in two ways in vtex.menu@2.x:menu: as children or as props. The advantage of the second type of menu-item configuration is that Site Editor can be used to edit the blocks.

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
}

Example:


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

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 Menu block has no prerequisite children. Therefore, Menu block implementations do not need to have any blocks declared within them to function properly.

The available menu-item block props are as follows:

Prop nameTypeDescriptionDefault value
typestringMenu item type, either category or customcategory
idstringMenu item IDundefined
highlightbooleanWhether the item has a highlightundefined
iconPositionstringIcon position relative to the menu item text. Either to the left or right.left
iconPropsIconPropsIcon propsundefined
onMountBehaviorenumWhether the submenu should always be automatically displayed when its parent is hovered/clicked on (open) or (close).closed
itemPropsCategoryItem or CustomItemItem propsundefined
classesCustomCSSClassesUsed to override default CSS handles. To better understand how this prop works, we recommend reading about it here. Please note that this is only useful when importing this block as a React component.undefined
  • For icons in the menu items:
Prop nameTypeDescriptionDefault value
idstringIcon IDN/A
isActivebooleanWhether or not the item is activetrue
sizenumberIcon size16
viewBoxstringIcon view box0 0 16 16
activeClassNamestringIcon classname when isActive is trueN/A
mutedClassNamestringIcon classname when isActive is falseN/A
  • For category-related menu items:
Prop nameTypeDescriptionDefault value
categoryIdnumberItem category IDN/A
textstringMenu item textN/A
  • For customized items:
Prop nameTypeDescriptionDefault value
typestringMenu item type, either internal or externalinternal
hrefstringLink to where the menu item leadsN/A
noFollowbooleanNo follow attributeN/A
tagTitlestringMenu item tagN/A
textstringMenu item textN/A

Customization

To apply CSS customizations to this and other blocks, please follow the instructions in Using CSS Handles for store customization.

CSS Handle
accordionIcon--isClosed
accordionIcon--isOpen
accordionIcon
container
linkLeft
linkMiddle
linkRight
menuContainerNav
menuContainer
menuItemInnerDiv
menuItem
menuItem--isOpen
menuItem--isClosed
menuLinkDivLeft
menuLinkDivMiddle
menuLinkDivRight
menuLinkNav
renderLink
styledLinkContainer
styledLinkContent
styledLinkIcon
styledLink
submenuAccordion
submenuColumn
submenuContainer
submenuWrapper--isClosed
submenuWrapper--isOpen
submenuWrapper
submenu
See also
VTEX App Store
VTEX IO Apps