Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=776b8b68-d5a2-4f1e-b23b-df09e1ac6bca

Cómo crear barras de navegación y menús desplegables con Bootstrap 5

Imagen ornamentalDurante el desarrollo de un sitio es habitual que dispongamos, en la parte superior de la página, de una barra de navegación, con enlaces a otras páginas del sitio. Bootstrap cuenta con una clase genérica, llamada navbar, que aplicada a un elemento nav genera este tipo de componente de manera automática. Mediante el uso de otras clases secundarias estableceremos el estilo visual que tendrá dicha barra de navegación.

La barra de navegación puede aparecer como un botón que da paso a la lista de opciones, es lo habitual en pantallas pequeñas, o bien mostrarse a lo ancho de la pantalla todo el tiempo si el espacio disponible lo permite. Dentro de la barra se incluirá un elemento con clase nav conteniendo la lista de opciones, cada una de las cuales puede estar representada como un simple enlace, una pestaña, un botón, etc., dependiendo del estilo aplicado.

En el siguiente vídeo, nuestro tutor José Manuel Alarcón se encarga de explicarte con todo lujo de detalles cómo puedes crear este tipo de elementos con Bootstrap 5, incluyendo menús desplegables. Y todo funcionando en móviles también, claro.

 

José Manuel Alarcón Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón
Archivado en: Desarrollo Web

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.