Bootstrap - Navs and Tabs

Introduzione

Ciao, aspiranti sviluppatori web! Oggi andremo a immergerci in uno dei componenti più comunemente utilizzati nel design web: i menu di navigazione e le schede. Questi elementi sono come i cartelli stradali del tuo sito web, guidando gli utenti attraverso diverse sezioni e contenuti. Con i componenti nav e tab di Bootstrap, possiamo creare sistemi di navigazione eleganti e reattivi che funzionano su tutti i dispositivi. Allora, mettiamo le mani sporche e iniziamo a programmare!

Nav di base

Iniziamo dalle basi. Bootstrap offre un modo semplice per creare menu di navigazione utilizzando la classe .nav. Ecco un esempio di base:

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Servizi</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contatti</a>
</li>
</ul>

Questo codice crea una lista orizzontale di link di navigazione. La classe active evidenzia la pagina corrente, mentre la classe disabled sfuma i link che non sono attualmente cliccabili.

Stili disponibili

Bootstrap offre vari stili per le tue nav. Esaminiamo due dei più popolari:

Nav tabs

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profilo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messaggi</a>
</li>
</ul>

Questo crea un menu di navigazione a schede, perfetto per organizzare i contenuti in diverse sezioni.

Nav pills

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profilo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messaggi</a>
</li>
</ul>

Lo stile delle pillole dà un'aspetto più simile a pulsanti ai tuoi link di navigazione.

Allineamento orizzontale

Puoi facilmente cambiare l'allineamento dei tuoi elementi nav. Ecco come:

<ul class="nav justify-content-center">
<!-- Elementi nav qui -->
</ul>

<ul class="nav justify-content-end">
<!-- Elementi nav qui -->
</ul>

La classe justify-content-center centra gli elementi nav, mentre justify-content-end li allinea a destra.

Lavorare con le utilità flex

Le utilità flex di Bootstrap ti danno ancora più controllo sul layout della tua nav:

<nav class="nav flex-column">
<a class="nav-link active" href="#">Attivo</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabilitato</a>
</nav>

Questo crea un menu di navigazione verticale utilizzando la classe flex-column.

Riguardo all'accessibilità

Quando si costruiscono nav, è fondamentale considerare l'accessibilità. Usa gli elementi <nav> dove appropriato, e aggiungi aria-current="page" all'elemento attivo:

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Attivo</a>
<!-- Altri elementi nav -->
</nav>

Utilizzo dei menu a discesa

Le nav possono includere menu a discesa per strutture di navigazione più complesse:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Attivo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu a discesa</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Altra azione</a></li>
<li><a class="dropdown-item" href="#">Qualcosa di diverso qui</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link separato</a></li>
</ul>
</li>
<!-- Altri elementi nav -->
</ul>

Questo codice crea una nav con un menu a discesa. L'attributo data-bs-toggle="dropdown" abilita la funzionalità del menu a discesa.

Schede con menu a discesa

Puoi anche includere menu a discesa in nav a schede:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Attivo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu a discesa</a>
<ul class="dropdown-menu">
<!-- Elementi del menu a discesa -->
</ul>
</li>
<!-- Altri elementi nav -->
</ul>

Pillole con menu a discesa

Il medesimo principio si applica alle nav a schede:

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Attivo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu a discesa</a>
<ul class="dropdown-menu">
<!-- Elementi del menu a discesa -->
</ul>
</li>
<!-- Altri elementi nav -->
</ul>

Comportamento JavaScript

I plugin JavaScript di Bootstrap possono aggiungere comportamenti dinamici alle tue nav e schede. Ecco come creare un set di schede con pannelli di contenuti:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profilo</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Contenuto della home...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Contenuto del profilo...</div>
</div>

Questo codice crea un set di schede che, quando cliccate, mostrano diversi pannelli di contenuti.

Accessibilità

Per rendere le tue schede accessibili, utilizza gli attributi role, aria-controls, aria-selected, e aria-labelledby come mostrato nell'esempio precedente.

Utilizzo degli attributi dati

Gli attributi dati ti permettono di controllare il comportamento delle schede senza scrivere JavaScript:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<!-- Altri pulsanti della scheda -->
</ul>

Gli attributi data-bs-toggle="tab" e data-bs-target="#home" abilitano la funzionalità della scheda senza ulteriore JavaScript.

Attraverso JavaScript

Puoi anche attivare le schede tramite JavaScript:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

Questo codice aggiunge listener di eventi di clic a ciascun pulsante della scheda, attivando la scheda corrispondente quando viene cliccato.

Effetto di dissolvenza

Per aggiungere un effetto di dissolvenza alle tue schede, utilizza la classe fade:

<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

Questo crea un effetto di transizione fluida quando si passa da una scheda all'altra.

Ecco fatto! Hai appena imparato a creare e personalizzare menu di navigazione e schede utilizzando Bootstrap. Ricorda, la pratica fa la perfezione, quindi prova a sperimentare con questi componenti nei tuoi progetti. Buon codice!

Credits: Image by storyset