Barra di navigazione (Navbar) Bootstrap

Indice dei contenuti

In questo articolo imparerai a creare una barra di navigazione con Bootstrap per le tue pagine web, dove inserire voci e link personalizzati e con un layout responsivo.

Come abbiamo visto, in Bootstrap è possibile creare elementi HTML ottimizzati e con un design moderno in poche righe di codice e la scrittura di classi CSS dedicate. Nella guida seguente andremo a vedere come creare un altro elemento molto importante da inserire nelle pagine di un sito, la barra di navigazione o menu di navigazione, in cui vengono inseriti i collegamenti interni al sito.

I menu di navigazione in Bootstrap hanno molte peculiarità, differenti rispetto ad altri oggetti HTML, per questo meritava di essere inserito e spiegato in un articolo a parte.

Ti ricordiamo che per seguire il corso Bootstrap hai bisogno di conoscere l’HTML e CSS (fondamentali per la corretta comprensione del corso).

Navigation bar in Bootstrap (navbar)

Le barre di navigazione con menu del sito, è l’elemento che accomuna tutte le pagine e sezioni di un sito web, che aiuta gli utenti ad orientarsi e a scoprire le caratteristiche del sito tramite i collegamenti presenti in essa.

In Bootstrap è possibile creare una “Navbar” molto facilmente; l’elemento infatti può essere programmato in breve tempo tramite apposite classi CSS.

Se hai letto il precedente articolo del nostro corso sugli elementi più usati, avrai di certo compreso come vengono strutturati gli oggetti in Bootstrap, e la navbar non fa eccezione.

Per iniziare a creare un menu di navigazione con il Framework, dobbiamo prima elencare le classi CSS essenziali:

.navbar – Navbar standard. Da indicare sempre;
.navbar-expand-{sm/md/lg/xl} – Per le dimensioni da indicare sempre. Esempio: navbar-expand-md);
.navbar-brand – Campo per l’inserimento del nome del brand o del sito;
.navbar-nav – Per la creazione di un menu interno alla barra di navigazione;
.navbar-text – Campo per l’inserimento di testo semplice (centrato verticalmente);
.navbar-toggler – Usato per creare il tasto per il menu responsivo;
.collapse.navbar-collapse – Usato per il raggruppamento delle voci del menu, raggiunta la larghezza minima di visualizzazione;
.form-inline – Consente di inserire elementi di un modulo nella barra (ad esempio un campo di ricerca);
.nav-item – Definisce un elemento nella barra (esempio: una voce del menu);
.nav-link – Definisce una voce “link/collegamento” nel menu;

Per capire meglio come creare una barra di navigazione con Bootstrap con queste classi, qui di seguito è riportato un esempio di codice HTML.

<!-- BARRA DI NAVIGAZIONE-->
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- BRAND -->
        <a class="navbar-brand" href="#">BytePost</a>
<!-- RESPONSIVE BUTTON -->        
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
<!-- RESPONSIVE MENU-->      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- MENU -->
          <ul class="navbar-nav mr-auto">
<!-- LINK ATTIVO -->
            <li class="nav-item active">
              <a class="nav-link" href="#">Homepage</a>
            </li>
<!-- LINK GENERICO -->
            <li class="nav-item">
              <a class="nav-link" href="#">Link 1</a>
            </li>
<!-- LINK GENERICO -->
            <li class="nav-item">
              <a class="nav-link" href="#">Link 2</a>
            </li>            
          </ul>
<!-- ELEMENTO FORM -->          
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Cerca" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cerca</button>
          </form>
<!-- FINE RESPONSIVE MENU --> 
        </div>
<!-- FINE NAVBAR --> 
      </nav>

Per capire meglio il funzionamento, analizzeremo tutte le sezioni che compongono la navbar di Bootstrap, (suddivise dai commenti HTML ):

 Inizio del codice per la creazione della navbar.
 Codice per definire il brand o nome del sito.
 Il pulsante per l’apertura del menu nei dispositivi mobili. Nella versione estesa della navbar non è visualizzato.
 Inizio del menu responsivo. Tutti i tag e codici all’interno di questo “div” avranno un comportamento responsivo (verranno nascosti nel menu a tendina nei dispositivi mobili).
 Questo è il menu principale, con i links alle varie pagine del sito. Generalmente questo menu è contenuto nel div “Responsive menu“.
 La pagina attualmente attiva del sito.
 Una pagina o un link generico nel menu;
 Un piccolo form/modulo HTML con il campo di ricerca.

Se non hai idea di come iniziare a creare una navbar con Bootstrap, copia e incolla questo codice nel tuo sito.

Ogni navbar va creata utilizzando il tag HTML <nav> e al suo interno andranno inseriti tutti gli elementi che la compongono (link, brand, menu etc…).

Di base una barra di navigazione è priva di colore di sfondo, nell’esempio è stato aggiunto con la classe .bg-light (grigio chiaro).

La navbar in questione è responsiva ed è creata per essere visualizzata su schermi grandi (classe -lg, leggi l’articolo sulla creazione dei layout di Bootrstap per saperne di più), dunque per schermi con grandezza inferiore a 992px, tutte le voci verranno nascoste in un menu a tendina “resposnive“.

Puoi inserire anche dei comuni pulsanti (buttons) nella navbar di Bootstrap, usando la giusta sintassi (descritta nel nostro articolo sugli elementi di Bootstrap).

Posizionamento

Una barra di navigazione in Bootstrap può essere posizionata a proprio piacimento, se si dovessero avere particolari esigenze di progettazione e di layout.

In molti siti web avrai avuto modo di notare navbar fisse o mobili, e con Bootstrap potrai ottenere gli stessi effetti in poco tempo.

Impostazione predefinita

Se desideri creare una navbar senza particolari esigenze di posizionamento, ma desideri esclusivamente lasciarla nella parte alta della pagina, incolla il codice HTML al di sotto del tag <body>.

<body>
  <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">Brand</a>
     ...
  </nav>
...

Fixed

Una barra fissa nella parte alta dello schermo, sempre in vista anche se si scorre la pagina verso il basso. Una barra “fixed” è tra gli elementi più utilizzati, e con Bootstrap si può creare con una semplice classe CSS aggiuntiva.

<body>
  <nav class="navbar fixed-top navbar-light bg-light">
      <a class="navbar-brand" href="#">Brand</a>
     ...
  </nav>
...

La classe in questione è .fixed-top, valida anche in altri contesti di progettazione. “-top” sta appunto per “sopra” nella parte alta della schermata, ma è disponibile anche “-bottom” se si desidera che la navbar sia fissa nella parte inferiore dello schermo.

Background

Per personalizzare una barra di navigazione in Bootstrap è possibile cambiare il colore di sfondo o del testo. Per fare questa modifica possiamo fare uso delle comuni classi CSS .bg- e .text- o dalle classi predefinite delle navbar.

Le prime generiche da indicare sono le seguenti (si consiglia sempre di scriverle per definire la colorazione di base del testo e degli elementi):

.navbar-light – Per colori chiari.
.navbar-dark – Per colori scuri.

Dopo di che è possibile personalizzare il colore di sfondo con le classi generiche di background come:

.bg-primary
.bg-secondary
.bg-info
.bg-warning

Esempio:

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>