{"id":3915,"date":"2022-03-02T07:00:58","date_gmt":"2022-03-02T07:00:58","guid":{"rendered":"https:\/\/vwo.com\/glossary\/breadcrumb-navigation\/"},"modified":"2025-05-16T06:59:50","modified_gmt":"2025-05-16T06:59:50","slug":"navegacao-breadcrumb","status":"publish","type":"post","link":"https:\/\/vwo.com\/glossary\/br\/navegacao-breadcrumb\/","title":{"rendered":"Navega\u00e7\u00e3o por breadcrumb"},"content":{"rendered":"\n

O que \u00e9 navega\u00e7\u00e3o por breadcrumb?<\/strong><\/strong><\/h2>\n\n\n\n

A navega\u00e7\u00e3o por breadcrumb<\/a>, tamb\u00e9m conhecida como navega\u00e7\u00e3o estrutural, \u00e9 um recurso que revela a localiza\u00e7\u00e3o de um usu\u00e1rio dentro de um site ou aplicativo. O termo foi inspirado no conto de fadas de Jo\u00e3o e Maria, no qual os irm\u00e3os deixam migalhas de p\u00e3o (em ingl\u00eas, \u201cbreadcrumbs\u201d) para formar um caminho de volta para casa. Da mesma forma, os breadcrumbs no mundo digital oferecem aos visitantes uma maneira de rastrear seu caminho de volta ao ponto de partida. Em outras palavras, esse recurso permite que os usu\u00e1rios acompanhem suas a\u00e7\u00f5es e as p\u00e1ginas visualizadas enquanto navegam por um site.<\/p>\n\n\n\n

Os breadcrumbs s\u00e3o exibidos em formato de barra de navega\u00e7\u00e3o secund\u00e1ria no topo da p\u00e1gina, normalmente na forma de links de texto dispostos horizontalmente e separados pelo s\u00edmbolo \u201cmaior que\u201d (>).<\/p>\n\n\n\n

Quando usar<\/strong><\/strong><\/h2>\n\n\n\n

A navega\u00e7\u00e3o por breadcrumb deve ser usada em sites grandes ou com m\u00faltiplos n\u00edveis, cujas p\u00e1ginas s\u00e3o organizadas hierarquicamente. Um bom exemplo s\u00e3o os sites de com\u00e9rcio eletr\u00f4nico que possuem uma ampla gama de produtos agrupados em categorias.<\/p>\n\n\n\n

Criar um diagrama representando a arquitetura de navega\u00e7\u00e3o do site ou realizar testes A\/B<\/a> \u00e9 uma \u00f3tima forma de determinar se a navega\u00e7\u00e3o por breadcrumb ser\u00e1 ben\u00e9fica ou n\u00e3o. O teste A\/B tamb\u00e9m pode ser usado para identificar a melhor posi\u00e7\u00e3o e estilo para o caminho detalhado pelos breadcrumbs. <\/p>\n\n\n\n

A navega\u00e7\u00e3o por breadcrumb \u00e9 considerada um recurso adicional de conveni\u00eancia e n\u00e3o deve substituir os menus de navega\u00e7\u00e3o principais.<\/p>\n\n\n\n

Tipos de navega\u00e7\u00e3o por breadcrumb<\/strong><\/strong><\/h2>\n\n\n\n

Existem tr\u00eas tipos de navega\u00e7\u00e3o por breadcrumb que podem ser adotados:<\/p>\n\n\n\n

Baseada em localiza\u00e7\u00e3o:<\/strong> tamb\u00e9m chamada de \u201cbaseada em hierarquia\u201d, \u00e9 a forma mais comum de usar breadcrumbs <\/em>em um site. Ela informa aos usu\u00e1rios onde eles est\u00e3o e quantos passos s\u00e3o necess\u00e1rios at\u00e9 voltar \u00e0 p\u00e1gina inicial. <\/p>\n\n\n\n

In\u00edcio > Categoria > Subcategoria > Publica\u00e7\u00e3o<\/p>\n\n\n\n

\n
\"Hierarchy-based\"
IFonte da imagem: Yoast<\/a>
<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

Baseada em atributos:<\/strong> costuma ser exibida em sites de com\u00e9rcio eletr\u00f4nico. Normalmente destaca as caracter\u00edsticas ou atributos espec\u00edficos definidos para os produtos ou servi\u00e7os buscados pelos usu\u00e1rios.<\/p>\n\n\n

\n
\"Attribute-based\"
Fonte da imagem: UX Planet<\/figcaption><\/figure>\n<\/div>\n\n\n

Baseada em caminho:<\/strong> tamb\u00e9m conhecida como \u201ctrilha de hist\u00f3rico\u201d, essa variante de navega\u00e7\u00e3o por breadcrumb refaz os \u00faltimos passos do usu\u00e1rio. Normalmente, n\u00e3o \u00e9 uma op\u00e7\u00e3o muito \u00fatil, j\u00e1 que os links gerados s\u00e3o din\u00e2micos e mudam a cada clique. Esse tipo de trilha pode ser bastante ca\u00f3tico, e usar o bot\u00e3o \u201cVoltar\u201d acaba sendo mais pr\u00e1tico. O exemplo abaixo mostra dois caminhos distintos para navegar at\u00e9 a mesma p\u00e1gina:<\/p>\n\n\n\n

\n
\"Path-based\"
Fonte da imagem: UX Planet<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

Vantagens da navega\u00e7\u00e3o por breadcrumb<\/strong><\/strong><\/h2>\n\n\n\n

Breadcrumbs s\u00e3o um elemento essencial em um site otimizado para SEO pelos seguintes motivos:<\/p>\n\n\n\n