Como criar um componente de navegação estrutural

Uma visão geral básica de como criar um componente de localização atual responsivo e acessível para que os usuários naveguem pelo seu site.

Adam argyle

Nesta postagem, quero compartilhar ideias sobre como criar componentes de navegação estrutural. Teste a demonstração.

Demonstração

Se preferir vídeo, aqui está uma versão do YouTube desta postagem:

Visão geral

Um componente de navegação estrutural mostra em que parte da hierarquia do site o usuário está. O nome é de Hansel e Gretel, que colocaram migalhas de navegação atrás deles em algumas florestas escuras e conseguiram encontrar o caminho de casa traçando migalhas para trás.

A localização atual desta postagem não é a navegação estrutural padrão, elas são parecidas com a navegação estrutural. Eles oferecem mais funcionalidade, colocando páginas irmãs diretamente na navegação com um <select>, possibilitando o acesso em várias camadas.

UX em segundo plano

No vídeo de demonstração do componente acima, as categorias de marcador de posição são gêneros de videogames. Essa trilha é criada navegando pelo seguinte caminho: home » rpg » indie » on sale, conforme mostrado abaixo.

Esse componente precisa permitir que os usuários naveguem por essa hierarquia de informações, pulando ramificações e selecionando páginas com velocidade e precisão.

Arquitetura de informações

É útil pensar em termos de coleções e itens.

Coleções

Uma coleção é um conjunto de opções para você escolher. Na página inicial do protótipo de navegação estrutural desta postagem, as coleções são FPS, RPG, brawler, rastreador de masmorras, esportes e quebra-cabeças.

Itens

Um videogame é um item. Uma coleção específica também pode ser um item se representar outra coleção. Por exemplo, RPG é um item e uma coleção válida. Quando se trata de um item, o usuário está nessa página de coleção. Por exemplo, eles estão na página "RPG", que exibe uma lista de jogos desse gênero, incluindo as subcategorias adicionais "AAA", "Indie" e "Autopublicado".

Em termos de ciência da computação, esse componente de navegação estrutural representa uma matriz multidimensional:

const rawBreadcrumbData = {
  "FPS": {...},
  "RPG": {
    "AAA": {...},
    "indie": {
      "new": {...},
      "on sale": {...},
      "under 5": {...},
    },
    "self published": {...},
  },
  "brawler": {...},
  "dungeon crawler": {...},
  "sports": {...},
  "puzzle": {...},
}

Seu app ou site terá uma arquitetura de informações (AI) personalizada criando uma matriz multidimensional diferente, mas espero que o conceito de páginas de destino de coleta e travessia hierárquica também possam ser incluídos na navegação estrutural.

Layouts

Marcação

Bons componentes começam com HTML adequado. Na próxima seção, vou abordar minhas escolhas de marcação e como elas afetam o componente geral.

Esquema escuro e claro

<meta name="color-scheme" content="dark light">

A metatag color-scheme no snippet acima informa ao navegador que a página quer os estilos claro e escuro. Como a navegação estrutural de exemplo não inclui CSS para esses esquemas de cores, ela vai usar as cores padrão fornecidas pelo navegador.

<nav class="breadcrumbs" role="navigation"></nav>

É apropriado usar o elemento <nav> para a navegação no site, que tem um papel de navegação ARIA implícito. Nos testes, percebi que o atributo role mudou a maneira como um leitor de tela interage com o elemento. Ele foi anunciado como navegação e, por isso, optei por adicioná-lo.

Ícones

Quando um ícone é repetido em uma página, o elemento SVG <use> significa que você pode definir o path uma vez e usá-lo em todas as instâncias do ícone. Isso evita que as mesmas informações de caminho sejam repetidas, causando documentos maiores e a possibilidade de inconsistência de caminho.

Para usar essa técnica, adicione um elemento SVG oculto à página e una os ícones em um elemento <symbol> com um ID exclusivo:

<svg style="display: none;">

  <symbol id="icon-home">
    <title>A home icon</title>
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  </symbol>

  <symbol id="icon-dropdown-arrow">
    <title>A down arrow</title>
    <path d="M19 9l-7 7-7-7"/>
  </symbol>

</svg>

O navegador lê o HTML do SVG, coloca as informações do ícone na memória e continua com o restante da página referenciando o ID para outros usos do ícone, desta forma:

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-home" />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-dropdown-arrow" />
</svg>

DevTools mostrando um elemento de uso SVG renderizado.

Defina uma vez e use quantas vezes quiser, com impacto mínimo no desempenho da página e estilo flexível. Observe que a aria-hidden="true" foi adicionada ao elemento SVG. Os ícones não são úteis para alguém que está navegando e ouve apenas o conteúdo. Ocultá-los desses usuários impede que eles adicionem ruído desnecessário.

É aqui que a referência tradicional e as deste componente divergem. Normalmente, esse seria apenas um link <a>, mas adicionei a UX de travessia com uma seleção disfarçada. A classe .crumb é responsável por dispor o link e o ícone, enquanto a .crumbicon é responsável por empilhar o ícone e selecionar o elemento. Chamei de "split-link" porque as funções são muito semelhantes a um split-button, mas para a navegação nas páginas.

<span class="crumb">
  <a href="#sub-collection-b">Category B</a>
  <span class="crumbicon">
    <svg>...</svg>
    <select class="disguised-select" title="Navigate to another category">
      <option>Category A</option>
      <option selected>Category B</option>
      <option>Category C</option>
    </select>
  </span>
</span>

Um link e algumas opções não são nada especiais, mas adicionam mais funcionalidade a uma localização atual simples. Adicionar um title ao elemento <select> é útil para usuários de leitores de tela, já que fornece informações sobre a ação do botão. Mesmo que ela ofereça a mesma ajuda para todos, ela estará em destaque no iPad. Um atributo fornece contexto do botão para muitos usuários.

Captura de tela com o elemento de seleção invisível passando o cursor e a dica contextual dele sendo mostrada.

Decorações de separador

<span class="crumb-separator" aria-hidden="true">→</span>

Os separadores são opcionais, mas adicionar apenas um também funciona muito bem. Confira o terceiro exemplo no vídeo acima. Em seguida, forneço cada aria-hidden="true", já que elas são decorativas e não algo que um leitor de tela precisa anunciar.

A propriedade gap, abordada a seguir, simplifica o espaçamento deles.

Estilos

Como as cores usam cores do sistema, são principalmente lacunas e pilhas de estilos.

Direção e fluxo do layout

DevTools mostrando o alinhamento da navegação estrutural com um recurso de sobreposição de flexbox.

O elemento de navegação principal nav.breadcrumbs define uma propriedade personalizada com escopo para os filhos usarem e estabelece um layout horizontal alinhado verticalmente. Isso garante que as partes, os divisores e os ícones estejam alinhados.

.breadcrumbs {
  --nav-gap: 2ch;

  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
}

Uma navegação estrutural mostrada verticalmente com sobreposições de flexbox.

Cada .crumb também estabelece um layout horizontal alinhado verticalmente com alguma lacuna, mas segmenta especialmente os filhos do link e especifica o estilo white-space: nowrap. Isso é crucial para navegação estrutural com várias palavras, porque não queremos que elas tenham várias linhas. Mais adiante nesta postagem, vamos adicionar estilos para lidar com o overflow horizontal causado pela propriedade white-space.

.crumb {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);

  & > a {
    white-space: nowrap;

    &[aria-current="page"] {
      font-weight: bold;
    }
  }
}

aria-current="page" é adicionado para ajudar a destacar o link da página atual dos outros. Além de terem um indicador claro de que o link é para a página atual, os usuários de leitores de tela também personalizam o elemento visualmente para ajudar os usuários com visão normal a ter uma experiência do usuário semelhante.

O componente .crumbicon usa a grade para empilhar um ícone SVG com um elemento <select> "quase invisível".

Grid DevTools mostrado sobrepondo um botão em que a linha e a coluna têm nomes de pilha.

.crumbicon {
  --crumbicon-size: 3ch;

  display: grid;
  grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
  place-items: center;

  & > * {
    grid-area: stack;
  }
}

O elemento <select> é o último no DOM, por isso fica no topo da pilha e é interativo. Adicione um estilo de opacity: .01 para que o elemento ainda seja utilizável, e o resultado será uma caixa de seleção que se encaixa perfeitamente na forma do ícone. Essa é uma boa maneira de personalizar a aparência de um elemento <select>, mantendo a funcionalidade integrada.

.disguised-select {
  inline-size: 100%;
  block-size: 100%;
  opacity: .01;
  font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}

Menu flutuante

A navegação estrutural deve ser capaz de representar uma trilha muito longa. Gosto de permitir que as coisas saiam da tela horizontalmente, quando apropriado, e achei esse componente de navegação estrutural bem qualificado.

.breadcrumbs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: calc(var(--nav-gap) / 2);

  & > .crumb:last-of-type {
    scroll-snap-align: end;
  }

  @supports (-webkit-hyphens:none) { & {
    scroll-snap-type: none;
  }}
}

Os estilos flutuantes configuram a seguinte UX:

  • Rolagem horizontal com contenção de rolagem.
  • Padding com rolagem horizontal.
  • Um ponto de ajuste no último fragmento. Isso significa que, no carregamento da página, os primeiros carregamentos de progresso estão direcionados e aparecem.
  • Remove o ponto de ajuste do Safari, que tem dificuldade com as combinações de efeito de ajuste e rolagem horizontal.

Consultas de mídia

Um ajuste sutil para janelas de visualização menores é ocultar o rótulo "Página inicial", deixando apenas o ícone:

@media (width <= 480px) {
  .breadcrumbs .home-label {
    display: none;
  }
}

lado a lado da navegação estrutural com e sem um rótulo de casa, para comparação.

Acessibilidade

Movimento

Não há muito movimento nesse componente, mas ao unir a transição em uma verificação prefers-reduced-motion, podemos evitar movimentos indesejados.

@media (prefers-reduced-motion: no-preference) {
  .crumbicon {
    transition: box-shadow .2s ease;
  }
}

Nenhum dos outros estilos precisa mudar. Os efeitos de passar o cursor e de foco são ótimos e significativos sem uma transition, mas, se o movimento for aceitável, adicionaremos uma transição sutil à interação.

JavaScript

Primeiro, independentemente do tipo de roteador usado no site ou aplicativo, quando um usuário muda a localização atual, o URL precisa ser atualizado e a página adequada é mostrada ao usuário. Em segundo lugar, para normalizar a experiência do usuário, garanta que nenhuma navegação inesperada aconteça quando os usuários estiverem apenas navegando pelas opções de <select>.

Duas medidas essenciais da experiência do usuário que precisam ser processadas pelo JavaScript: o select alterou e a prevenção de disparo do evento de alteração <select>.

A prevenção do evento antecipado é necessária devido ao uso de um elemento <select>. No Windows Edge e provavelmente em outros navegadores, o evento de seleção changed é disparado quando o usuário navega pelas opções com o teclado. Por isso, chamei-a de "ávida", já que o usuário só selecionou uma opção pseudo-selecionada, como passar o cursor ou foco, mas não confirmou a escolha com enter ou click. O evento torna esse recurso de mudança de categoria de componente inacessível, porque abrir a caixa de seleção e simplesmente navegar em um item vai disparar o evento e mudar a página antes que o usuário esteja pronto.

Um evento alterado de <select> melhor

const crumbs = document.querySelectorAll('.breadcrumbs select')
const allowedKeys = new Set(['Tab', 'Enter', ' '])
const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])

// watch crumbs for changes,
// ensures it's a full value change, not a user exploring options via keyboard
crumbs.forEach(nav => {
  let ignoreChange = false

  nav.addEventListener('change', e => {
    if (ignoreChange) return
    // it's actually changed!
  })

  nav.addEventListener('keydown', ({ key }) => {
    if (preventedKeys.has(key))
      ignoreChange = true
    else if (allowedKeys.has(key))
      ignoreChange = false
  })
})

A estratégia para isso é observar eventos de pressionamento de tecla em cada elemento <select> e determinar se a tecla pressionada foi uma confirmação de navegação (Tab ou Enter) ou navegação espacial (ArrowUp ou ArrowDown). Com essa determinação, o componente pode decidir esperar ou avançar quando o evento do elemento <select> for disparado.

Conclusão

Agora que você sabe como eu fiz isso, o que você faria ‽ 🙂

Vamos diversificar nossas abordagens e aprender todas as maneiras de criar na Web. Crie uma demonstração, envie um tweet para mim e os adicionarei à seção de remixes da comunidade abaixo.

Remixes da comunidade