Las barras de navegación son componentes adaptados al diseño web responsive y que se utilizan como elemento principal de navegación tanto en las aplicaciones como en los sitios web.
En los dispositivos móviles se muestran inicialmente minimizadas y al pulsar sobre ellas, se despliegan todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente, las barras de navegación muestran todos sus contenidos horizontalmente.
Dependiendo del contenido de tu barra de navegación, puede ser necesario modificar el punto a partir del cual se muestra horizontal en vez de minimizada. Para ello, modifica el valor de la variable @grid-float-breakpoint en tu archivo LESS o añade tu propia media query en el archivo CSS.
6.7.1. Barra de navegación básica
Ejemplo:
<nav class="navbar navbar-default" role="navigation">
<!-- El logotipo y el icono que despliega el menú se agrupan
para mostrarlos mejor en los dispositivos móviles -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logotipo</a>
</div>
<!-- Agrupar los enlaces de navegación, los formularios y cualquier
otro elemento que se pueda ocultar al minimizar la barra -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Enlace #1</a></li>
<li><a href="#">Enlace #2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menú #1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Acción #1</a></li>
<li><a href="#">Acción #2</a></li>
<li><a href="#">Acción #3</a></li>
<li class="divider"></li>
<li><a href="#">Acción #4</a></li>
<li class="divider"></li>
<li><a href="#">Acción #5</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar">
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Enlace #3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menú #2 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Acción #1</a></li>
<li><a href="#">Acción #2</a></li>
<li><a href="#">Acción #3</a></li>
<li class="divider"></li>
<li><a href="#">Acción #4</a></li>
</ul>
</li>
</ul>
</div>
</nav>Así se ve este ejemplo en tu navegador cuando el dispositivo es pequeño:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.28 Barra de navegación básica en un dispositivo pequeño en Bootstrap 3
Así se ve este ejemplo en tu navegador cuando el dispositivo es grande:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.29 Barra de navegación básica en un dispositivo grande en Bootstrap 3
La única forma de ver correctamente esta barra de navegación tan ancha es ver el ejemplo en una nueva página.
Advertencia La barra de navegación responsive requiere el uso del plugin collapse de JavaScript incluido en Bootstrap 3.
Truco Para mejorar la accesibilidad de tus sitios y aplicaciones, no olvides añadir el atributo role="navigation" a todas las barras de navegación.
6.7.2. Barras de navegación con botones
Cuando un botón no se encuentra dentro de un formulario, debes añadirle la clase .navbar-btn para que se muestre alineado verticalmente. Ejemplo:
<button type="button" class="btn btn-default navbar-btn">Entrar</button>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.30 Barra de navegación con botones en Bootstrap 3
6.7.3. Barras de navegación con texto
De la misma forma, si quieres mostrar texto dentro de una barra de navegación, enciérralo en un elemento con la clase .navbar-text para que su color y tamaño sea el adecuado. Ejemplo:
<p class="navbar-text">Conectado como "Nombre Apellidos"</p>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.31 Barra de navegación con texto en Bootstrap 3
6.7.4. Barras de navegación con enlaces
Las barras de navegación de Bootstrap 3 también pueden contener enlaces que no formen parte de las opciones de navegación. Para mostrarlos con los estilos adecuados, aplica la clase .navbar-link a todos esos enlaces. Ejemplo:
<p class="navbar-text pull-right">
Conectado como <a href="#" class="navbar-link">Nombre Apellidos</a>
</p>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.32 Barra de navegación con enlaces en Bootstrap 3
6.7.5. Alineando los elementos de la barra de navegación
Para alinear los enlaces, formularios, botones o texto de la barra de navegación, puedes utilizar las clases .navbar-left y .navbar-right, que añaden a ese elemento un float en la dirección correspondiente. Así, para alinear por ejemplo varios enlaces de navegación, puedes encerrarlos dentro de un elemento <ul> y aplicar sobre este último una de las dos clases CSS mencionadas anteriormente.
En realidad, estas clases se basan en las clases genéricas .pull-left y .pull-right explicadas en los capítulos anteriores. La diferencia es que han sido adaptadas a los diferentes media queries para que los elementos de la barra de navegación se vean lo mejor posible en todo tipo de dispositivos.
6.7.6. Barra de navegación fija en la parte superior de la página
Aplica la clase .navbar-fixed-top a la barra de navegación para fijarla en la parte superior de la página.
Advertencia Debido a los estilos aplicados, la barra de navegación fija puede tapar los contenidos que se encuentran en la parte superior de la página. Para evitarlo, añade un padding en la parte superior del elemento <body>. Como por defecto la barra de navegación tiene una altura de 50px, este es el estilo recomendado por defecto:
body { padding-top: 70px; }No olvides incluir este estilo después de todos los estilos de Bootstrap 3.
Ejemplo:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...
</nav>Ver ejemplo en una nueva página
6.7.7. Barra de navegación fija en la parte inferior de la página
Aplica la clase .navbar-fixed-bottom a la barra de navegación para fijarla en la parte inferior de la página.
Advertencia Debido a los estilos aplicados, la barra de navegación fija puede tapar los contenidos que se encuentran en la parte inferior de la página. Para evitarlo, añade un padding en la parte inferior del elemento <body>. Como por defecto la barra de navegación tiene una altura de 50px, este es el estilo recomendado por defecto:
body { padding-bottom: 70px; }No olvides incluir este estilo después de todos los estilos de Bootstrap 3.
Ejemplo:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
...
</nav>Ver ejemplo en una nueva página
6.7.8. Barra de navegación estática en la parte superior de la página
Aplica la clase .navbar-static-top para crear una barra de navegación que ocupa toda la anchura del elemento en el que se encuentra, pero que a diferencia de las clases .navbar-fixed-*, sí que desaparece al hacer scroll en la página.
Ejemplo:
<nav class="navbar navbar-default navbar-static-top" role="navigation">
...
</nav>Ver ejemplo en una nueva página
6.7.9. Barra de navegación invertida
El estilo por defecto de las barras de navegación no queda muy bien en las páginas con fondo oscuro. Por eso Bootstrap 3 define un estilo alternativo muy oscuro que se activa aplicando la clase .navbar-inverse a la barra de navegación. Ejemplo:
<nav class="navbar navbar-inverse" role="navigation">
...
</nav>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.33 Barra de navegación invertida en Bootstrap 3