Controle de breadcrumb

Layout

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://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/controle-de-breadcrumb_1.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://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/controle-de-breadcrumb_2.png"}}$