![Page 2: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/2.jpg)
O que são?
• Esquema de navegação estrutural que serve como referência para a localização do usuário em um site ou aplicação web.
www.phmendes.com
![Page 3: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/3.jpg)
TIPOS DE BREADCRUMBS
www.phmendes.com
![Page 4: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/4.jpg)
Breadcrumb de localização
• Mostra ao usuário em qual ponto se encontra dentro da hierarquia do site.
www.phmendes.com
*Observe que o último item que é referente a página que o usuário esta, não tem link.
![Page 5: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/5.jpg)
Breadcrumb de atributo
• Servem para exibir os atributos de uma determinada página.
www.phmendes.com
![Page 6: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/6.jpg)
Breadcrumb de caminho
• Mostra ao usuário de forma dinâmica o passo que tomou para chegar a página que ele esta atualmente.
• Segue a mesma linha de diagramação do breadcrumb de localização, o que muda é a funcionalidade.
www.phmendes.com
![Page 7: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/7.jpg)
Finalidade
www.phmendes.com
![Page 8: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/8.jpg)
Finalidade
• Estruturar a informação para que o conteúdo seja encontrável por humanos e robôs.
• Uma maneira de "rastrear" o caminho de volta e/ou ter uma visão geral e estruturada de em que ponto se encontra dentro da hierarquia em que se encontra.
• Ajuda visual eficaz que indica a localização do usuário dentro da hierarquia do site, tornando-se uma grande fonte de informação contextual.
www.phmendes.com
![Page 9: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/9.jpg)
• Para que funcione corretamente as páginas do site precisam ser organizadas hierarquicamente.
www.phmendes.com
Requisitos
![Page 10: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/10.jpg)
Implantação
www.phmendes.com
![Page 11: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/11.jpg)
<div itemscope itemtype="http://schema.org/WebPage"><ol itemprop="breadcrumb">
<li><a href="category/books.html">Books</a> ></li><li><a href="category/books-literature.html">Literature & Fiction</a> ></li><li><a href="category/books-classics">Classics</a></li>
</ol></div>
www.phmendes.com
Forma convencional
Existem outras maneiras de configurar o breadcumb a mais convencional é a marcação organizada e mantida através do schema.org iniciativa colaborativa dos principais buscadores Google, Yahoo e Bing
![Page 12: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/12.jpg)
• Cuidado para não criar opções de navegação demais. Navegação primária, breadcrumb e navegação secundária.
• Não use o breadcumb como navegação primaria.
• Decidir se deve usar breadcrumb depende de como a hierarquia do site foi projetada. Quando uma página de nível inferior é (ou pode ser colocada) em mais de uma categoria-mãe, breadcrumbs são ineficazes, imprecisos e confusos para o usuário.
www.phmendes.com
Considerações
![Page 13: Apresentação básica do breadcrumb, o que é e como funciona](https://reader036.vdocuments.pub/reader036/viewer/2022081802/559ab6601a28ab77078b45c1/html5/thumbnails/13.jpg)
www.phmendes.com
Essas e outras dicas e discussões em: www.phmendes.com
Obrigado!