{"section":"tutorials","requestedLocale":"en","requestedSlug":"breadcrumb-control","locale":"en","slug":"breadcrumb-control","path":"docs/en/tutorials/storefront/layout/breadcrumb-control.md","branch":"main","content":"Breadbrumbs improve the in-store browsing experience by encouraging users to explore their page hierarchy.\n\nIn VTEX, the `<vtex.cmc:breadCrumb/>` control is responsible for rendering breadcrumbs like the one below.\n\n![breadcrumb1](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/breadcrumb-control_1.png)\n\nIf, as in this example, the user directly accesses the page of a product of the category *Camisetas*, the breadcrumb displayed on the product page will give you the information that the user is in this category (*Camisetas*), which is below the department *Moda masculina*.\n\nThis control works only on the following page types:\n- Product\n- Department\n- Category\n- Search\n\nHere is an example of the HTML code rendered by the breadcrumb control:\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\nThe code above renders the following breadcrumb in the site:\n\n![breadcrumb2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/breadcrumb-control_2.png)"}