Menu
Feedback
Comece aqui
Tutoriais
Portal do desenvolvedor

Problemas conhecidos
Diretivas de suporte
Troubleshooting

Perguntas frequentes
Comunicados
Tutoriais
Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Storefront
Layout
Controle de breadcrumb
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://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"}}

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback