6.6. Elementos de navegación

Bootstrap 3 define varios elementos de navegación que comparten el mismo código HTML y la misma clase base .nav. Para seleccionar el estilo del elemento, se modifica su clase CSS específica.

6.6.1. Navegación con pestañas

Aplica la clase .nav para crear un elemento de navegación y después aplica la clase .nav-tabs para mostrar sus enlaces en forma de pestaña. Ejemplo:

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mensajes</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.21 Elemento de navegación con pestañas en Bootstrap 3

6.6.2. Navegación con botones

Aplicando la clase .nav-pills al mismo código HTML del ejemplo anterior, los enlaces se muestran como botones ("pills" en inglés) en vez de como pestañas. Ejemplo:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mensajes</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.22 Elemento de navegación con botones en Bootstrap 3

La navegación con botones también se puede mostrar verticalmente añadiendo la clase .nav-stacked. Ejemplo:

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.23 Elemento de navegación vertical con botones en Bootstrap 3

6.6.3. Navegación justificada

Bootstrap 3 también permite crear elementos de navegación que ocupan toda la anchura del elemento en el que se encuentran y en los que todos sus enlaces tienen la misma anchura. Para ello, añade la clase .nav-justified al elemento de navegación. Ten en cuenta que este comportamiento sólo es posible para los dispositivos con una anchura superior a 768px. En el resto de dispositivos, el elemento de navegación se muestra verticalmente. Ejemplo:

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mensajes</a></li>
</ul>

<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mensajes</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.24 Elemento de navegación justificado en Bootstrap 3

6.6.4. Deshabilitando enlaces

Aplica la clase .disabled a cualquier enlace del elemento de navegación para mostrarlo de color gris y sin que cambie de color al pasar el ratón por encima suyo.

<ul class="nav nav-pills">
  <li><a href="#">Enlace activo</a></li>
  <li><a href="#">Enlace activo</a></li>
  <li class="disabled"><a href="#">Enlace deshabilitado</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.25 Elemento de navegación con enlaces deshabilitados en Bootstrap 3

6.6.5. Navegación con menús desplegables

Usando el plugin dropdown de JavaScript y un poco de código HTML, es posible añadir menús desplegables tanto a las pestañas como a los botones.

6.6.5.1. Pestañas con menús desplegables

<ul class="nav nav-tabs">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Menú desplegable <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.26 Pestañas con menús desplegables en Bootstrap 3

6.6.5.2. Botones con menús desplegables

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Menú desplegable <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.27 Botones con menús desplegables en Bootstrap 3