Skip to content
Breadcrumb App
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add the Breadcrumbs component (#1) May 24, 2018
store Remove inheritComponent from blocks Jan 29, 2019
.gitignore Add the Breadcrumbs component (#1) May 24, 2018
.vtexignore Release v1.4.1 May 20, 2019 Update May 3, 2019

VTEX Breadcrumb


The VTEX BreadCrumb is a secondary navigation scheme that reveals the user location on the store and it is used by the Dreamstore product.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Release schedule

Release Status Initial Release Maintenance LTS Start End-of-life Dreamstore Compatibility
[0.x] Maintenance LTS 2018-05-29 2018-11-20 March 2019 1.x
[1.x] Current Release 2018-11-20 2.x

See our LTS policy for more information.

Table of Contents


This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app, you need to add it in your dependencies in the manifest.json file.

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

Then, add the breadcrumb block into our app theme, as we do in our Product Details app.

Blocks API

This app has an interface that describes what rules must be implemented by a block when you want to use the breadcrumb app.

  "breadcrumb": {
    "component": "Breadcrumb"


Through the Storefront, you can change the behavior and interface of the breadcrumb. However, you also can make in your theme app, as Dreamstore does.

Prop name Type Description
term String Search term that is used to get to that specific page on the website or product slug that is the unique identification stored on the database
categories Array(String) List of categories which the product belongs to

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

  • 1
categories = ['/Eletronics/', '/Eletronics/Computers']
  • 2
categories = ['eletronics', 'eletronics-computers']

Styles API

This app has CSS customization through CSS Modules. CSS Modules is a CSS file in which all class names and animation names are scoped locally by default. You can read more about CSS Modules here .

We use it css-loader to generate a CSS token on a HTML element. For example, the builder generate a CSS token based on app vendor, name and major version. Like container token declared in breadcrumb, generate the classname vtex.breadcrumb-1-x-container.

Below, we describe the tokens, their explanation and the component where it is located.

Token name Component Description
container Breadcrumb The main container of breadcrumb
link Breadcrumb Link container
arrow Breadcrumb Arrow container
term Breadcrumb Term label

To override the default CSS, you need to import styles on your manifest:

  "builders": {
    "styles": "1.x"

Also, create a vtex.breadcrumb.css file in styles/css for your handlers customization.


You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.


Check it out how to contribute with this project.


To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status

You can’t perform that action at this time.