Navbar en Bootstrap: cómo crear y editar una barra de navegación

En la actualidad, 7 de cada 10 usuarios abandonan los sitios web que no ofrecen una buena experiencia de navegación, lo que significa que dos tercios de la audiencia acabarán pasándose a la competencia debido a un problema que puede resolverse fácilmente.

Para evitar que esto suceda, puedes crear una barra de navegación en Bootstrap: un marco CSS de código abierto que te permite implementar fácilmente en tu sitio web un diseño de navegación totalmente centrado en los usuarios. Además, aunque para usar Bootstrap debes tener conocimientos básicos de HTML y CSS, no tienes que diseñar el sitio desde cero.

La barra de navegación (o navbar) es un elemento fundamental, porque permite a los visitantes encontrar fácilmente las páginas más importantes de un sitio web, como el blog, las páginas de productos, la página de precios y la información de contacto, y esto que significa que probablemente permanecerán en el sitio durante más tiempo. Veamos qué es la navbar Bootstrap y cómo crear una.

Qué es la navbar Bootstrap

La navbar Bootstrap es un encabezado de navegación adaptable con algunas características clave que debes tener en cuenta:

• Es una barra de navegación adaptable y fluida de forma predeterminada, lo que significa que se amplía o reduce en función de la anchura del viewport.
• Las navbars requieren un envoltorio .navbar con clases .navbar-expand{-sm|-md|-lg|-xl}, que determinan cuándo se contrae el contenido detrás de un botón.
• El elemento <nav> es un elemento HTML semántico, que garantiza la accesibilidad y que es preferible al elemento genérico <div>.

La navbar Bootstrap ha sido un componente fundamental desde la primera versión (2.3.2.), y desde entonces se han ido añadiendo hojas de estilo más rápidas en cada lanzamiento.

Si todavía no has instalado Bootstrap, puedes seguir las instrucciones paso a paso que encontrarás en esta guía sobre el CSS de Bootstrap (en inglés) antes de seguir leyendo este artículo.

Cómo crear una navbar Bootstrap

Imaginemos que quieres añadir una barra de navegación estándar con enlaces a la página principal de tu sitio web, a la página de características de productos y a la página de precios. También quieres usar un estilo realmente adaptable para que la barra se contraiga tras un botón de hamburguesa en dispositivos móviles, y que se amplíe para ocupar tanto espacio horizontal como sea posible en pantallas grandes.

En este caso, puedes usar este código de Bootstrap en el HTML de la página:

Consulta en CodePen el Pen de HubSpot (@hubspot) sobre cómo crear una navbar Bootstrap básica (1).

Este proceso es siempre el mismo, con independencia del tipo de navbar Bootstrap que añadas a tu sitio web.

Estilos de navbars Bootstrap

En este apartado veremos diferentes opciones de estilo para la navbar de Bootstrap, de forma que puedas elegir la que mejor se adapte al branding de tu sitio web.

Navbar Bootstrap desplegable

Si tienes que incluir muchas páginas en la barra de navegación, en lugar de colocarlas una al lado de la otra, puedes mostrar solo las tres páginas más importantes y luego agrupar el resto en un menú desplegable.

También puedes agrupar en un menú desplegable los elementos que representen las acciones que los visitantes pueden realizar en tu sitio web, como ponerse en contacto contigo, suscribirse a tu blog o registrarse para recibir un boletín de noticias.

Para agrupar elementos de esta forma, solo tienes que anidar este fragmento de código después de .nav-links.

Consulta en CodePen el Pen de HubSpot (@hubspot) sobre cómo crear una navbar Bootstrap básica (2).

En este ejemplo, hemos reemplazado el texto de marcador "Dropdown link" (Enlace de desplegable), "Action" (Acción), "Another action" (Otra acción) y "Something else here" (Algo más).

Color de la navbar Bootstrap

Para cambiar el color de la barra, solo tienes que cambiar la combinaciones de clases que definen el tema y las utilidades background-color (color de fondo) que se mencionan en la primera línea de código.

Fíjate en la línea navbar-light bg-light del primer ejemplo. La clase CSS .navbar-light es la más adecuada para colores de fondo claros, mientras que la clase .navbar-dark es la más adecuada para colores de fondo oscuros. La clase .bg-light define el color de la barra como gris claro, y en esta imagen puedes ver el resto de los colores disponibles.

Fuente de la imagen

En este ejemplo, hemos elegido el color azul etiquetado como "info", y este es el resultado:

Consulta en CodePen el Pen de HubSpot (@hubspot) sobre cómo crear una navbar Bootstrap básica (3).

Navbar Bootstrap transparente

Si prefieres que la barra de navegación sea del mismo color que el fondo, no tienes que buscar colores que combinen, sino que puedes usar la utilidad .bg-transparent para crear una barra transparente.

En este ejemplo, hemos cambiado el color de fondo de toda la página web aplicando el código hex #EAF0F6, y hemos convertido la barra en transparente.

Consulta en CodePen el Pen de HubSpot (@hubspot) sobre cómo crear una navbar Bootstrap básica (4).

Cómo contraer una navbar Bootstrap

En el ejemplo de arriba, se usan las clases .navbar-toggler, .navbar-collapse y navbar-expand-lg para que el contenido de la barra se contraiga tras un botón en el punto de interrupción grande (960 px).

Para cambiar el momento en el que el contenido se contrae, puedes combinar las clases .navbar-toggler y .navbar-collapse con .navbar-expand{-sm|-md|-lg|-xl}.

Por ejemplo, si queremos que el contenido se contraiga a los 540 px en lugar de a los 960 px, tendríamos que cambiar navbar-expand-lg por navbar-expand-sm en el código, y el resultado tendría este aspecto:

Consulta en CodePen el Pen de HubSpot (@hubspot) sobre cómo crear una navbar Bootstrap básica (5).

Navbar Bootstrap vertical

Si prefieres implementar en tu sitio web una barra vertical en lugar de horizontal, tienes que eliminar las clases .navbar-toggler, .navbar-collapse y navbar-expand-lg.

El resultado tendrá este aspecto:

Consulta en CodePen el Pen de HubSpot (@hubspot) sobre cómo crear una navbar Bootstrap vertical.

Navbar Bootstrap fija

De forma predeterminada, las barras de navegación están definidas como estáticas, al igual que cualquier otro elemento HTML. Esto significa que siempre ocupan la misma posición según el flujo normal de la página, denominado modelo de objetos de documento o DOM .

Si prefieres colocar la barra en posiciones CSS que no sean estáticas, puedes usar las utilidades de posicionamiento de Bootstrap. Las barras fijas usan position: fixed, lo que significa que se extienden de extremo a extremo del viewport, ya sea en la parte superior o inferior de la pantalla, y permanecen en la misma posición cuando el visitante se desplaza por la página.

En este ejemplo, fijamos la barra en la parte inferior de la pantalla añadiendo .navbar fixed-bottom en la misma línea de código que la clase .navbar-expand{-sm|-md|-lg|-xl}. También añadimos texto de ejemplo al cuerpo para que veas que permanece en la misma posición aunque te desplaces por el contenido.

Consulta en CodePen el Pen de HubSpot (@hubspot) sobre cómo crear una navbar Bootstrap fija.

Sin embargo, debes tener en cuenta que una barra de navegación fija de este tipo necesitará espacio de relleno para que no se superponga con otros elementos de la página.

Búsqueda desde la navbar de Bootstrap

También puedes usar la clase .form-inline para incluir un cuadro de búsqueda en la barra de navegación, de forma que los visitantes puedan buscar palabras clave específicas en todo el sitio web. Para incluirlo, solo tienes que anidar este fragmento de código bajo la clase .navbar-brand.

En este ejemplo, cambiamos el color del botón, de verde a gris, para que combine mejor con el color de fondo de la barra. Para cambiarlo, hemos reemplazado "btn-outline-success" por "btn-outline-light", pero puedes elegir otra de las opciones de color para botones.

Consulta en CodePen el Pen de HubSpot (@hubspot) sobre cómo incluir un cuadro de búsqueda en la navbar Bootstrap.

Personalización de la navbar Bootstrap

Si quieres crear una barra de navegación completamente única, puedes usar código CSS personalizado para modificar cualquiera de las plantillas prediseñadas que aparecen arriba.

Veamos un ejemplo. Digamos que quiero cambiar el color de fondo de la navbar Bootstrap y usar un color personalizado en lugar de uno de los 10 colores predeterminados.

En este caso, quitaría todas las utilidades de color que tenga en el HTML, como "bg-light". Luego, en el CSS, usaría el selector de clase .navbar y elegiría el tono naranja que quiero como propiedad de fondo (en este caso, #FF7A59).

Este sería el CSS y el resultado:

Consulta en CodePen el Pen de HubSpot (@hubspot) sobre cómo usar CSS personalizado en la navbar Bootstrap.

Para consultar más información sobre cómo personalizar Bootstrap, echa un vistazo a este artículo acerca de cómo personalizar los colores con CSS según las directrices de tu marca.

Ejemplos de navbars Bootstrap personalizadas

Muchos desarrolladores y diseñadores han creado sus propias navbars Bootstrap personalizadas, que puedes comprar o descargar de forma gratuita. Veamos algunos ejemplos.

Navbar Bootstrap de menú para sitios web V01

La barra Website Menu V01 es una navbar Bootstrap transparente que se vuelve blanca cuando el usuario empieza a desplazarse por la página, y que incluye un menú desplegable con varios niveles e iconos de redes sociales.

Navbar Bootstrap con un logotipo centrado en la parte superior

Esta navbar Bootstrap es un diseño moderno y minimalista que incluye un logotipo centrado en la parte superior. En lugar de mostrar el logotipo de la marca en la parte inferior izquierda, lo muestra centrado en la parte superior de la página, sobre los enlaces de navegación. Estos enlaces de navegación, por su parte, se contraen tras un botón en los tamaños de pantalla pequeños.

Navbar Bootstrap horizontal sencilla

Esta navbar Bootstrap horizontal sencilla es una barra de navegación avanzada, con un color de fondo personalizado translúcido y un borde azul en la parte inferior. Aunque los elementos de navegación son blancos, adoptan el mismo tono azul cuando el usuario pasa el cursor sobre ellos, y también incluye menús emergentes que aparecen solo cuando el usuario pasa el cursor sobre "browse by category" (buscar por categoría) y "auctions" (subastas).

Navbar Bootstrap animada, adaptable y fija

Esta navbar Bootstrap fija y adaptable es una barra animada transparente que, cuando el usuario se desplaza por la página, se vuelve negra y reduce su tamaño.

Navbar Bootstrap con botones de registro o de inicio de sesión

La navbar Bootstrap también puede incorporar botones de registro o de inicio de sesión. Este ejemplo incluye un menú desplegable de inicio de sesión, y cuando los usuarios hacen clic en él, se les invita a crear una cuenta, o bien a iniciar sesión con su correo o con su cuenta de Facebook o Twitter.

Mejora la UX de tu sitio con una navbar Bootstrap

Si añades a tu sitio web una de las navbars Bootstrap que mencionamos arriba, los visitantes podrán encontrar el contenido que buscan más fácilmente. De esta forma, no solo les estarás ofreciendo una experiencia de usuario mejorada, sino que también es probable que permanezcan en tu sitio durante más tiempo.