https://github.com/vtex-apps/breadcrumb
Breadcrumb App
https://github.com/vtex-apps/breadcrumb
hacktoberfest srv-store-framework store-framework vtex-io xp-developer
Last synced: 23 days ago
JSON representation
Breadcrumb App
- Host: GitHub
- URL: https://github.com/vtex-apps/breadcrumb
- Owner: vtex-apps
- Created: 2016-11-23T19:03:10.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T20:38:17.000Z (10 months ago)
- Last Synced: 2026-01-18T15:01:20.048Z (25 days ago)
- Topics: hacktoberfest, srv-store-framework, store-framework, vtex-io, xp-developer
- Language: TypeScript
- Size: 462 KB
- Stars: 0
- Watchers: 45
- Forks: 11
- Open Issues: 3
-
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/breadcrumb) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
[](#contributors-)
# Breadcrumb
The VTEX BreadCrumb is a navigation scheme that shows a user's browsing history up to their current location in your store.
## Configuration
1. Import the breadcrumb's app to your theme's dependencies in the `manifest.json`, for example:
```json
dependencies: {
"vtex.breadcrumb": "1.x"
}
```
2. Add the `breadcrumb` block to the Product template. For example:
```
"breadcrumb": {
"props": {
"showOnMobile": true
}
},
```
| Prop name | Type | Description | Default value |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `showOnMobile` | `Boolean` | It determines whether Breadcrumb should also be displayed on mobile | `false` |
| `homeIconSize` | `Number` | Controls the `size` property of [`IconHome`](https://github.com/vtex-apps/store-icons#icons) | `26` |
| `caretIconSize` | `Number` | Controls the `size` property of [`IconCaret`](https://github.com/vtex-apps/store-icons#icons) | `8` |
:warning: The product's categories should appear as an array in one of this two formats:
```javascript
categories = ['/Eletronics/', '/Eletronics/Computers']
```
```javascript
categories = ['eletronics', 'eletronics-computers']
```
3. Add the `breadcrumb.search` block to the Search template. For example:
```
"breadcrumb.search": {
"props": {
"showOnMobile": true
}
},
```
| Prop name | Type | Description | Default value |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `showOnMobile` | `Boolean` | It determines whether Breadcrumb should also be displayed on mobile | `false` |
| `homeIconSize` | `Number` | Controls the `size` property of [`IconHome`](https://github.com/vtex-apps/store-icons#icons) | `26` |
| `caretIconSize` | `Number` | Controls the `size` property of [`IconCaret`](https://github.com/vtex-apps/store-icons#icons) | `8` |
> ℹ️ *The `breadcrumb.search` block is specific for the Breadcrumb inside the search result page.*
## 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](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).
| CSS Handles |
| ----------- |
| `container` |
| `link` |
| `arrow` |
| `homeLink` |
| `termArrow` |
## Contributors ✨
Thanks goes to these wonderful people:
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!