Skip to content

vtex-apps/category-menu

Repository files navigation

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

Category Menu

All Contributors

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.

category-menu

Configuration

  1. Add the app to your store theme's dependencies in the manifest.json.
  dependencies: {
    "vtex.category-menu": "2.x"
  }
  1. Add the category-menu block 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

Contributors ✨

Thanks goes to these wonderful people (emoji key):


khrizzcristian

💻

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