Breadcrumb control
Breadbrumbs improve the in-store browsing experience by encouraging users to explore their page hierarchy.
In VTEX, the <vtex.cmc:breadCrumb/> control is responsible for rendering breadcrumbs like the one below.
If, as in this example, the user directly accesses the page of a product of the category Camisetas, the breadcrumb displayed on the product page will give you the information that the user is in this category (Camisetas), which is below the department Moda masculina.
This control works only on the following page types:
- Product
- Department
- Category
- Search
Here is an example of the HTML code rendered by the breadcrumb control:
<div id="box-bread-brumb" class="hidden-xs"><div class="bread-crumb" xmlns:v="http://rdf.data-vocabulary.org/#"><ul><li typeof="v:Breadcrumb"><a href="http://lojadobreno.vtexcommercestable.com.br/" rel="v:url" property="v:title">lojadobreno</a></li><li class="last" typeof="v:Breadcrumb"><a href="http://lojadobreno.vtexcommercestable.com.br/livros" rel="v:url" property="v:title">Livros</a></li></ul></div></div>
The code above renders the following breadcrumb in the site:
