The Category Menu is a store component that displays a list of departments in a configurable menu layout. It helps organize and present categories and subcategories to improve navigation.
An error occurred while trying to load the image. https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/vtex-menu-0.png
Configuration
- Add the app to your store theme's dependencies in the
manifest.json.
dependencies: {
"vtex.category-menu": "2.x"
}
- Add the
category-menublock to your store theme.
{
"category-menu": {
"props": {
"showAllDepartments": true,
"showSubcategories": true,
"menuDisposition": "center",
"departments": [],
"sortSubcategories": "name"
}
}
}
category-menu props
| Prop name | Type | Description | Default Value |
|---|---|---|---|
showAllDepartments | Boolean | Shows all department categories in the menu | true |
menuDisposition | Enum | Indicates the menu's position on the screen. Possible values: left, center, right | center |
showSubcategories | Boolean | Defines if the subcategories will be displayed | true |
departments | Array(items) | List of department items to be displayed on the menu | [] |
mobileMode | Boolean | Renders the category menu in a sidebar if set to true | false |
sortSubcategories | Enum | Determines how subcategories are sorted. Possible value: name |
category-menu 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 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 |