Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Advanced components
Category Menu
Official extension
Version: 2.18.0
Latest version: 2.18.0

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square"}}

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

  1. Add the app to your theme's dependencies on the manifest.json, for example:

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

  1. 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 nameTypeDescriptionDefault Value
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[]
mobileModeBooleanUse this as true to render the category menu in a sidebarfalse
sortSubcategoriesEnumDetermine how subcategories are sorted. Possible values name

Items:

Prop nameTypeDescription
idNumberThe 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
See also
VTEX App Store
VTEX IO Apps