Navbar

Sistema completo de navegación moderno con efectos glass, floating, mega menús y múltiples variantes adaptadas para aplicaciones web contemporáneas.

Navbar Básico Mejorado

El navbar básico incluye mejoras visuales, transiciones suaves, efectos hover mejorados y mejor accesibilidad.

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <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" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Productos</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Características Principales

🎨 Mejoras Visuales

  • Brand: Tipografía display con peso extra-bold
  • Hover effect: Escala 1.05 en brand
  • Links: Transiciones suaves con background highlight
  • Focus: Ring de enfoque personalizado
  • Backdrop filter: Efecto blur nativo

⚡ Funcionalidades

  • Toggler animado: Transforma en X al expandir
  • Estados activos: Indicador visual automático
  • Responsive: Colapsa elegantemente en móvil
  • Accesible: ARIA labels y navegación por teclado

Toggler Animado

El toggler se transforma suavemente de hamburguesa a X:

Click me!
✨ Funcionalidades:
  • Estado normal: 3 líneas horizontales
  • Estado expandido: Se transforma en X
  • Transición: Suave con CSS transitions
  • Accesible: Mantiene funcionalidad de teclado

Variantes de Navbar

Navbar Glass (Transparente)

Contenido de fondo

El navbar glass permite ver el contenido de fondo con efecto blur

<nav class="navbar navbar-expand-lg navbar-glass">
  <!-- Contenido del navbar -->
</nav>

Navbar Gradient

<nav class="navbar navbar-expand-lg navbar-gradient">
  <!-- Los textos automáticamente se vuelven blancos -->
</nav>

Navbar Floating

Navbar flotante separado del top

Perfecto para landing pages modernas

<nav class="navbar navbar-expand-lg navbar-floating">
  <!-- Se posiciona automáticamente flotando -->
</nav>

Navbar Scrolled (Dinámico)

📱 Efecto Scroll Automático

El navbar cambia automáticamente cuando se hace scroll:

  • Inicial: Transparente o con fondo ligero
  • Con scroll: Fondo sólido, sombra y padding reducido
  • JavaScript: Detecta scroll y aplica clase .navbar-scrolled
Estado inicial
Transparente, padding normal
Estado scrolled
Sólido, padding reducido, sombra 
// JavaScript para efecto scroll
window.addEventListener('scroll', function() {
  const navbar = document.querySelector('.navbar');
  if (window.scrollY > 50) {
    navbar.classList.add('navbar-scrolled');
  } else {
    navbar.classList.remove('navbar-scrolled');
  }
});

Componentes Avanzados

Mega Menu

<div class="nav-item dropdown dropdown-mega">
  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Productos</a>
  <div class="dropdown-menu">
    <div class="row">
      <div class="col-md-4">
        <h6>Categoría</h6>
        <a class="dropdown-item" href="#">Opción 1</a>
        <a class="dropdown-item" href="#">Opción 2</a>
      </div>
    </div>
  </div>
</div>

Búsqueda Integrada

<div class="navbar-search">
  <input type="search" class="search-input" placeholder="Buscar...">
  <span class="search-icon">🔍</span>
</div>

Dropdown Moderno

Dropdown Estándar

Con Iconos y Estados

CTA Button

<div class="navbar-cta">
  <a href="#" class="btn btn-primary">Empezar Gratis</a>
</div>

Layouts de Navegación

Logo Centrado

<nav class="navbar navbar-expand-lg navbar-center-logo">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <!-- Links izquierda -->
    </ul>
    <a class="navbar-brand" href="#">Logo Centro</a>
    <ul class="navbar-nav">
      <!-- Links derecha -->
    </ul>
  </div>
</nav>

Sidebar Navigation

Dashboard
Contenido principal

Sidebar navigation para dashboards

Bottom Navigation (Móvil)

App Content

Contenido de la aplicación móvil

Breadcrumb Navigation

Características Especiales

Indicador de Página Activa

Animaciones de Entrada (Móvil)

📱 Animaciones Fluidas

Los elementos del menú móvil aparecen con animaciones escalonadas:

  • Efecto: FadeIn + TranslateY desde arriba
  • Delay: 0.1s entre cada elemento
  • Duración: 0.3s por elemento
  • Activación: Al expandir el menú móvil
CSS Animation: animation: navItemFadeIn 0.3s ease forwards;

Estados de Loading

Dark Mode Automático

🌙 Adaptación Automática

El navbar se adapta automáticamente usando @media (prefers-color-scheme: dark)

  • Fondo oscuro con transparencia
  • Textos en tonos grises claros
  • Efectos glass ajustados

Notificaciones y Badges

Ejemplos Completos

🚀 SaaS Landing

Navbar flotante perfecto para landing pages

Glass effect + CTA buttons

📱 E-commerce Mobile

🔍
👕
Ropa
📱
Tech

🏢 Dashboard Empresarial

A
Acme Corp
Enterprise
📊
Ventas
$12,345
👥
Usuarios
1,234
📈
Crecimiento
+23%
💰
Ingresos
$45,678

💡 Mejores Prácticas

🎯 UX/UI
  • Consistencia: Usa la misma estructura en todas las páginas
  • Accesibilidad: ARIA labels y navegación por teclado
  • Responsive: Siempre incluye versión móvil
  • Estados: Visual feedback para enlaces activos
  • Loading: Indica estados de carga en navegación
⚡ Performance
  • CSS crítico: Incluye estilos de navbar inline
  • Scroll throttle: Optimiza eventos de scroll
  • Lazy dropdowns: Carga contenido bajo demanda
  • Prefetch: Precarga páginas de navegación frecuente
  • Animaciones: Usa transform en lugar de cambiar layout

🔧 Personalización Avanzada

Variables SCSS:
  • $font-family-display - Tipografía del brand
  • $navbar-padding-y - Espaciado vertical
  • $navbar-brand-font-size - Tamaño de logo
  • $navbar-nav-link-padding - Padding de links
Clases disponibles:
  • .navbar-glass - Efecto cristal
  • .navbar-floating - Posición flotante
  • .navbar-gradient - Fondo degradado
  • .navbar-scrolled - Estado con scroll
  • .navbar-center-logo - Logo centrado
JavaScript hooks:
  • Scroll detection automático
  • Mobile menu animations
  • Dropdown positioning
  • Search functionality
  • Theme switching
En esta página