{"section":"tutorials","requestedLocale":"es","requestedSlug":"control-de-breadcrumb","locale":"es","slug":"control-de-breadcrumb","path":"docs/es/tutorials/storefront/layout/control-de-breadcrumb.md","branch":"main","content":"Breadbrumbs mejoran la experiencia de navegación en la tienda por llevar a los usuarios a explorar su jerarquía de páginas.\n\nEn VTEX, el control `<vtex.cmc:breadCrumb/>` es responsable de renderizar breadcrumbs como el del ejemplo abajo.\n\n![breadcrumb1](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/control-de-breadcrumb_1.png)\n\nSi, 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*.\n\nEste control sólo funciona en los siguientes tipos de página:\n- Producto\n- Departamento\n- Categoría\n- Búsqueda\n\nA continuación se muestra un ejemplo del código HTML renderizado por el control de breadcrumb:\n\n```html\n<div id=\"box-bread-brumb\" class=\"hidden-xs\"><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)</li></ul>\n</div>\n</div>\n```\n\nEl código anterior renderiza el siguiente breadcrumb en el sitio:\n\n![breadcrumb2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/control-de-breadcrumb_2.png)"}