VTEX Menu

All Contributors

Description

The VTEX Menu app is store component that shows a bar with links and drop-down menus, and this app is used by store theme.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Release schedule

ReleaseStatusInitial ReleaseMaintenance LTS StartEnd-of-lifeStore Compatibility
2.xCurrent Release2018-11-272.x
1.xMaintenance LTS2018-08-172018-11-27March 20191.x

See our LTS policy for more information.

Table of Contents

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

We add the menu as a block in our Store Header.

To configure or customize this app, you need to import it in your dependencies in manifest.json.

1
2
3
  dependencies: {
    "vtex.menu": "2.x"
  }

Then, add vtex.menu@2.x:menu block into your app theme as we do in our Store theme app. Since the menu block is composed by a list of menu-item you should also add them to the app theme.

Now, you can change the behavior of the menu block that is in the store. See an example of how to configure:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
"vtex.menu@2.x:menu#websites": {
  "children": [
    "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
  }
}

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within menu and describes if they are required or optional.

1
2
3
"menu-link": {
	"component": "index"
}

The menu has no required or allowed block. So, any menu block implementation do not need any block inside of menu.

Configuration

Through the Storefront, you can change the menu's behavior and interface. However, you also can make in your theme app, as Store theme does. The menu have menu-item as children. The props of the menu-item are as it follows:

Prop nameTypeDescriptionDefault value
typeStringthe type of the menu item. Can be category or customcaterogy
idStringthe ID of the menu itemN/A
highlightbooleanif the item should have highlightN/A
iconPositionStringthe icon position relative to the menu item text. Can be left or rightleft
iconPropsIconPropsprops of the iconN/A
itemPropsCategoryItem or CustomItemprops of the itemN/A

IconProps:

Prop nameTypeDescriptionDefault value
idStringthe id of the iconN/A
isActivebooleanif the item is activetrue
sizenumberthe icon size16
viewBoxStringthe viewbox of the icon0 0 16 16
activeClassNameStringthe classname of the icon when isActive is trueN/A
mutedClassNameStringthe classname of the icon when isActive is falseN/A

CategoryItem:

Prop nameTypeDescriptionDefault value
categoryIdnumberthe id of the category of the itemN/A
textStringthe text of the menu itemN/A

CustomItem:

Prop nameTypeDescriptionDefault value
typeStringthe type of the menu item. Can be internal or externalinternal
hrefStringthe link where the menu item will lead toN/A
noFollowbooleanno follow attributeN/A
tagTitleStringtag of the menu itemN/A
textStringtext of the menu itemN/A

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
1
2
3
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.menu.css inside the styles/css folder. Add your custom styles:
1
2
3
.container {
  margin-top: 10px;
}

CSS namespaces

Below, we describe the namespaces that are defined in the menu.

Token nameDescriptionComponent Source
containerThe main container of menuindex
linkLeftLink container when the link is to be left alignedindex
linkMiddleLink container when the link is to be center alignedindex
linkRightLink container when the link is to be right alignedindex
submenuAccordionThe sub menu accordionSubmenuAccordion
submenuThe sub menuSubmenu
menuItemThe menu itemMenuItem
menuContainerThe menu containerMenu
styledLinkLink to the StyledLinkStyledLink
styledLinkContainerLink container of the StyledLinkStyledLink
styledLinkIconLink to the icons in the StyledLinkStyledLink

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Contributing

Check it out how to contribute with this project.

Tests

To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status

Contributors

Thanks goes to these wonderful people (emoji key):

Giovana Pereira
Giovana Pereira

💻

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