VTEX Breadcrumb

Description

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

ReleaseStatusInitial ReleaseMaintenance LTS StartEnd-of-lifeDreamstore Compatibility
0.xMaintenance LTS2018-05-292018-11-20March 20191.x
1.xCurrent Release2018-11-202.x

See our LTS policy for more information.

Table of Contents

Usage

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.

1
2
3
  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.

1
2
3
4
5
{
  "breadcrumb": {
    "component": "Breadcrumb"
  }
}

Configuration

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 nameTypeDescription
termStringSearch 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
categoriesArray(String)List of categories which the product belongs to
showOnMobileBooleanif breadcrumbs should be displayed on mobilefalse

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

  • 1
1
categories = ['/Eletronics/', '/Eletronics/Computers']
  • 2
1
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 nameComponentDescription
containerBreadcrumbThe main container of breadcrumb
linkBreadcrumbLink container
arrowBreadcrumbArrow container
termBreadcrumbTerm label

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

1
2
3
  "builders": {
    "styles": "1.x"
  }

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

Troubleshooting

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

Contributing

Check it out how to contribute with this project.

Tests

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

Travis CI

Build Status