Crear un sidebar o menú lateral con puro CSS

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, en realidad para un menú lateral simple no es necesario. 

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.

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 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.

Se suele utilizar cuando:

• Hay muchas opciones de navegación.
• No quieres saturar la barra superior.
• Necesitas mantener el contenido principal limpio.

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

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

• Puede mostrarse u ocultarse.
• Aprovecha mejor el espacio vertical.
• Funciona muy bien en layouts tipo dashboard o aplicaciones web.

Por qué crear un sidebar solo con CSS

La mayoría de tutoriales combinan HTML + CSS + JavaScript, pero eso no siempre es necesario.

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

Ventajas frente a soluciones con JavaScript

• Menos código y mantenimiento.
• Mejor rendimiento en animaciones.
• No dependes de eventos JS para algo simple.
• Funciona incluso con JS desactivado.

Además, cuando probé este enfoque por primera vez, comprobé que para menús pequeños o demostrativos es más que suficiente y mucho más didáctico.

Limitaciones de un sidebar sin JS

Eso sí, conviene ser honesto:

• No podrás manejar estados complejos.
• No es ideal para menús con lógica avanzada.
• En móviles, el hover tiene limitaciones.

Más adelante veremos cuándo sí merece la pena usar JavaScript.

Estructura HTML básica para un menú lateral

Empezamos definiendo una estructura HTML sencilla. Nada de elementos innecesarios.

<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 punto de referencia para el posicionamiento absoluto del menú lateral. Dentro, el elemento <nav> contiene los enlaces de navegación, organizados en columna.

Creando el sidebar con CSS paso a paso

Evitando el scroll horizontal con overflow: Uno de los primeros problemas que me encontré al ocultar el menú fuera del viewport fue el scroll horizontal indeseado. Para solucionarlo, basta con ocultar el desbordamiento del contenedor.

Y el CSS, vamos a crear un contenedor, que para evitar el desplazamiento lateral, ocultamos el contenido:

  .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.

Posicionando el menú fuera del viewport

Para el menú lateral, será una caja oculta a la derecha con un sobresaliente para poder posicionarse sobre el mismo:

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

• right: 100% para colocarlo completamente fuera.
• Un pequeño translateX para dejar un “agarre” visible.

Animaciones suaves con transform y transition

En lugar de mover el menú con left o right, utilizo transform. Esto no es casualidad.

• transform: translateX() ofrece animaciones más fluidas, ya que el navegador puede optimizarlas mejor y evita recalcular el layout completo.

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

Al posicionarse sobre el mismo, activamos el efecto hover, en el cual desplazamos mediante las traslaciones en CSS en el eje de las X:

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

Esto permite que:

• El menú se muestre al pasar el ratón.
• También funcione con teclado gracias a focus-within.
• Accesibilidad y navegación con teclado

Aquí es donde este enfoque supera a muchos ejemplos tradicionales. Al usar focus-within, cualquier usuario que navegue con teclado puede acceder al menú sin JavaScript, algo que rara vez se menciona en otros tutoriales.

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 móviles, el hover no existe como tal. Si necesitas compatibilidad total:
    • Puedes combinar este enfoque con :checked y un checkbox oculto.
    • O usar JS solo para móviles.
• Cuándo sí tiene sentido usar JavaScript
• Usar JavaScript está justificado cuando:
  • El menú depende de estados complejos.
  • Necesitas persistencia (abrir/cerrar).
  • El sidebar controla contenido dinámico.

Incluso en esos casos, este ejemplo sigue siendo una base excelente.

❓ FAQs rápidas

• ¿Se puede hacer un sidebar solo con CSS?
  • Sí, siempre que el comportamiento sea simple.
• ¿Es mejor transform que left?
  • Para animaciones, sí. Es más fluido y eficiente.
• ¿Funciona en móviles?
  • Funciona, pero el hover tiene limitaciones. Conviene adaptarlo.

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 focus-within, puedes construir un menú funcional, accesible y fácil de mantener.

En mi caso, este enfoque me ha servido para demostrar que muchas interacciones simples pueden resolverse con CSS, simplificando el código y mejorando la comprensión del layout.