Control de breadcrumb

Layout

Breadbrumbs mejoran la experiencia de navegación en la tienda por llevar a los usuarios a explorar su jerarquía de páginas.

En VTEX, el control <vtex.cmc:breadCrumb/> es responsable de renderizar breadcrumbs como el del ejemplo abajo.

${"base64":" ","img":{"width":362,"height":54,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1613,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/control-de-breadcrumb_1.png"}}$

Si, como en este ejemplo, el usuario accede directamente a la página de un producto de la categoría Camisetas, el breadcrumb exhibido en la página del producto le dará la información de que el usuario se encuentra en esa categoría (Camisetas), que a su vez está por debajo del departamento Moda masculina.

Este control sólo funciona en los siguientes tipos de página:

Producto
Departamento
Categoría
Búsqueda

A continuación se muestra un ejemplo del código HTML renderizado por el control de breadcrumb:


<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>

El código anterior renderiza el siguiente breadcrumb en el sitio:

${"base64":" ","img":{"width":180,"height":47,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":676,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/control-de-breadcrumb_2.png"}}$