Il componente Navbar serve alla realizzazione della barra di navigazione principale del sito. Può essere composto di link semplici, menu dropdown, campi di form con pulsanti. Seguendo il markup suggerito, è di default responsivo, adattandosi automaticamente ai dispositivi mobili.
Una barra di navigazione basata su Navbar consta di tre sezioni.
Si inizia definendo un elemento nav con classe .navbar. Si aggiunge poi una classe a scelta tra .navbar-default e .navbar-inverse a seconda che si voglia la variante di default (colori chiari) o quella con sfondo scuro.
<nav class="navbar navbar-default"> </nav>
Dopo aver definito il contenitore, si passa alla seconda sezione. Contiene una parte che ospita il pulsante per l'attivazione del menu su dispositivi mobili (invisibile su desktop) e una parte per il brand (logo e/o nome del sito).
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
La terza sezione è riservata al menu vero e proprio. Si tratta di una lista ul con classi nav navbar-nav da racchiudere in un div con le classi collapse navbar-collapse.
Invece che un link semplice si può aggiungere un menu dropdown.
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Di default, la barra scorre insieme al resto della pagina. Se si vuole una barra fissa, si usi questo markup per l'elemento nav:
<nav class="navbar navbar-default navbar-fixed-top">
Se si usa la variante fissa, bisogna assegnare sul body un padding superiore (padding-top) di 70px.
La variante fissa si può applicare anche ad una barra fissa in basso. Basta usare la classe navbar-fixed-bottom e applicare al body un padding inferiore (padding-bottom) di 70px.
<nav class="navbar navbar-default navbar-fixed-bottom">