Navegação "Migalha de Pão"

A navegação "migalha de pão" ajuda o usuário a enteder sua localização no site, fornecendo uma trilha de navegação de volta à pagina inicial.

Links displayed inline with separators

Exigências

Os itens tipicamente são exibidos em linha com um separador para indicar uma hierarquia entre páginas individuais.

Receita

Faça escolhas

Esse padrão é apresentado usando um layout flexível simples demonstrando como uma linha de CSS pode nos fornecer nossa navegação. Os separadores são adicionados usando o conteúdo gerado por CSS. Você pode alterá-las para qualquer separador que desejar.

Preocupações com acessibilidade

Eu utilizei os atributos aria-label e aria-current para ajudar os usuários a entender o que é essa navegação e onde a página atual está na estrutura. Veja os links relacionados para mais informações.

Compatibilidade com navegadores

BCD tables only load in the browser

Os vários métodos de layout têm diferente suporte para o navegador. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.

Flexbox

Veja também