Drommo
Componente · Navegación

Árbol Empresarial Azul

Prompt

Crea un componente de navegación «Árbol Empresarial Azul» listo para producción usando React, Next.js, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa un patrón tree con orientación horizontal, color principal #38bdf8, secundario #818cf8 y fondo #071325. 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
  • tree
  • horizontal
  • Responsive
  • Website
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