Drommo
Componente · Navegación

Navegación HUD Cyber

Prompt

Crea un componente de navegación «Navegación HUD Cyber» listo para producción usando React, Next.js, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa un patrón hud con orientación responsive, color principal #f59e0b, secundario #fb7185 y fondo #fffbeb. 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
  • hud
  • responsive
  • Accessible
  • 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

Navegación

Dock IA Violeta