Breadcrumb
The VTEX BreadCrumb is a navigation scheme that shows a user's browsing history up to their current location in your store.
Configuration
- Import the breadcrumb's app to your theme's dependencies in the
manifest.json
, for example:
dependencies: {
"vtex.breadcrumb": "1.x"
}
- Add the
breadcrumb
block to the Product template. For example:
"breadcrumb": {
"props": {
"showOnMobile": true
}
},
The product's categories should appear as an array in one of this two formats:
categories = ['/Eletronics/', '/Eletronics/Computers']
categories = ['eletronics', 'eletronics-computers']
- Add the
breadcrumb.search
block to the Search template. For example:
"breadcrumb.search": {
"props": {
"showOnMobile": true
}
},
️ 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.
CSS Handles |
---|
container |
link |
arrow |
homeLink |
termArrow |
Contributors ✨
Thanks goes to these wonderful people:
This project follows the all-contributors specification. Contributions of any kind welcome!
Updated 11 months ago
Did this page help you?