Navegação "Migalha de Pão"

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

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.

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.

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

• CSS Flexible Box Layout
• Fornecendo uma trilha de "migalha de pão"
• Usando o atributo aria-current