Una barra de navegación lateral que le permite alternar entre una pantalla de tamaño completo con texto y una pantalla compacta con solo íconos, que a menudo se ven en pantallas de administración y paneles. Ideal si deseas maximizar el área de visualización del área de contenido.

Vista previa

Dashboard Overview

Welcome back, Jane. Here is what’s happening today.

Total Revenue

$45,231

Active Users

2,410

New Orders

142

Recent Activity

Casos de uso y características

Pantalla de control y administración: Diseñado para permitir a los usuarios centrarse en el contenido principal (gráficos, tablas de datos, etc.) contrayendo la navegación según sea necesario.
Finalización con información sobre herramientas: incluso cuando está en un estado compacto con solo íconos, la accesibilidad y la facilidad de uso se garantizan al mostrar información sobre herramientas al pasar el mouse.
Animación suave: Al combinar ancho, transparencia (opacity) y max-width, logramos un movimiento natural en el que el texto desaparece y aparece suavemente.

Puntos claves del diseño y UX (Design & UX)

Prevención de desbordamiento de texto: la combinación de max-w-0 y overflow-hidden evita que el texto se divida en nuevas líneas y rompa el diseño cuando se pliega.
Resaltando visualmente el estado activo: el elemento del menú seleccionado actualmente tiene un fondo azul y un color de texto para transmitir intuitivamente la posición actual.
Guiar la vista: el botón de alternancia para abrir y cerrar se coloca en el borde de la barra lateral para aumentar la posibilidad de “presionar aquí para moverse”.

Cómo personalizar (Guía de personalización)

Cambiar el ancho de la barra lateral: Puede ajustarla al tamaño deseado cambiando w-64 (cuando está expandido) o w-20 (cuando está contraído) en el lado del código de implementación.
Cambiar los colores del tema: al reemplazar las clases de utilidad bg-blue-600 y text-blue-700 todas a la vez, puedes aplicarlas a diseños que coincidan con los colores de tu marca.

Código de implementación (Implementación)

<div className="flex h-screen bg-slate-50 font-sans overflow-hidden">
    
    {/* Sidebar */}
    <aside 
      className={`bg-white border-r border-slate-200 flex flex-col transition-all duration-300 ease-in-out relative z-10 ${
        isCollapsed ? 'w-20' : 'w-64'
      }`}
    >
      {/* Header */}
      <div className="h-16 flex items-center px-4 border-b border-slate-100 shrink-0">
        <div className="flex items-center gap-3 overflow-hidden whitespace-nowrap">
          <div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shrink-0 shadow-sm shadow-blue-200">
            <Hexagon className="w-6 h-6 text-white" />
          </div>
          <span 
            className={`font-bold text-slate-800 text-xl transition-all duration-300 overflow-hidden ${
              isCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'
            }`}
          >
            DashUI
          </span>
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex-1 py-6 px-3 space-y-2 overflow-y-auto overflow-x-hidden">
        {navItems.map((item, index) => (
          <a 
            key={index}
            href="#" 
            className={`flex items-center gap-3 px-3 py-3 rounded-xl transition-colors group relative ${
              item.active 
                ? 'text-blue-700 bg-blue-50 hover:bg-blue-100' 
                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900'
            }`}
          >
            <item.icon className="w-6 h-6 shrink-0" />
            
            <span 
              className={`font-semibold whitespace-nowrap transition-all duration-300 flex-1 text-sm overflow-hidden ${
                isCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'
              }`}
            >
              {item.label}
            </span>

            {/* Badge display (only when expanded) */}
            {!isCollapsed && item.badge && (
              <span className="bg-blue-100 text-blue-700 py-0.5 px-2 rounded-full text-xs font-bold whitespace-nowrap">
                {item.badge}
              </span>
            )}

            {/* Tooltip (displayed on hover only when collapsed) */}
            {isCollapsed && (
              <div className="absolute left-14 hidden group-hover:block bg-slate-800 text-white text-xs px-2.5 py-1.5 rounded-md shadow-lg z-20 whitespace-nowrap pointer-events-none opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                {item.label}
              </div>
            )}
          </a>
        ))}
      </nav>

      {/* Footer Profile */}
      <div className="p-4 border-t border-slate-100 shrink-0">
        <a href="#" className="flex items-center gap-3 hover:bg-slate-50 p-2 -m-2 rounded-xl transition-colors">
          <img 
            src="https://i.pravatar.cc/150?u=a042581f4e29026704d" 
            alt="User Avatar" 
            className="w-10 h-10 rounded-full shrink-0 border border-slate-200 object-cover" 
          />
          <div 
            className={`flex-1 min-w-0 transition-all duration-300 overflow-hidden ${
              isCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'
            }`}
          >
            <p className="text-sm font-semibold text-slate-900 truncate">Jane Doe</p>
            <p className="text-xs text-slate-500 truncate">Admin</p>
          </div>
        </a>
      </div>
    </aside>

    {/* Toggle Button */}
    <button 
      onClick={() => setIsCollapsed(!isCollapsed)}
      className={`absolute top-6 z-20 cursor-pointer bg-white border border-slate-200 text-slate-500 hover:text-blue-600 hover:bg-blue-50 rounded-full p-1.5 shadow-sm transition-all duration-300 ${
        isCollapsed ? 'left-[4.2rem]' : 'left-[15rem]'
      }`}
      aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
    >
      <ChevronLeft className={`w-4 h-4 transition-transform duration-300 ${isCollapsed ? 'rotate-180' : ''}`} />
    </button>

{/* Área de contenido principal (ejemplo) */}
    <nombre de clase principal="flex-1 p-8 desbordamiento-y-auto">
      <h1 className="text-2xl font-bold text-slate-900">Panel de control</h1>
      <p className="text-slate-500 mt-1">Seleccione un elemento de la barra lateral.</p>
    </principal>

</div>
);
}

Soporte del navegador

Funciona bien con las últimas versiones de los navegadores modernos (Chrome, Firefox, Safari, Edge).
Las animaciones transition-all y max-w-0 también se muestran sin problemas en todos los navegadores modernos.