Drommo
Componente · Navegación

Mega Menú Océano

Prompt

Crea un componente de navegación «Mega Menú Océano» listo para producción usando React, Next.js, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa un patrón mega con orientación vertical, color principal #0ea5e9, secundario #14b8a6 y fondo #effcff. Incluye datos tipados, ruta activa, elementos anidados, badges, iconos, opciones deshabilitadas, navegación por teclado y comportamiento responsive. Implementa disclosure con aria-expanded y aria-controls, landmarks nav semánticos, roving tabindex cuando corresponda, Escape, clic exterior, restauración del foco, objetivos táctiles de 44px y contraste WCAG AA. Evita menús disponibles solo en hover y links/botones anidados inválidos. Soporta carga, permisos, vacío y estado colapsado. Anima transform/opacity, respeta movimiento reducido y evita layout shift. Devuelve código, demo, dependencias, integración de rutas y pruebas.

Tipo
Componente · Navegación
Tecnología
React, Next.js, TypeScript, Tailwind CSS
  • Navigation
  • mega
  • vertical
  • Responsive
  • App
Crear en Drommo

«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.

Ideas parecidas