README.md

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

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

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

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

2. Add the category-menu block into your theme.

{
  "category-menu": {
    "props": {
      "showAllDepartments": true,
      "showSubcategories": true,
      "menuDisposition": "center",
      "departments": [],
      "sortSubcategories": "name"
    }
  }
}

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

khrizzcristian 💻

This project follows the all-contributors specification. Contributions of any kind are welcome!