Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Breadcrumb
Official extension
Version: 1.9.4
Latest version: 1.9.4

The VTEX BreadCrumb is a navigation scheme that shows a user's browsing history up to their current location in your store.

{"base64":"  ","img":{"width":2852,"height":1454,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":666089,"url":"https://user-images.githubusercontent.com/52087100/69836587-a4237380-1228-11ea-89c8-0f34cea3a96f.png"}}

Configuration

  1. Import the breadcrumb's app to your theme's dependencies in the manifest.json, for example:

_10
dependencies: {
_10
"vtex.breadcrumb": "1.x"
_10
}

  1. Add the breadcrumb block to the Product template. For example:

_10
"breadcrumb": {
_10
"props": {
_10
"showOnMobile": true
_10
}
_10
},

Prop nameTypeDescriptionDefault value
showOnMobileBooleanIt determines whether Breadcrumb should also be displayed on mobilefalse
homeIconSizeNumberControls the size property of IconHome26
caretIconSizeNumberControls the size property of IconCaret8

:warning: The product's categories should appear as an array in one of this two formats:


_10
categories = ['/Eletronics/', '/Eletronics/Computers']


_10
categories = ['eletronics', 'eletronics-computers']

  1. Add the breadcrumb.search block to the Search template. For example:

_10
"breadcrumb.search": {
_10
"props": {
_10
"showOnMobile": true
_10
}
_10
},

Prop nameTypeDescriptionDefault value
showOnMobileBooleanIt determines whether Breadcrumb should also be displayed on mobilefalse
homeIconSizeNumberControls the size property of IconHome26
caretIconSizeNumberControls the size property of IconCaret8

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
See also
VTEX App Store
VTEX IO Apps