VTEX Category Menu

Description

The VTEX Category Menu app is a store component that shows a department list of the store on an customizable menu, 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-202.x
1.xMaintenance LTS2018-08-242018-11-20March 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 category-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.

  dependencies: {
    "vtex.category-menu": "2.x"
  }

Then, add category-menu block into your app theme, like we do in our Store theme app.

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

"category-menu": {
    "props": {
      "showPromotionCategory": true,
      "showGiftCategory": true,
      "showAllDepartments": true,
      "showSubcategories": true,
      "menuDisposition": "center",
      "departments": []
    }
  }

Blocks API

This app has an interface that describes what rules must be implemented by a block when you want to use the category-menu block.

  "category-menu": {
    "component": "index"
  }
}

Configuration

Through the Storefront you can change the behavior and interface of CategoryMenu. But, you can also make adjusts in your theme app, like Store does.

Prop nameTypeDescriptionDefault Value
showPromotionCategoryBooleanShows the promotion category in menufalse
showGiftCategoryBooleanShows the gift category in menufalse
showAllDepartmentsBooleanShows all departments category in menutrue
menuDispositionEnumIndicates the disposition of the menu on the screen. Possible values: left, center, rightcenter
showSubcategoriesBooleanDecides if the subcategories will be displayedtrue
departmentsArray(items)List of departments items to be displayed on the menu[]

Items:

Prop nameTypeDescription
idNumberThe department Id to be displayed on the menu

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:
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.category-menu.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;
}

CSS namespaces

Below, we describe the namespaces that are define in the CategoryMenu.

Class nameDescriptionComponent Source
containerThe main container of Category Menu for all sizesindex
mobileThe main container of Category Menu for mobile sizeindex
animationCategory menu mobile sidebar animationSideBar
sidebarOpenActive when the sidebar is openedSideBar
sidebarScrimthe sidebar shadow backdrop contentSideBar
sidebarThe main container of sidebarSideBar
sidebarHeaderThe sidebar header containerSideBar
sidebarContentThe sidebar content containerSideBar
firstLevelLinkFirst level of the Category Menu, the main categories linksItemContainer
secondLevelLinkSecond level of the Category Menu, the subcategories linksItemContainer
itemContainerMain container of a category item/departmentCategoryItem
sidebarItemThe container of a sidebar category item/departmentSideBarItem

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