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

VTEX Menu

All Contributors

VTEX Menu is a store component responsible for displaying a bar containing links and drop-down sub-menus.

menu-app

Configuration

  1. Import the menu's app to your dependencies as manifest.json, for example:
  dependencies: {
    "vtex.menu": "2.x"
  }
  1. Add the vtex.menu@2.x:menu block to the store header template.

  2. 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.

Example:

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

Example:

"vtex.menu@2.x:menu#websites": {
    "props": {
      "items": [
        {
          "id": "menu-item-shop",
          "type": "custom",
          "iconId": null,
          "highlight": false,
          "itemProps": {
            "type": "internal",
            "href": "#",
            "noFollow": false,
            "tagTitle": "Shop",
            "text": "Shop"
          }
        },
        {
          "id": "menu-item-about-us",
          "type": "custom",
          "iconId": null,
          "highlight": false,
          "itemProps": {
            "type": "internal",
            "href": "/about-us",
            "noFollow": false,
            "tagTitle": "about-us",
            "text": "About Us"
          }
        }
    ]
    }
}
<div class="alert alert-info"> The Menu block has no prerequisite children. Therefore, any menu block implementation does not need to have any blocks declared within it to properly function. </div>

The available menu-item block props are as follows:

Prop nameTypeDescriptionDefault value
typeStringMenu item type, either category or customcaterogy
idStringmenu item IDN/A
highlightbooleanWhether the item has highlightN/A
iconPositionStringIcon position relative to the menu item text. Either to the left or rightleft
iconPropsIconPropsIcon propsN/A
itemPropsCategoryItem or CustomItemItem propsN/A
  • For icons in the menu items:
Prop nameTypeDescriptionDefault value
idStringIcon IDN/A
isActivebooleanWhether the item is active or nottrue
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

CSS HandleDescriptionComponent Source
containerMenu's main containerindex
linkLeftLink container when link is aligned to the leftindex
linkMiddleLink container when link is center-alignedindex
linkRightLink container when link is aligned to the rightindex
submenuAccordionSub menu accordionSubmenuAccordion
submenuSub menuSubmenu
menuItemMenu itemMenuItem
menuContainerMenu containerMenu
styledLinkLink to StyledLinkStyledLink
styledLinkContainerLink StyledLink containerStyledLink
styledLinkIconLink to StyledLink iconsStyledLink

Contributors

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --><!-- prettier-ignore --><table><tr><td align="center"><a href="http://giovanapereira.com.br/"><img src="https://avatars3.githubusercontent.com/u/26018620?v=4" width="100px;" alt="Giovana Pereira"/><br /><sub><b>Giovana Pereira</b></sub></a><br /><a href="https://github.com/vtex-apps/menu/commits?author=giovanapereira" title="Code">💻</a></td></tr></table><!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the all-contributors specification. Contributions of any kind welcome!