Controle de breadcrumb

Breadbrumbs melhoram a experiência de navegação na loja por incentivarem os usuários a explorarem sua hierarquia de páginas.

Na VTEX, o controle <vtex.cmc:breadCrumb/> é responsável por renderizar breadcrumbs como o do exemplo abaixo.

{"base64":" ","img":{"width":362,"height":54,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1613,"url":"https://images.ctfassets.net/alneenqid6w5/4UnYdunXh6MI28k8sS0w8Y/9883ba3a0d5f9f5826313832f9c5a2d0/breadcrumb1.png"}}

Se, como neste exemplo, o usuário acessar diretamente a página de um produto da categoria Camisetas, o breadcrumb exibido na página do produto lhe dará a informação de que o usuário se encontra nessa categoria (Camisetas), que por sua vez está abaixo do departamento Moda masculina.

Esse controle funciona apenas nos seguintes tipos de página:

Produto
Departamento
Categoria
Busca

Veja abaixo um exemplo de código HTML renderizado pelo controle 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>

O código acima renderiza o seguinte breadcrumb no site:

{"base64":" ","img":{"width":180,"height":47,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":676,"url":"https://images.ctfassets.net/alneenqid6w5/1PxrLYlhNaaUYYoi6oOCe6/06d276039e7e73a39fa15061befffd38/breadcrumb2.png"}}