Barra de navegación

Bootstrap nos facilita la creación de la barra principal de navegación de nuestra web mediante la clase .navbar. Esta barra se adaptará al tamaño de pantalla, mostrando los elementos colapsados en un botón en pantallas pequeñas y de forma normal para pantallas más grandes.

Este elemento requiere que el plugin de JavaScript de Bootstrap esté incluido. Además, para cumplir con las reglas de accesibilidad se recomienda añadir role="navigation" a nuestras barras de navegación.

A continuación se incluye un ejemplo completo de una barra de navegación:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 
            data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
                aria-expanded="false">Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
                aria-expanded="false">Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

La cual se mostraría como en la siguiente figura en pantallas medianas y grandes:

Barra de navegación

En las pantallas de smartphone los elementos de navegación se colapsarían en un botón, de la forma:

Barra de navegación

Imagen en la barra de navegación

Para incluir el logotipo de nuestra web en la barra de navegación tenemos que modificar la sección navbar-header del ejemplo anterior para incluir la etiqueta <img>, de la forma:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Barra de navegación con imagen

Nota: Es posible que sea necesario añadir o modificar los estilos para disponer correctamente la imagen en la barra de navegación.

Alineación de los elementos de la barra

Mediante las clases .navbar-left y .navbar-right podemos indicar la alineación de los elementos en la barra de navegación, ya sean enlaces, botones, texto o formularios.

Barra de navegación con formulario

Podemos añadir un formulario a nuestra barra de navegación añadiendo la clase .navbar-form a la etiqueta del formulario, esto hará que se alinee correctamente y se colapse en pantallas pequeñas. De forma opcional podemos utilizar las clases .navbar-left o .navbar-right para indicar su alineación en la barra.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Barra de navegación con formulario

Fijar la barra a la parte superior

Podemos fijar la barra a la parte superior de la pantalla simplemente añadiendo la clase .navbar-fixed-top junto a las clases navbar navbar-default. Además podemos indicar la disposición de los elementos de la barra añadiendo una clase contenedora de los tipos .container o .container-fluid para que aparezcan centrados o para que ocupen todo el ancho, respectivamente.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Dado que la barra se colará de forma "flotante" sobre el contenido es posible que oculte una parte del mismo. Para solucionar esto es necesario añadir un pequeño espaciado inicial a la etiqueta <body>. El alto de la barra es de 50px, por lo que se suele recomendar un espaciado de 70px, de la forma:

body { padding-top: 70px; }

Barra fija en la parte inferior

También podemos crear una barra de navegación que permanezca fija en la parte inferior de la pantalla. Para esto simplemente tenemos que añadir la clase .navbar-fixed-bottom a nuestra barra. Además podemos añadir un contenedor de los tipos .container o .container-fluid para indicar la disposición de los elementos.

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

En este caso también será necesario modificar el espaciado de la etiqueta <body> pero por la parte inferior, para que la barra no oculte los contenidos.

body { padding-bottom: 70px; }

Barra de navegación principal

Para crear la barra de navegación principal de nuestro sitio se recomienda añadir la clase .navbar-static-top para que ocupe todo el ancho posible. Esto nos permitirá definir si queremos que el contenido aparezca centrado con una clase contenedora tipo .container o que por el contrario ocupe todo el ancho posible con .container-fluid.

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Colores invertidos

Podemos invertir los colores de la barra añadiendo la clase .navbar-inverse:

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

Barra de navegación invertida