Skip to content
VTEX Category Menu app
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add PR and Issue Template Apr 11, 2018
react tsconfig.json again May 15, 2019
.gitignore remove .eslintrc from .gitignore May 15, 2019
.prettierrc add eslint May 14, 2019
.travis.yml Change from npm to yarn in travis Apr 25, 2018
.vtexignore Update May 3, 2019 add lint to package.json May 15, 2019

VTEX Category Menu


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

Release Status Initial Release Maintenance LTS Start End-of-life Store Compatibility
[2.x] Current Release 2018-11-20 2.x
[1.x] Maintenance LTS 2018-08-24 2018-11-20 March 2019 1.x

See our LTS policy for more information.

Table of Contents


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"


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 name Type Description Default Value
showPromotionCategory Boolean Shows the promotion category in menu false
showGiftCategory Boolean Shows the gift category in menu false
showAllDepartments Boolean Shows all departments category in menu true
menuDisposition Enum Indicates the disposition of the menu on the screen. Possible values: left, center, right center
showSubcategories Boolean Decides if the subcategories will be displayed true
departments Array(items) List of departments items to be displayed on the menu []


Prop name Type Description
id Number The 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 name Description Component Source
container The main container of Category Menu for all sizes index
mobile The main container of Category Menu for mobile size index
animation Category menu mobile sidebar animation SideBar
sidebarOpen Active when the sidebar is opened SideBar
sidebarScrim the sidebar shadow backdrop content SideBar
sidebar The main container of sidebar SideBar
sidebarHeader The sidebar header container SideBar
sidebarContent The sidebar content container SideBar
firstLevelLink First level of the Category Menu, the main categories links ItemContainer
secondLevelLink Second level of the Category Menu, the subcategories links ItemContainer
itemContainer Main container of a category item/department CategoryItem
sidebarItem The container of a sidebar category item/department SideBarItem


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


Check it out how to contribute with this project.


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

You can’t perform that action at this time.