Componentes de Navigation Menus
Componentes de Navigation Menus listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.
- DiagonalMenu — Menú de navegación con botón hamburguesa que abre un overlay a pantalla completa mediante un barrido diagonal (clip-path polygon) que entra desde una esquina en dos capas (acento + oscura). Dentro, una lista de ítems grandes en serif que aparecen escalonados tras el barrido y una columna secundaria de enlaces pequeños (Archive / Editions / Studio access). El botón se transforma en aspa. En preview auto-abre/cierra en bucle cada ~2.5s. Respeta prefers-reduced-motion con un fundido simple sin diagonal. Solo React + CSS, sin dependencias.
- HoverImageMenu — Menú de navegación vertical con tipografía grande donde el ítem activo revela una tarjeta de preview (gradiente de color por ítem) que persigue al cursor con desfase suave y fundido. Sin ratón, auto-cicla el hover en bucle.
- CornerDrawer — Menú de navegación en pastilla flotante anclado a una esquina que despliega hacia abajo un panel redondeado de color con la lista de enlaces entrando escalonados; el botón muta de barras a aspa con un spring. Auto-abre y cierra en bucle en el preview y respeta prefers-reduced-motion con un fundido simple. Solo React + CSS, sin dependencias.
- StairMenu — Menú de navegación con botón hamburguesa que despliega un overlay a pantalla completa revelado por bandas horizontales en cascada (efecto escalera: cada banda entra desde un lado con retardo creciente formando una diagonal). Dentro aparecen escalonadas las secciones grandes (WORK / STUDIO / PLAYGROUND / CONTACT) y una línea de marquee que desplaza el texto de marca en bucle. En preview se auto-abre y auto-cierra cada ~2,5s; también se controla con el botón. Respeta prefers-reduced-motion con un fundido simple sin bandas ni marquee. Solo React + CSS, sin dependencias.