# Breadcrumbs

El camino desde el inicio hasta la pantalla actual, para que la persona sepa dónde está y pueda retroceder unos pasos.

## Playground

```html
<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

```html
<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

```html
<li class="back"><a href="/agendamentos">…Agendamentos</a></li>
```

## Anatomía

1.  **Niveles superiores:** enlaces.
2.  **Separador:** la flecha a mano alzada, oculta para lectores de pantalla.
3.  **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 con `aria-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.
