Breadcrumbs
El camino desde el inicio hasta la pantalla actual, para que la persona sepa dónde está y pueda retroceder unos pasos.
En esta página
Playground
Niveles
Fondo
<nav class="feitio-breadcrumbs" aria-label="Estás en"><ol><li><a href="#playground">Inicio</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">Copia semanal</span></li></ol></nav>Cuándo usarlo
- En pantallas con dos o más niveles anidados: un calendario dentro de Calendarios.
Cuándo no usarlo
- Al primer nivel: el Nav ya indica dónde está la persona.
- Como historial: es el lugar en la estructura, no el camino que tomó la persona.
Ejemplos
El camino
La pantalla actual última, en texto suave y sin enlace.
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>En móvil
Solo el nivel superior, con la flecha atrás.
Mostrar código
<li class="back"><a href="/agendamentos">…Agendamentos</a></li>Anatomía
- Niveles superiores: enlaces.
- Separador: la flecha a mano alzada, oculta para lectores de pantalla.
- Pantalla actual: texto suave, sin enlace.
Hacer y no hacer
Do
Pantalla actual sin enlace: no lleva a donde la persona ya está.
Don’t
Pantalla actual como enlace y una barra diagonal como separador.
Accesibilidad
- A
<nav aria-label="You are here">con una lista ordenada. - Pantalla actual con
aria-current="page"; el separador conaria-hidden.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-breadcrumbs" | en el <nav> | Niveles en fila, doblando cuando no caben. |
class="sep" | con aria-hidden | La flecha entre niveles. |
aria-current="page" | en la pantalla actual | Texto suave, sin enlace. |
class="back" | en móvil | Solo el nivel superior, con la flecha hacia atrás. |