TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear menús desplegables Bootstrap 5?

1.172

Ya hemos abordado el componente desplegable en nuestro tutorial anterior sobre los botones de Bootstrap. El menú desplegable no es más que un botón (o un enlace) y muestra una lista al hacer clic en él. En este tutorial, exploremos diferentes tipos de menús desplegables de Bootstrap 5 con ejemplos. Recuerde incluir bootstrap.bundled.min.js para que funcione el menú desplegable. Puede consultar la plantilla de inicio aquí.

Tutorial de menús desplegables Bootstrap 5

  1. Funciones básicas de los menús desplegables
  2. Creación de un botón desplegable predeterminado
  3. Añadiendo divisor
  4. Deshabilitar el enlace en el menú desplegable
  5. Menú desplegable con alineación del menú a la derecha
  6. Botón desplegable con encabezado
  7. Tamaño del botón desplegable
  8. Botón desplegable dividido
  9. Botón desplegable dividido
  10. Puntos para recordar

1 Conceptos básicos de Bootstrap 5 Dropdowns

  • Los menús desplegables son una lista alternable de enlaces o elementos de botón que se muestran hacia arriba o hacia abajo.
  • Esto se usa generalmente para elementos de menú desplegable o desplegable y elementos de navegación de la barra lateral.
  • Funciona basado en el script Popper.js.
  • Debe incluir popper.min.js y luego bootstrap.min.js en la misma secuencia. Utilice todos los ejemplos de este tutorial junto con nuestra plantilla de inicio.
  • No se agregarán atributos de "rol" o "aria-" al elemento desplegable de forma predeterminada. Debe insertarlos manualmente donde sea necesario.
  • Los elementos del menú desplegable se pueden cerrar haciendo clic en el botón o haciendo clic fuera. También puede utilizar la tecla "Esc" para cerrar los elementos del menú desplegable.

2 Creación de un botón desplegable predeterminado

A continuación se muestra el código para crear un menú desplegable predeterminado en Bootstrap 5:

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Producirá el siguiente resultado en el navegador:

¿Cómo crear menús desplegables Bootstrap 5?

  • Básicamente, necesitas envolver el contenido dentro de un div usando la clase ".dropdown". Esto identificará el botón como un botón desplegable. También puede utilizar una etiqueta en lugar de un botón.
  • El botón (o enlace) se incluirá con la clase ".dropdown-toggle". En este ejemplo, hemos utilizado la clase "btn-primary" para crear el botón con color primario. Puede usar cualquiera de las clases de utilidad de color para tener un botón de color diferente.
  • Después del botón, cree un menú desplegable con elementos.

3 Agregar divisores en el menú desplegable

Ahora sabe cómo crear el botón desplegable básico. Agreguemos algunos elementos decorativos, como agregar un divisor entre los elementos del menú y el encabezado.

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h6 class="dropdown-header">Dropdown Header</h6> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

El menú desplegable se verá a continuación:

¿Cómo crear menús desplegables Bootstrap 5?

4 Deshabilitar el enlace en el elemento desplegable

Puede deshabilitar el elemento en el menú desplegable para evitar hacer clic:

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item disabled" href="#">Dropdown Three</a> </div> </div>

Hemos utilizado el botón de información y desactivado el tercer enlace. Si mueve el mouse sobre el enlace deshabilitado, se mostrará el símbolo de detener el cursor y no podrá hacer clic en él.

¿Cómo crear menús desplegables Bootstrap 5?

5 Menú desplegable con alineación del menú a la derecha

Como ha notado en los ejemplos anteriores, el menú por defecto se mostrará con la alineación a la izquierda. Puede cambiarlo a la alineación derecha agregando la clase ".dropdown-menu-right" junto con la clase ".dropdown-menu". Recuerde, esto moverá el cuadro de menú completo a la derecha del contenedor. Debe utilizar estilos CSS adicionales para colocar correctamente el menú debajo del elemento del botón desplegable.

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button Alignment Right </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Los elementos del menú alineados a la derecha se verán a continuación:

¿Cómo crear menús desplegables Bootstrap 5?

6 Botón desplegable con encabezado

También puede agregar un texto de encabezado dentro de los elementos del menú usando la clase ".dropdown-header" con cualquiera de las etiquetas H1 – H6. Generalmente, el encabezado se agrega en la parte superior del menú y no se puede hacer clic.

<div class="dropdown"> <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h5 class="dropdown-header" href="#">Dropdown Header</h5> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> </div> </div>

El menú desplegable con encabezado producirá el siguiente resultado:

¿Cómo crear menús desplegables Bootstrap 5?

7 Tamaño del botón desplegable

Haga que el botón desplegable sea grande o pequeño usando las clases ".btn-lg" y ".btn-sm" como se muestra a continuación:

<div class="btn-group"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div> <div class="btn-group"> <button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Tenga en cuenta que hemos utilizado dos grupos de botones para mostrar dos botones en línea, si desea mostrar solo un botón (por ejemplo, grande), puede usar la clase ".dropdown" predeterminada.

Los botones desplegables grandes y pequeños se muestran a continuación:

¿Cómo crear menús desplegables Bootstrap 5?

Botón desplegable de 8 divisiones

A partir de ahora, hemos visto diferentes tipos de menús desplegables como un solo botón. El botón de división tiene dos botones, por lo tanto, debe usar el grupo de botones para mostrarlos en línea sin espacios. La división de dos botones se habilita usando la clase CSS ".dropdown-toggle-split".

<div class="btn-group"> <button type="button" class="btn btn-secondary">Split Button</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

El botón desplegable dividido se verá a continuación:

¿Cómo crear menús desplegables Bootstrap 5?

9 Botón desplegable dividido

Este es simplemente un estilo desplegable en lugar del menú desplegable predeterminado que usa la clase ".dropup".

<div class="btn-group dropup"> <button type="button" class="btn btn-warning">Split Dropup Button</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

El botón desplegable de división se verá a continuación:

¿Cómo crear menús desplegables Bootstrap 5?

10 puntos importantes para recordar

El menú desplegable se mostrará automáticamente hacia arriba o hacia abajo según la ventana del navegador. Por ejemplo, cuando esté al final de la página, los elementos del menú desplegable se mostrarán arriba como un menú desplegable.

El elemento de botón en el menú desplegable admite todas las clases de utilidad de color de fondo similares al componente de botón predeterminado. Bootstrap 3 solo admite enlaces para elementos de menú. Pero en Bootstrap 4 y 5, cada elemento del menú puede ser un elemento de enlace o botón.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More