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.
Configuration
- Add the app to your theme's dependencies on the
manifest.json, for example:
_10 dependencies: {_10 "vtex.category-menu": "2.x"_10 }
- Add the
category-menublock into your theme.
_11{_11 "category-menu": {_11 "props": {_11 "showAllDepartments": true,_11 "showSubcategories": true,_11 "menuDisposition": "center",_11 "departments": [],_11 "sortSubcategories": "name"_11 }_11 }_11}
| Prop name | Type | Description | Default Value |
|---|---|---|---|
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 | [] |
mobileMode | Boolean | Use this as true to render the category menu in a sidebar | false |
sortSubcategories | Enum | Determine how subcategories are sorted. Possible values name |
Items:
| Prop name | Type | Description |
|---|---|---|
id | Number | The department Id to be displayed on the menu |
Customization
In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.
| CSS Handles |
|---|
container |
departmentLink |
departmentList |
firstLevelLink |
firstLevelLinkContainer |
firstLevelList |
itemContainer |
itemContainer--category |
itemContainer--department |
menuContainer |
secondLevelLink |
secondLevelLinkContainer |
secondLevelList |
section--category |
section--department |
sidebar |
sidebarContainer |
sidebarContent |
sidebarHeader |
sidebarItem |
sidebarItemContainer |
sidebarOpen |
sidebarScrim |
submenuItem |
submenuList |