Menús laterales

Los menús laterales (sidebars) son el estándar en paneles de administración, dashboards, documentación y apps con muchas secciones. Ocupan espacio horizontal, que en escritorio sobra, y permiten listas largas de enlaces sin saturar la parte superior.

Sidebar colapsable de dashboard

Cuándo usarlo: paneles de administración, CRMs, sistemas de inventario o cualquier app interna. El usuario puede colapsarlo a sólo iconos para ganar espacio cuando trabaja con tablas o gráficas.

Sidebar colapsable

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --ancho-abierto y --ancho-cerrado controlan los dos estados. El cerrado debe dejar ver sólo el icono (unos 64–72px).
• Agrupa enlaces con títulos (.titulo-grupo) como "Cuenta" o "Configuración" para listas largas.
• Al colapsar, el JS añade title a cada enlace para que aparezca un tooltip nativo con el nombre. Así el menú sigue siendo comprensible sólo con iconos.
• Para recordar la preferencia del usuario entre visitas, guarda el estado en localStorage:

// Al colapsar/expandir
localStorage.setItem('sidebar', cerrar ? 'cerrado' : 'abierto');
// Al cargar la página
if (localStorage.getItem('sidebar') === 'cerrado') colapsar(true);

Sidebar con iconos que se expande al hover

Cuándo usarlo: apps con pocas secciones principales (4–7) donde quieres el máximo espacio para el contenido. Se ve compacto y moderno, y se expande sólo cuando el usuario lo necesita.

Sidebar de iconos con hover

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• La expansión es 100% CSS: .sidebar:hover para el mouse y .sidebar:focus-within para el teclado. No olvides el segundo: sin él, quien navega con Tab nunca vería los textos.
• El sidebar es position: fixed y se superpone al contenido al expandirse (el contenido no salta). Si prefieres que lo empuje, quita el fixed y usa un layout con display: flex.
• transition-delay: .08s en .texto hace que el texto aparezca cuando ya hay espacio, sin verse cortado.
• En pantallas táctiles no existe el hover. Para móvil combínalo con una bottom navigation o un off-canvas.

Navegación con scrollspy

Cuándo usarlo: documentación, artículos largos, páginas de términos y condiciones o landing pages de una sola página. El índice resalta automáticamente la sección que estás leyendo, como el "En esta página" de este mismo sitio.

Scrollspy

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cada enlace apunta a un id de sección (href="#instalacion" → <section id="instalacion">). Para añadir secciones, sólo crea el par enlace + sección.
• El IntersectionObserver detecta qué sección cruza una franja de la pantalla. Ajusta rootMargin: '-20% 0px -70% 0px' para mover esa franja (por ejemplo -40% 0px -55% 0px para activar a media pantalla).
• scroll-behavior: smooth en html hace que el salto al hacer clic sea suave, y scroll-margin-top evita que el título quede pegado o tapado por una barra fija.
• En móvil el índice se convierte en una fila de píldoras desplazable en la parte superior.

Error común

Calcular la sección activa escuchando el evento scroll y leyendo offsetTop de cada sección en cada movimiento. Funciona, pero es costoso. IntersectionObserver hace el mismo trabajo de forma eficiente y con menos código.

Buena práctica

En un sidebar, marca la página actual con aria-current="page" y en un scrollspy con aria-current="location". Y si el sidebar sólo muestra iconos, cada enlace debe tener un nombre accesible (texto oculto visualmente, aria-label o title). Un icono solo no le dice nada a un lector de pantalla.