¿Qué es y cuál es la estructura básica de una navbar en Bootstrap?
Una navbar en Bootstrap es un componente de navegación adaptativo que permite crear barras de navegación responsivas para sitios web. Este componente se basa en flexbox y proporciona una estructura flexible para organizar elementos de navegación, marcas y contenido adicional.
La estructura fundamental de una navbar requiere varios elementos esenciales:
- Elemento contenedor principal:: La navbar se envuelve en un elemento
<nav>
con la clase.navbar
.
<nav class="navbar">
<!-- Contenido de la navbar -->
</nav>
- Contenedor fluido: Se recomienda envolver el contenido de la navbar en un
<div>
con la clase.container-fluid
para que se ajuste al ancho completo del contenedor principal.
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<!-- Contenido -->
</div>
</nav>
- Marca de la navbar: El elemento
.navbar-brand
se utiliza para mostrar el nombre, logo o marca de tu sitio web.
Solo texto:
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mi Sitio Web</a>
</div>
</nav>
Con imagen:
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.svg" alt="Logo" width="30" height="24">
</a>
</div>
</nav>
Combinando imagen y texto:
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
Enlaces de navegación y contenido
Navegación básica con navbar-nav
- Los enlaces de navegación en navbars utilizan las clases
.navbar-nav
,.nav-item
y.nav-link
que ya conoces de la lección anterior:
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mi Sitio</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Acerca de</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</li>
</ul>
</div>
</nav>
Estados de los enlaces
- Enlace activo: Usa la clase
.active
y el atributoaria-current="page"
para indicar la página actual:
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
- Enlace deshabilitado: Usa la clase
.disabled
para enlaces no disponibles:
<a class="nav-link disabled" href="#" aria-disabled="true">Próximamente</a>
Contenido adicional
- Texto simple: Usa
.navbar-text
para agregar texto que no sea de navegación:
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mi Sitio</a>
<span class="navbar-text">
Bienvenido, Usuario
</span>
</div>
</nav>
- Botones simples: Puedes agregar botones usando las clases que ya conoces:
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mi Sitio</a>
<button class="btn btn-primary">Iniciar Sesión</button>
</div>
</nav>
Navbar responsive y variaciones de color
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
Navbar responsive
- Para crear navbars que se adapten a diferentes tamaños de pantalla, usa las clases
.navbar-expand-{breakpoint}
:
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mi Sitio</a>
<!-- Botón para colapsar en móviles -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Contenido que se colapsa -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Características</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Precios</a>
</li>
</ul>
</div>
</div>
</nav>
Puntos de quiebre disponibles
.navbar-expand-sm
- Se expande en pantallas small (≥576px).navbar-expand-md
- Se expande en pantallas medium (≥768px).navbar-expand-lg
- Se expande en pantallas large (≥992px).navbar-expand-xl
- Se expande en pantallas extra large (≥1200px).navbar-expand-xxl
- Se expande en pantallas extra extra large (≥1400px)
Variaciones de color
- Fondo claro (por defecto):
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<!-- Contenido -->
</nav>
- Fondo oscuro:
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<!-- Contenido -->
</nav>
- Colores de fondo personalizados:
<!-- Fondo primario -->
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
<!-- Contenido -->
</nav>
<!-- Fondo personalizado -->
<nav class="navbar navbar-expand-lg bg-success" data-bs-theme="dark">
<!-- Contenido -->
</nav>
Posicionamiento
- Navbar fija en la parte superior:
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<!-- Contenido -->
</nav>
- Navbar pegajosa:
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
<!-- Contenido -->
</nav>
Ejemplo completo:
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
Mi Empresa
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Acerca de</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</li>
</ul>
<button class="btn btn-outline-primary">Contactar</button>
</div>
</div>
</nav>
Esta estructura te proporciona una navbar moderna, responsiva y completamente funcional usando Bootstrap 5.3, lista para ser personalizada según las necesidades de tu proyecto.
Navbars con desplegables dropdowns en Bootstrap
Bootstrap facilita la creación de navbars con menús desplegables o dropdowns, lo cual es esencial para estructurar menús de navegación complejos y con múltiples niveles jerárquicos.
Para incluir un dropdown en una navbar, se debe encapsular el contenido del ítem del menú en las clases y estructuras necesarias. A continuación se muestran los pasos para implementar esto.
Primero, estructura básica para una navbar:
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Marca</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Características</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Precio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Enlace dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Acción</a></li>
<li><a class="dropdown-item" href="#">Otra acción</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Estructura para un dropdown
El ítem de menú que incluye un dropdown debe usar la estructura adecuada para asegurar tanto la funcionalidad como el estilo correctos.
- Clase .dropdown en el ítem del menú:
<li class="nav-item dropdown">
- Enlace del menú con clase .dropdown-toggle y atributos adicionales:
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Enlace dropdown
</a>
- Lista ul con la clase .dropdown-menu para contener las opciones del dropdown:
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Acción</a></li>
<li><a class="dropdown-item" href="#">Otra acción</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
</ul>
Atributos importantes para accesibilidad
aria-expanded="false"
: Indica que el menú no está expandido inicialmente.role="button"
: Define el enlace como un botón, mejorando la accesibilidad.data-bs-toggle="dropdown"
: Activa la funcionalidad de dropdown usando Bootstrap.
Menú dropdown en un navbar oscuro
También es posible aplicar tema oscuro a la navbar incluyendo el atributo data-bs-theme="dark"
y cambiando los colores de los items según se necesite.
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Marca</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdownDark" aria-controls="navbarNavDropdownDark" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdownDark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Características</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Precio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Enlace dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Acción</a></li>
<li><a class="dropdown-item" href="#">Otra acción</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Consideraciones adicionales
- Utilities de espaciado y alineación: Utiliza clases de utilidad de Bootstrap como
.me-auto
,.mb-2
, y.mb-lg-0
para ajustar la disposición y el espaciado. - Dropdowns múltiples: Para menús de navegación más complejos, se pueden incluir múltiples dropdowns siguiendo la misma estructura.
Implementando estas configuraciones, se obtiene una navbar con menús desplegables (dropdowns) en Bootstrap, completamente funcional y adaptable tanto a dispositivos móviles como a pantallas de escritorio.
Aprendizajes de esta lección
- Entender la estructura básica de una navbar en Bootstrap
- Aprender a utilizar clases para colapsar y expandir la navbar
- Aplicar temas claros y oscuros a la navbar
- Implementar menús desplegables (dropdowns) dentro de la navbar
- Personalizar el contenido y los estilos de la navbar utilizando las clases de Bootstrap
- Crear formularios de búsqueda dentro de la navbar
Completa Bootstrap y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs