Construye sidebars claras y mantenibles con layout de dos columnas, estados activos y comportamiento sticky.
Una sidebar bien resuelta mejora navegación y contexto en documentación, paneles y cursos largos.
El patrón habitual combina columna fija + contenido flexible y colapsa en móvil.
Con CSS puedes mantener la sidebar visible en scroll mediante sticky sin romper accesibilidad.
Dos columnas: navegación y contenido.
Define un contenedor grid con una columna fija para navegación y otra flexible para contenido principal.
En pantallas pequeñas, cambia a una sola columna para evitar que la navegación ocupe demasiado ancho.
Mantén contexto de navegación mientras se lee el contenido.
La sidebar puede fijarse con <code>position: sticky</code> y un <code>top</code> adaptado al header.
Resalta el enlace activo con contraste suficiente para orientar al usuario.
Construye sidebars claras y mantenibles con layout de dos columnas, estados activos y comportamiento sticky.
Código del tema: display: grid; gap: 1rem;
Dos columnas: navegación y contenido.
Define un contenedor grid con una columna fija para navegación y otra flexible para contenido principal.
En pantallas pequeñas, cambia a una sola columna para evitar que la navegación ocupe demasiado ancho.
.layout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 1rem;
}
@media (width < 900px) {
.layout { grid-template-columns: 1fr; }
}Mantén contexto de navegación mientras se lee el contenido.
La sidebar puede fijarse con position: sticky y un top adaptado al header.
Resalta el enlace activo con contraste suficiente para orientar al usuario.
.sidebar {
position: sticky;
top: 1rem;
align-self: start;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: .75rem;
}
.sidebar a.is-active {
background: #dbeafe;
color: #1e3a8a;
}