# 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:

```markup
<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](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOs2pnFhmnD20oQx%2Ftabs1.png?generation=1577179028176915\&alt=media)

## *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":

```markup
<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](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOs4M48ZbhFZl3Ax%2Fpills1.png?generation=1577179027571027\&alt=media)

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

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

![Pills apiladas](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOs6vow4X0epN9JJ%2Fpills_stacked.png?generation=1577179027946888\&alt=media)

### 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:

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

![Tabs and pills justified](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOs8wTZLhL8OPwpW%2Ftabs_justified.png?generation=1577179028367159\&alt=media)

*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:

```markup
<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](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOsA1pO1NLor923k%2Ftabs_dropdowns.png?generation=1577179027772089\&alt=media)