Skip to content

Latest commit

 

History

History
89 lines (66 loc) · 4.25 KB

README.md

File metadata and controls

89 lines (66 loc) · 4.25 KB
Raw

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

All Contributors

Breadcrumb

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

img2-breadcrumb

Configuration

  1. Import the breadcrumb's app to your theme's dependencies in the manifest.json, for example:
  dependencies: {
    "vtex.breadcrumb": "1.x"
  }
  1. 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 26
caretIconSize Number Controls the size property of IconCaret 8

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

categories = ['/Eletronics/', '/Eletronics/Computers']
categories = ['eletronics', 'eletronics-computers']
  1. 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 26
caretIconSize Number Controls the size property of IconCaret 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.

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!