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 | 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.
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": []
}
}
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 |
[] |
Items:
Prop name | Type | Description |
---|---|---|
id |
Number |
The department Id to be displayed on the menu |
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.
- Add the
styles
builder to yourmanifest.json
:
"builders": {
"styles": "1.x"
}
- Create a file called
vtex.category-menu.css
inside thestyles/css
folder. Add your custom styles:
.container {
margin-top: 10px;
}
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.
To execute our tests go to react/ folder and run yarn test