Category Menu

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-menu block 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`