Menús

La navegación es lo primero que alguien usa al entrar a un sitio. Un buen menú hace que el visitante encuentre lo que busca en segundos; uno malo hace que se vaya. Aquí tienes 24 menús listos para copiar, desde la barra de navegación más simple hasta mega menús, sidebars de dashboard y menús radiales.

Todos están hechos con HTML semántico (<nav>, listas, aria-label, aria-expanded, aria-current), funcionan con teclado, son responsive y definen sus colores con variables CSS para que los adaptes a cualquier marca en segundos.

Qué vas a encontrar

• Barras de navegación para escritorio con efectos al hacer scroll.
• Menús móviles: hamburguesa, off-canvas, pantalla completa y navegación inferior.
• Sidebars para paneles de administración.
• Desplegables, menús contextuales, de usuario y con buscador.
• Mega menús para tiendas y sitios con mucho contenido.
• Tabs, breadcrumbs, paginación y menú radial.

Requisitos previos

Para copiar y usar los menús basta con saber pegar HTML, CSS y JS en una página. Para entender y modificar el código a fondo te ayudará conocer HTML semántico, Flexbox, posicionamiento CSS y eventos de JavaScript.

Temario

1. Barras de navegación — navbar simple, logo centrado, transparente que cambia con el scroll, sticky que se oculta al bajar, indicador deslizante y menú tipo píldora.
2. Menús para móvil — hamburguesa animada a X, off-canvas lateral, overlay a pantalla completa y bottom navigation.
3. Menús laterales — sidebar colapsable de dashboard, sidebar de iconos que se expande al hover y navegación con scrollspy.
4. Menús desplegables — dropdown al hover y al clic, multinivel, menú de usuario, menú contextual y menú con búsqueda.
5. Mega menús — mega menú con columnas y mega menú con tarjeta destacada.
6. Tabs, breadcrumbs y más — pestañas accesibles, breadcrumbs, paginación y menú circular/radial.

¿Cuál elijo?

En sitios pequeños (5–6 secciones) una navbar simple con hamburguesa en móvil es suficiente. Reserva los mega menús para tiendas o sitios con muchas categorías, y los sidebars para aplicaciones y paneles de administración.