Skip to main content

Torna indietro

Consente agli utenti di avere un link o bottone con un’azione equivalente al “torna indietro” del browser

Aggiungendo la classe .go-back a qualsiasi link o bottone è possibile ottenere lo stesso comportamento del tasto “Indietro” del browser: retrocedere di un passo nella cronologia di navigazione.

Quando si utilizza un link (tag <a>) è necessario aggiungere un valore all’attributo href perché il link sia correttamente navigabile via tastiera.

<a href="#" class="go-back"><svg class="icon icon-sm icon-primary mr-2"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left"></use></svg> Torna indietro</a>

Bottoni

Nel caso dell’utilizzo di un bottone l’accorgimento sopraindicato non è necessario.

<button type="button" class="btn btn-primary go-back"><svg class="icon icon-sm icon-white mr-2"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left"></use></svg> Torna indietro</button>
<button type="button" class="btn btn-primary go-back"><svg class="icon icon-sm icon-white mr-2"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up"></use></svg> Livello superiore</button>

Bottoni con sola icona

E’ possibile creare bottoni senza testo dotati di sola icona avendo cura di includere il testo alternativo per gli screen reader in un tag <span> con classe .sr-only.

<button type="button" class="btn btn-primary go-back"><svg class="icon icon-sm icon-white"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left"></use></svg><span class="sr-only">Torna indietro</span></button>
<button type="button" class="btn btn-primary go-back"><svg class="icon icon-sm icon-white"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up"></use></svg><span class="sr-only">Livello superiore</span></button>