Breadcrumbs são esquemas de navegação que mostram a localização do usuário dentro da hierarquia de um site ou aplicativo. Existem três tipos principais: de localização, atributos e caminho. Breadcrumbs ajudam os usuários a se orientarem e encontrarem informações de forma estruturada.

1. BREADCRUMB
www.phmendes.com | @phmendes | paulo@phmendes.com

2. 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

3. TIPOS DE BREADCRUMBS
www.phmendes.com

4. 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.

5. Breadcrumb de atributo
• Servem para exibir os atributos de uma
determinada página.
www.phmendes.com

6. 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

7. Finalidade
www.phmendes.com

8. 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

9. • Para que funcione corretamente as páginas do
site precisam ser organizadas
hierarquicamente.
www.phmendes.com
Requisitos

10. Implantação
www.phmendes.com

11. <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

12. • 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

13. www.phmendes.com
Essas e outras dicas e discussões em:
www.phmendes.com
Obrigado!