{"section":"tutorials","requestedLocale":"pt","requestedSlug":"controle-de-breadcrumb","locale":"pt","slug":"controle-de-breadcrumb","path":"docs/pt/tutorials/storefront/layout/controle-de-breadcrumb.md","branch":"main","content":"Breadbrumbs melhoram a experiência de navegação na loja por incentivarem os usuários a explorarem sua hierarquia de páginas.\n\nNa VTEX, o controle `<vtex.cmc:breadCrumb/>` é responsável por renderizar breadcrumbs como o do exemplo abaixo.\n\n![breadcrumb1](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/controle-de-breadcrumb_1.png)\n\nSe, 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*.\n\nEsse controle funciona apenas nos seguintes tipos de página:\n- Produto\n- Departamento\n- Categoria\n- Busca\n\nVeja abaixo um exemplo de código HTML renderizado pelo controle de breadcrumb:\n\n```\n<div id=\"box-bread-brumb\" class=\"hidden-xs\">\n  <div class=\"bread-crumb\" xmlns:v=\"http://rdf.data-vocabulary.org/#\">\n    <ul>\n      <li typeof=\"v:Breadcrumb\">[lojadobreno](http://lojadobreno.vtexcommercestable.com.br/)</li>\n      <li class=\"last\" typeof=\"v:Breadcrumb\">[Livros](http://lojadobreno.vtexcommercestable.com.br/livros)\n      </li>\n    </ul>\n  </div>\n</div>\n```\n\nO código acima renderiza o seguinte breadcrumb no site:\n\n![breadcrumb2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/controle-de-breadcrumb_2.png)"}