Navegación

Los elementos de navegación de Bootstrap comparten la etiqueta .nav para su marcado en la clase contenedora. Estos elementos necesitan la librería JavaScript para su correcto funcionamiento. Algunos de los elementos de navegación que podemos utilizar son las fichas o pestañas y las "píldoras".

Fichas o pestañas

Mediante la clase .nav-tabs podemos crear un grupo de pestañas o fichas, para ello tenemos que seguir la siguiente estructura:

<div role="tabpanel">
    <ul class="nav nav-tabs">
        <li role="presentation" class="active">
            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
        </li>
        <li role="presentation">
            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
        </li>
        <li role="presentation">
            <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">...</div>
        <div role="tabpanel" class="tab-pane" id="profile">...</div>
        <div role="tabpanel" class="tab-pane" id="messages">...</div>
    </div>
</div>

tabs

Píldoras

La clase .nav-pills se define de igual forma que la .nav-tab pero sus elementos adoptarán una apariencia más similar a botones o "píldoras":

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pills

En este caso también podemos crear un menú vertical o apilado añadiendo la clase .nav-stacked a la etiqueta contenedora:

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

Pills apiladas

Justificado

También podemos indicar que el ancho de las pestañas o de las píldoras se distribuya equitativamente según el ancho disponible. Para esto simplemente tenemos que aplicar la clase .nav-justified a la etiqueta contenedora, de la forma:

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Tabs and pills justified

Nota: Este estilo no funcionará para pantallas con un ancho menor a 768px, que son las pantallas definidas como extra pequeñas o de smartphone.

Elementos de navegación con desplegables

Podemos añadir desplegables a nuestros elementos de navegación de la forma:

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

Tabs con desplegables