Cómo crear un sidebar con HTML y puro CSS — menú lateral sin JavaScript

Crear un sidebar o menú lateral con CSS es una solución mucho más viable de lo que muchos piensan. Aunque la mayoría de ejemplos que encontrarás en internet recurren directamente a JavaScript, para un menú lateral simple no es necesario en absoluto.

Con una buena combinación de posicionamiento, transformaciones y pseudo-clases, se puede conseguir un resultado limpio, funcional y accesible usando solo HTML y CSS. Sin una sola línea de JavaScript.

En este artículo te muestro cómo crear un menú lateral solo con CSS, explicando cada decisión técnica y el porqué detrás de ella, para que no te limites a copiar código sino que lo entiendas y puedas adaptarlo a tus proyectos.

Qué es un sidebar o menú lateral y cuándo usarlo

Un sidebar —también llamado barra lateral o menú lateral— es un elemento de navegación que se sitúa normalmente en uno de los lados de la pantalla (izquierda o derecha) y que agrupa enlaces, acciones o secciones secundarias de una web. Es uno de los patrones de UI más utilizados en dashboards, paneles de administración y aplicaciones web complejas.

Se suele utilizar cuando:

Hay muchas opciones de navegación que no caben cómodamente en una barra superior.
No quieres saturar el header con demasiados enlaces.
Necesitas mantener el contenido principal limpio y con el protagonismo visual que merece.

Diferencia entre menú lateral y barra de navegación tradicional

Mientras que una barra de navegación horizontal suele estar siempre visible y ocupa espacio horizontal, el menú lateral:

Puede mostrarse u ocultarse bajo demanda, ganando espacio para el contenido.
Aprovecha mejor el espacio vertical de la pantalla.
Funciona especialmente bien en layouts tipo dashboard o aplicaciones web con muchas secciones.

Por qué crear un sidebar solo con CSS

La mayoría de tutoriales que encontrarás combinan HTML + CSS + JavaScript, pero eso no siempre es necesario ni la mejor opción.

En este ejemplo opté por no usar JavaScript porque el comportamiento básico del menú —mostrar y ocultar— se puede resolver perfectamente con CSS puro, reduciendo complejidad, dependencias y posibles puntos de fallo.

Ventajas frente a soluciones con JavaScript

Menos código y, en consecuencia, menos mantenimiento a largo plazo.
Mejor rendimiento en animaciones: el navegador las gestiona de forma nativa y optimizada.
No dependes de eventos JS para algo que es simplemente mostrar u ocultar un elemento.
Funciona incluso con JavaScript desactivado en el navegador del usuario.

Además, cuando probé este enfoque por primera vez comprobé que para menús pequeños o demostrativos es más que suficiente y, sobre todo, mucho más didáctico para entender cómo funciona el layout.

Limitaciones de un sidebar sin JavaScript

Eso sí, conviene ser honesto sobre las limitaciones reales:

No podrás manejar estados complejos ni persistentes (por ejemplo, recordar si el menú estaba abierto o cerrado).
No es ideal para menús con lógica avanzada, como submenús anidados dinámicos.
En dispositivos móviles, la pseudo-clase :hover tiene limitaciones importantes, ya que táctil no es lo mismo que ratón.

Más adelante veremos cuándo sí merece la pena introducir JavaScript para complementar este enfoque.

Estructura HTML básica para un menú lateral

Empezamos definiendo una estructura HTML sencilla. Nada de elementos innecesarios: un div contenedor y un <nav> con los enlaces. Limpio y semántico.

<div class="container">
  <nav>
    <a href=".">Option 1</a>
    <a href=".">Option 2</a>
    <a href=".">Option 3</a>
    <a href=".">Option 4</a>
  </nav>
</div>

Contenedor principal y enlaces de navegación

El div.container actúa como marco visual y, lo más importante, como punto de referencia para el posicionamiento absoluto del menú lateral. Al aplicarle position: relative, cualquier elemento hijo con position: absolute se posicionará respecto a él y no respecto al viewport. Dentro, el elemento <nav> contiene los enlaces de navegación, organizados en columna mediante flex-direction: column.

Creando el sidebar con CSS paso a paso

Evitando el scroll horizontal con overflow

Uno de los primeros problemas que aparecen al ocultar el menú fuera del viewport es el scroll horizontal indeseado. El navegador, al detectar que hay contenido más allá del borde visible, activa automáticamente la barra de scroll horizontal. Para solucionarlo, basta con ocultar el desbordamiento en el contenedor:

  .container {
    overflow: hidden;
    position: relative;
    height: 15em;
    max-width: 25em;
    margin: auto;
    border: 0.2em solid black;
  }

El simple uso de overflow: hidden eliminó cualquier desplazamiento lateral extraño. Es una de esas propiedades que parece obvia en retrospectiva, pero que no siempre se tiene en cuenta cuando se trabaja con elementos posicionados fuera del flujo normal.

Posicionando el menú fuera del viewport

El menú lateral será una caja oculta a la izquierda del contenedor, con un pequeño "agarre" visible que invite al usuario a interactuar. Para conseguirlo usamos position: absolute y lo empujamos fuera del área visible con right: 100%:

  nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 100%;
    padding: 1em;
    background-color: skyblue;
  
    transform: translateX(1em);
    transition: 0.2s transform;
  }

right: 100% coloca el <nav> completamente fuera del contenedor, hacia la izquierda. Al estar combinado con overflow: hidden, permanece invisible.
El pequeño translateX(1em) desplaza ligeramente el menú hacia la derecha, dejando un pequeño "agarre" visible en el borde izquierdo del contenedor. Así el usuario sabe que hay algo ahí.

Animaciones suaves con transform y transition

En lugar de animar el menú modificando las propiedades left o right, utilizo transform: translateX(). Esto no es casualidad: es la forma más eficiente de animar el movimiento en CSS.

transform: translateX() ofrece animaciones más fluidas porque el navegador puede delegarlas al compositor gráfico (GPU), evitando recalcular el layout completo en cada frame. Propiedades como left, right, top o bottom sí fuerzan ese recálculo, lo que puede producir animaciones entrecortadas en dispositivos lentos.

La propiedad transition: 0.2s transform hace que el desplazamiento se anime suavemente en 200 milisegundos, dando esa sensación de menú que "se desliza" de forma natural.

Mostrar y ocultar el menú con `:hover` y `:focus-within`

Al posicionarse sobre el menú, activamos el efecto :hover y desplazamos el <nav> hacia dentro del contenedor mediante una traslación en el eje X:

  nav:hover,
  nav:focus-within {
    transform: translateX(100%);
  }

Esto permite que:

El menú se muestre al pasar el ratón por encima.
También funcione con teclado, gracias a la pseudo-clase :focus-within.

Accesibilidad y navegación con teclado

Aquí es donde este enfoque realmente supera a muchos ejemplos tradicionales. Al usar :focus-within, cualquier usuario que navegue con el teclado (usando la tecla Tab) puede acceder al menú sin necesidad de JavaScript. Cuando el foco recae sobre cualquier enlace dentro del <nav>, la pseudo-clase se activa y el menú se despliega automáticamente. Es un detalle de accesibilidad que rara vez se menciona en otros tutoriales, y que no cuesta nada implementar.

Código completo del sidebar con CSS

Finalmente, el código completo para que lo puedas probar y personalizar:

<div class="container">
  <nav>
    <a href=".">Option 1</a>
    <a href=".">Option 2</a>
    <a href=".">Option 3</a>
    <a href=".">Option 4</a>
  </nav>
</div>
 
<style>
  .container {
    overflow: hidden;
    position: relative;
    height: 15em;
    max-width: 25em;
    margin: auto;
    border: 0.2em solid black;
  }
 
  nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 100%;
    padding: 1em;
    background-color: skyblue;
 
    transform: translateX(1em);
    transition: 0.2s transform;
  }
 
  nav:hover,
  nav:focus-within {
    transform: translateX(100%);
  }
 
  a {
    white-space: pre;
    color: black;
  }
 
  p {
    font-size: 2em;
    text-align: center;
  }
</style>

Consejos para mejorar y adaptar el sidebar

Responsive y comportamiento en móviles

En dispositivos móviles, el evento :hover no existe de la misma forma que en escritorio: el toque táctil no activa esta pseudo-clase de manera persistente. Si necesitas compatibilidad total en móviles, tienes dos opciones igualmente válidas:

Combinar este enfoque con la pseudo-clase :checked y un <input type="checkbox"> oculto. El checkbox actúa como interruptor de estado sin necesidad de JavaScript: cuando está marcado, el menú aparece; cuando no, se oculta.
Usar JavaScript solo para dispositivos móviles, añadiendo o eliminando una clase CSS mediante classList.toggle(), y dejando el comportamiento CSS puro para escritorio.

Cuándo sí tiene sentido usar JavaScript

Este ejemplo es una base excelente, pero hay situaciones en las que JavaScript es la herramienta correcta:

El menú depende de estados complejos o variables de la aplicación.
Necesitas persistencia: que el menú recuerde si estaba abierto o cerrado al recargar la página.
El sidebar controla o renderiza contenido dinámico que cambia según la interacción del usuario.
Debes gestionar múltiples submenús anidados con lógica de apertura/cierre independiente.

Incluso en esos casos, la estructura HTML y CSS de este ejemplo sigue siendo una base sólida sobre la que construir.

Preguntas frecuentes sobre el sidebar en CSS

¿Se puede hacer un sidebar solo con CSS?

Sí, siempre que el comportamiento sea simple (mostrar/ocultar al hover o al recibir el foco). Para comportamientos más complejos o persistentes, necesitarás JavaScript o la técnica del :checked con un checkbox oculto.

¿Es mejor usar transform que left para animar el menú?

Para animaciones, definitivamente sí. transform: translateX() es más fluido y eficiente porque el navegador puede optimizarlo a nivel de GPU, sin forzar un recálculo del layout en cada frame. Usar left o right puede causar animaciones entrecortadas.

¿Funciona este sidebar en dispositivos móviles?

El menú funciona, pero el :hover tiene limitaciones en pantallas táctiles. Para móviles conviene adaptarlo usando la técnica del :checked con un checkbox oculto, o añadir una pequeña capa de JavaScript.

¿Qué es :focus-within y para qué sirve aquí?

:focus-within es una pseudo-clase de CSS que se activa cuando cualquier elemento descendiente del selector tiene el foco. En este caso, cuando el usuario navega con el teclado y el foco llega a un enlace dentro del <nav>, el menú se despliega automáticamente. Es la clave de la accesibilidad de este ejemplo.

¿Puedo hacer que el sidebar esté en el lado izquierdo en lugar del derecho?

Sí. Cambia right: 100% por left: 100% en el <nav> y ajusta el valor de translateX() en consecuencia (usa un valor negativo como translateX(-1em) para el agarre visible).

Conclusión

Crear un sidebar o menú lateral con CSS es perfectamente posible sin recurrir a JavaScript. Con un buen uso de position, transform, transition y pseudo-clases como :hover y :focus-within, puedes construir un menú funcional, accesible y fácil de mantener con muy poco código.

En mi caso, este enfoque me ha servido para demostrar que muchas interacciones simples —que la mayoría resuelve con JavaScript por inercia— pueden resolverse directamente con CSS, simplificando el código, reduciendo dependencias y mejorando la comprensión del layout. La próxima vez que necesites un menú lateral, prueba primero con CSS puro: puede que te sorprenda lo lejos que llega.