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:
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:
6.2.3. Deshabilitando elementos del menú
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: