Bootstrap navbar, come creare un menu responsive

Uno degli elementi fondamentali che non può mancare in un sito o in una web application è il menu. In questo articolo vedremo come creare un menu responsive usando la componente navbar di Bootstrap.

Che tu stia realizzando un interfaccia per un’applicazione o per un sito web, sai benissimo che il menu di navigazione è un componente essenziale del tuo progetto.

Il menu aiuta l’utente a navigare all’interno di un sito, ad accedere alle diverse sezioni e ai vari contenuti.

Bootstrap, attraverso la componente navbar, mette a disposizione una serie di strumenti con i quali è possibile creare facilmente menu orizzontali o verticali e che si espandono o comprimono in base alle dimensioni del dispositivo.

La componente base per creare un menu con Bootstrap è la classe nav, ma quasi sempre si usa la classe navbar in quanto fornisce funzionalità aggiuntive.

Ma senza perderci troppo in chiacchiere, vediamo subito come realizzare un menu con Bootstrap

Bootstrap navbar

Innanzitutto, per garantire la navigazione con tecnologia assistita della pagina web, il menu dev’essere racchiuso all’interno del tag <nav>, oppure <div> ma con l’attributo role=”navigation”. In questo modo saranno rispettati i requisiti di accessibilità del contenuto.

Per creare un menu con Bootstrap devi usare le classe navbar e navbar-expand{-sm|-md|-lg|-xl} per renderlo responsive:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
...
</nav>

Le classi navbar-dark e bg-primary le ho usato per dare creare una barra di navigazione con carattere di colore bianco su sfondo blu. Più avanti, nel tutorial, ti parlerò anche delle classi dei colori principali in Bootstrap.

La classe navbar-expand-lg fa comprimere il menu su dispositivi più piccoli di large (992px), ovvero espandere su dispositivi con viewport pari o superiore a 992px. Come abbiamo visto nei precedenti articoli, quando abbiamo parlato del Grid System, se modifichiamo il breakpoint, cioè sostituendo lg con xl, md o sm, cambia il comportamento del menu in base alle dimensioni dello schermo o della finestra del browser(viewport).

Per creare il menu con le diverse voci si usa una lista, ma bisogna assegnare la classe navbar-nav a <ul>, la classe nav-item a <li> e, per i collegamenti, si deve assegnare nav-link ai tag <a>, come nell’esempio qui sotto:

    <ul class="navbar-nav">
      <li class="nav-item ">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link2</a>
      </li>
    </ul>

Adesso, per renderlo responsive, bisogna racchiudere il menu in un <div> al quale si devono assegnare le classi collapse navbar-collapse e un particolare id.

Noi, in questo esempio, useremo come id navbarSupportedContent:

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item ">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link2</a>
      </li>
    </ul>
  </div>

In fine, aggiungiamo il c.d. bottone hamburger, che sostituirà il menu quando è compresso:

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

In data-target e aria-controls devi inserire il valore id dato al menu.

Realizziamo una Bootstrap navbar

Arrivati a questo punto, uniamo tutti i pezzi di codice e creiamo il nostro menu responsive con Bootstrap:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <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>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item ">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link2</a>
      </li>
    </ul>
  </div>
</nav>

Se inserisci il codice qui sopra nella pagina d’esempio che abbiamo creato con i primi articoli di questa guida e fai alcune prove ridimensionando la finestra, vedrai che rimpicciolendola il menu scompare e appare il pulsante ad hamburger e viceversa.

Una cosa importante che devi sapere è che la larghezza del menu occuperà tutta la finestra.

Come ti sarai reso conto facendo le prove con il codice che abbiamo scritto. Puoi modificare facilmente questo aspetto inserendolo in un contenitore:

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    ...
  </nav>
</div>

Abbiamo parlato dei contenitori nell’articolo Bootstrap Grid System (Sistema a Griglia) e Container.

Ma le potenzialità della navbar di Bootstrap non finiscono qui. Infatti, può essere ulteriormente personalizzata aggiungendo:

• un immagine e/o il nome della tua azienda o del tuo brand, con la classe navbar-brand;
• un form con un campo di input, come una casella di ricerca, con form-inline;
• del testo personalizzato aggiungendo un div con la classe navbar-text;

Per quanto riguarda il marchio (brand), lo puoi inserire subito dopo il tag di apertura <nav> in questo modo:

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="{url immagine}/brand.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Brand
  </a>
</nav>

Ovviamente puoi inserire solo il nome o solo l’immagine.

Un elemento interessante, presente in molti siti, è un campo di ricerca nella barra di navigazione. In Bootstrap puoi crearlo facilmente inserendo un form-inline in questo modo:

<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Marchio</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

In fine, vediamo come aggiungere del testo alla nostra navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link-1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link-2</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar contesto inline
    </span>
  </div>
</nav>

Per ora ci fermiamo qui. Nel prossimo articolo proseguiremo la nostra esplorazione della barra di navigazione di Bootstrap e vedremo come personalizzarla cambiando colore e posizione.

Per qualsiasi informazione o chiarimento non esitare a contattarci attraverso la nostra pagina Facebook o via email.

Prossimo articolo -> Come personalizzare un Bootstrap (hamburger) menu

 Bootstrap Grid System – righe e colonne<- Articolo precedente