Pular para o conte√ļdo principal

Breadcrumb

Vis√£o geral#

O componente breadcrumb é um elemento de navegação secundário, que possibilita aos usuários que interagem com a interface identificar a localização atual na aplicação, exibindo os níveis de hierarquias antecessoras conforme avança.

Também é possível utilizá-lo como método de navegação secundário para navegar aos demais níveis da hierarquia.

Este componente não têm como objetivo mostrar o histórico de acesso das páginas percorridas durante uma sessão na aplicação, como ao pressionar o botão Voltar nativo dos navegadores.

Quando usar#

Utilize-o para mostrar a estrutura hierárquica da aplicação no decorrer da navegação.

Anatomia#

Estruturalmente, o breadcrumb pode ser composto pelos seguintes elementos: level, collapse level, icon e current page, conforme imagem abaixo:

Imagem representando o componente breadcrumb contendo 5 n√≠veis, sendo o primeiro e o quarto em formato de link, o √ļltimo como p√°gina atual e os demais colpsados.
  1. Level (nível): é um elemento do tipo link, que exibe um ou mais níveis de páginas antecessoras, servindo também como meio de navegação;
  2. Collapse level: é um elemento do tipo icon (more-vert), que exibe os níveis colpsados na forma de listbox (mais detalhes em Comportamento);
  3. Icon: é um elemento do tipo icon (arrow-right), que separa e indica o sentido da hierarquia entre os níveis;
  4. Current page: é um elemento do tipo texto, que informa a página atual da aplicação.

As defini√ß√Ķes de estilo dos componentes que comp√Ķe o breadcrumb devem respeitar o tratamento em sua forma original.

Comportamento#

O principal comportamento mapeado se relaciona a situa√ß√Ķes em que o espa√ßo em tela √© insuficiente para exibir todos os n√≠veis da hierarquia, seja pela quantidade e/ou tamanho de texto. Neste cen√°rio, o breadcrumb deve funcionar da seguinte maneira:

  • Mantem o primeiro n√≠vel vis√≠vel (p√°gina inicial);
  • Mantem a p√°gina atual vis√≠vel:
    • Este n√≠vel √© apenas informativo e n√£o deve haver intera√ß√£o;
  • Mantem o pen√ļltimo n√≠vel vis√≠vel:
    • Este n√≠vel pode ser colpsado apenas em √ļltimo casos, veja mais em Boas pr√°ticas;
  • Colapsa os demais n√≠veis:
    • Quando acionado, deve exibir os n√≠veis colapsados na forma de listbox.
Imagem representando o componente breadcrumb contendo 6 n√≠veis, sendo o primeiro e o quinto em formato de link,  o √ļltimo como p√°gina atual e os demais exibidos na listbox suspensa no breadcrumb.

As defini√ß√Ķes de comportamento dos componentes que comp√Ķe o breadcrumb devem respeitar o tratamento em sua forma original.

Navegação por mouse#

Clique no Collapse level#

Ao clicar no Collapse level, exibe o componente listbox com item-list do tipo ação, com os níveis colapsados:

Imagem representando um breadcrumb com 5 níveis e o collapse level sendo acionado através de mouse.
Current page sem interação#

A página atual não deve permitir interação:

Imagem representando um breadcrumb com 5 níveis e o ponteiro do mouse sobrepondo o current level, demonstrando que não há interação.
Hover no level#

Os comportamentos e estilos s√£o os mesmo tratados no componente link:

Imagem representando um breadcrumb com 5 níveis e o ponteiro do mouse sobrepondo o quinto nível, demonstrando que há interação.
Click no level#

Os comportamentos e estilos s√£o os mesmo tratados no componente link:

Imagem representando um breadcrumb com 5 níveis e o quinto nível sendo acionado através do mouse.

Navegação por teclado#

A ordem de foco na navegação através da tecla tab avança entre todos os níveis, do primeiro até a página atual.

O acionamento ocorre através das teclas enter ou space, exceto a página atual que não deve conter interação.

No caso de haver níveis colapsados, a navegação ocorre da seguinte maneira:

  1. O primeiro nível recebe foco;
  2. O collapse level recebe foco:
    • Se acionado, exibe o listbox, apresentando os n√≠veis colapsados e focando o primeiro item-list;
      • Pressione as setas (cima e baixo) para navegar entre os itens da lista;
      • Pressione a tecla esc para fechar a lista, ou, tab duas vezes seguidas;
  3. O pen√ļltimo n√≠vel recebe foco;
  4. A p√°gina atual recebe foco (somente para leitura).

Ao acionar via mouse ou teclado um determinado nível, deve redirecionar o contexto para a respectiva página.

Boas pr√°ticas#

Foram estruturados os padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o do componente e garantir uma boa experi√™ncia aos usu√°rios. Por isso, √© muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em considera√ß√£o os seguintes crit√©rios:

Fazer#

  • Utilizar para mostrar a hierarquia do site;
  • Em aplica√ß√Ķes n√£o hier√°rquicas, utilize apenas se houver uma maneira de mostrar a rela√ß√£o da p√°gina atual com conceitos mais abstratos ou gerais:
    • Ao permitir filtrar informa√ß√Ķes na interface de produtos especificando atributos, os n√≠veis de navega√ß√£o podem listar os atributos que foram selecionados at√© ent√£o:

      Por exemplo, em um e-commerce de brinquedos:

      Início > Meninas > 5-6 anos > Brincadeiras ao ar livre

  • Utilizar como navega√ß√£o secund√°ria e nunca deve substituir a navega√ß√£o prim√°ria ou local dentro de um contexto;
  • Manter a utiliza√ß√£o de √≠cones apenas como separadores e bot√Ķes de a√ß√£o (collapse level);
  • Manter os n√≠veis do breadcrumb em uma √ļnica linha;
  • Expor apenas a quantidade relevante de n√≠veis:
    • Como boa pr√°tica, utilize 4 n√≠veis na hierarquia (incluindo o item raiz), pois facilita a r√°pida compreens√£o do contexto.

N√£o fazer#

  • N√£o utilizar como hist√≥rico de navega√ß√£o;
  • N√£o utilizar para sites com hierarquias planas, que t√™m apenas 1 ou 2 n√≠veis de profundidade, ou sites que s√£o lineares em estruturas.
  • Evite textos muito longos que possam dificultar o entendimento e causar quebra de linha no componente;
  • N√£o utilizar √≠cones junto ao texto dos n√≠veis:
    • Como os links s√£o distribu√≠dos horizontalmente, os √≠cones interrompem o ritmo e a legibilidade da lista.
  • N√£o utilizar com quebras de linha, pois interfere na compreens√£o da hierarquia;
  • N√£o utilizar textos muito curtos:
    • A √°rea de toque de 1x1cm deve ser preservada para dispositivos sens√≠veis ao toque;
  • N√£o expor muitos n√≠veis:
    • Embora ainda tenham acesso f√°cil a quaisquer n√≠veis colpsados, o excesso de n√≠veis pode oprimir os usu√°rios.

Acessibilidade tratada no componente#

O componente breadcrumb foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1.

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente internamente e n√£o devem ser alteradas por quem utilizar. S√£o elas:

  • Seja qual for o m√©todo de intera√ß√£o, a apresenta√ß√£o das informa√ß√Ķes na tela sempre dever√° ter uma sequ√™ncia l√≥gica. Conte√ļdos responsivos n√£o devem impactar o entendimento da informa√ß√£o independentemente do tamanho da tela (1.3.2: Meaningful Sequence (A));
  • As cores n√£o devem ser utilizadas como √ļnica maneira de distinguir elementos visuais (1.4.1: Use of Color (A));
  • Uso de medidas relativas, para permitir zoom de at√© 200%, sem perda do conte√ļdo ou da funcionalidade (1.4.4: Resize Text (A));
  • Rela√ß√£o de contraste de 7:1 entre texto e plano de fundo (1.4.6: Contrast (Enhanced) (AAA));
  • Outros elementos da interface (n√£o-textuais) devem ter rela√ß√£o de contraste de 3:1 (1.4.11: Non-text Contrast (AA));
  • Permitir a intera√ß√£o com teclado (2.4.1: Keyboard (A));
  • Os componentes recebem o foco em uma ordem que preserva o significado e a operabilidade (2.4.3: Focus Order (A));
  • Manter o foco vis√≠vel na navega√ß√£o via teclado (2.4.7: Focus Visible (A)).