https://github.com/vtex-apps/category-menu
VTEX Category Menu app
https://github.com/vtex-apps/category-menu
category-menu hacktoberfest srv-store-framework store-framework vtex-io xp-developer
Last synced: 25 days ago
JSON representation
VTEX Category Menu app
- Host: GitHub
- URL: https://github.com/vtex-apps/category-menu
- Owner: vtex-apps
- Created: 2018-04-09T20:17:34.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T17:33:35.000Z (10 months ago)
- Last Synced: 2025-04-09T18:42:28.540Z (10 months ago)
- Topics: category-menu, hacktoberfest, srv-store-framework, store-framework, vtex-io, xp-developer
- Language: JavaScript
- Homepage:
- Size: 2.38 MB
- Stars: 2
- Watchers: 48
- Forks: 15
- Open Issues: 7
-
Metadata Files:
- Readme: docs/README.md
- Changelog: CHANGELOG.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
📢 Use this project, [contribute](https://github.com/vtex-apps/category-menu) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
# Category Menu
[](#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.
## Configuration
1. Add the app to your store theme's dependencies in the `manifest.json`.
```json
dependencies: {
"vtex.category-menu": "2.x"
}
```
2. Add the `category-menu` block to your store theme.
```json
{
"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](https://vtex.io/docs/recipes/style/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](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
