Breadcrumbs
O caminho do início até a tela atual, para a pessoa saber onde está e voltar alguns passos.
Nesta página
Playground
Níveis
Fundo
<nav class="feitio-breadcrumbs" aria-label="Você está em"><ol><li><a href="#playground">Início</a></li><li><span class="sep" aria-hidden="true"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></span><span aria-current="page">Backup semanal</span></li></ol></nav>Quando usar
- Em telas a dois ou mais níveis do início: um agendamento dentro de Agendamentos.
Quando não usar
- No primeiro nível: a Nav já diz onde a pessoa está.
- Como histórico: é o lugar na estrutura, não o caminho que a pessoa fez.
Exemplos
O caminho
A tela atual por último, em texto suave e sem link.
Mostrar código
<nav class="feitio-breadcrumbs" aria-label="Você está em">
<ol>
<li><a href="/">Início</a></li>
<li><span class="sep" aria-hidden="true">…</span><a href="/agendamentos">Agendamentos</a></li>
<li><span class="sep" aria-hidden="true">…</span><span aria-current="page">Backup semanal</span></li>
</ol>
</nav>No mobile
Só o nível de cima, com a seta para trás.
Mostrar código
<li class="back"><a href="/agendamentos">…Agendamentos</a></li>Anatomia
- Níveis acima: links.
- Separador: a seta à mão, escondida do leitor de tela.
- Tela atual: texto suave, sem link.
Bons e maus padrões
Faça assim
A tela atual sem link: não leva para onde a pessoa já está.
Não faça
A tela atual como link e a barra como separador.
Acessibilidade
- Um
<nav aria-label="Você está em">com uma lista ordenada. - A tela atual com
aria-current="page"; o separador comaria-hidden.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-breadcrumbs" | no <nav> | Os níveis em linha, quebrando quando não cabem. |
class="sep" | com aria-hidden | A seta entre os níveis. |
aria-current="page" | na tela atual | Texto suave, sem link. |
class="back" | no mobile | Só o nível de cima, com a seta para trás. |