6.2. Menús desplegables (Bootstrap 3, el manual oficial)

Este componente permite mostrar una lista de enlaces como si fuera un menú desplegable con la lista de acciones que el usuario puede realizar. Para que funcionen sus características interactivas, es necesario utilizar también el plugin dropdown de JavaScript. Ejemplo:

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button"
          id="dropdownMenu1" data-toggle="dropdown">
    Menú desplegable
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Acción</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Otra acción</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Otra acción más</a>
    </li>
    <li role="presentation" class="divider"></li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Acción separada</a>
    </li>
  </ul>
</div>

Así se ve este ejemplo en tu navegador:

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

Figura 6.2 Menú desplegable en Bootstrap 3

Como se muestra en el ejemplo anterior, es necesario utilizar la clase .dropdown para encerrar tanto el menú como el elemento que lo activa (en este caso, el botón cuyo id es #dropdownMenu1). También es posible utilizar tu propia clase CSS, siempre que ese elemento aplique el estilo position: relative;.

6.2.1. Opciones de alineación

Añade la clase .pull-right a la lista .dropdown-menu que define el menú para alinear sus contenidos a la derecha.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

6.2.2. Títulos de sección

Los menús desplegables también pueden contener elementos con la clase .dropdown-header para definir el título de un grupo de enlaces. Ejemplo:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Título de sección #1</li>
  ...
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Título de sección #2</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.3 Menú desplegable con títulos de sección en Bootstrap 3

Si se añade la clase .disabled al elemento <li> de un enlace del menú, este se muestra deshabilitado, por lo que el usuario puede ver que esa acción existe, pero que no es posible utilizarla en ese momento. Ejemplo:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation">
    <a role="menuitem" tabindex="-1" href="#">Enlace normal</a>
  </li>
  <li role="presentation" class="disabled">
    <a role="menuitem" tabindex="-1" href="#">Enlace deshabilitado</a>
  </li>
  <li role="presentation">
    <a role="menuitem" tabindex="-1" href="#">Otro enlace normal</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.4 Menú desplegable con enlaces deshabilitados en Bootstrap 3

6.2. Menús desplegables

6.2.1. Opciones de alineación

6.2.2. Títulos de sección

6.2.3. Deshabilitando elementos del menú