≡En resumen
- Un flyout muestra contenido adicional pegado al elemento que lo abre y desaparece en cuanto el usuario pulsa fuera.
- A diferencia de un modal, no bloquea el resto de la pantalla ni exige una respuesta.
- En navegación web, los menús flyout y los mega menús ayudan a organizar muchas secciones sin saturar la cabecera.
- Para que sea usable conviene un pequeño retardo al abrir y al cerrar con el ratón, y que funcione con clic y teclado, no solo con hover.
- En inglés, «fly out» también significa salir en avión y, en béisbol, un out por bola elevada atrapada.
01 ¿Qué es un flyout?
En diseño de interfaces, un flyout (del inglés to fly out, «salir volando») es un elemento que «sale» de otro: pulsas un botón o pasas el ratón por una opción del menú y aparece, a su lado, un panel con más opciones, un formulario breve o información de apoyo. Cuando terminas o haces clic en cualquier otra parte, el panel se esconde.
Microsoft, que usa el término de forma oficial en su documentación para desarrolladores de Windows, lo define como un contenedor de cierre ligero (light dismiss) que puede mostrar cualquier contenido e incluso contener otros flyouts o menús contextuales anidados.
Contextual
Aparece junto al elemento que lo activa, así el usuario entiende a qué pertenece.
Temporal
Solo está visible mientras se usa; no ocupa espacio permanente en la pantalla.
No bloqueante
El resto de la interfaz sigue ahí y un clic fuera basta para cerrarlo.
02 Tipos de flyout y ejemplos habituales
El término se usa para varios patrones que comparten la misma idea. Estos son los que encontrarás con más frecuencia:
| Tipo | Cómo se abre | Ejemplo |
|---|---|---|
| Menú flyout (submenú) | Hover o clic sobre una opción del menú | Productos > Portátiles > Gaming en la cabecera de una tienda |
| Mega menú | Hover o clic en la navegación principal | Panel ancho con varias columnas de categorías e imágenes |
| Panel de acciones | Clic en un botón o icono | Opciones de compartir o filtros de una lista |
| Flyout de ajustes rápidos | Clic en un icono de la barra | Volumen, wifi o calendario en la barra de tareas de Windows |
| Vista previa | Clic o hover sobre una miniatura | Imagen ampliada o ficha resumida de un producto |
| Menú lateral desplegable | Botón de menú (icono hamburguesa) | Navegación que se desliza desde un lateral en móvil |
03 Flyout, dropdown, tooltip, pop-up y modal: diferencias
Son componentes parecidos y a menudo se confunden. La clave está en cuánto contenido muestran, cómo se abren y si interrumpen o no al usuario:
| Componente | Qué muestra | ¿Bloquea la pantalla? | Cómo se cierra |
|---|---|---|---|
| Flyout | Opciones, contenido o controles relacionados con un elemento | No | Clic fuera, Escape o nueva acción |
| Dropdown (desplegable) | Una lista de opciones para elegir o navegar | No | Al elegir una opción o clic fuera |
| Tooltip | Una descripción breve de un elemento | No | Solo al retirar el cursor o el foco |
| Pop-up | Mensajes o promociones que aparecen sin que el usuario los pida | A veces | Botón de cerrar |
| Modal (diálogo) | Una tarea o decisión que requiere respuesta | Sí | Botón de aceptar, cancelar o cerrar |
04 El flyout en Windows y en el desarrollo de apps
En el ecosistema de Microsoft, Flyout es un control concreto de WinUI (el marco de interfaz para apps de Windows), junto a variantes como MenuFlyout para menús y CommandBarFlyout para barras de comandos. Se asocia a un botón u otro elemento y puede colocarse arriba, abajo, a la izquierda, a la derecha o a pantalla completa.
Según la documentación de Microsoft, basta con declarar el flyout dentro del botón que lo abre: <Button Content="Opciones"><Button.Flyout><Flyout>…</Flyout></Button.Flyout></Button>. Al pulsar el botón aparece el panel y se cierra al tocar fuera, pulsar Escape o el botón Atrás.
El mismo patrón existe en Android, iOS y los frameworks multiplataforma con nombres distintos (menús emergentes, popovers, hojas de acciones). Si estás planteando un producto propio, conviene definirlo desde el principio del desarrollo de apps a medida para que se comporte igual en todas las plataformas.
05 Menús flyout en diseño web: ventajas e inconvenientes
En una web, el flyout más habitual es el submenú de la navegación principal. Bien resuelto, ordena mucho contenido; mal resuelto, es una de las mayores fuentes de frustración, sobre todo en móvil y para quien navega con teclado.
| Ventajas | Inconvenientes |
|---|---|
| Ahorran espacio en la cabecera | Esconden opciones: lo que no se ve se usa menos |
| Muestran la jerarquía de secciones de un vistazo | Con hover se abren sin querer al mover el ratón |
| Dan acceso directo a páginas profundas | Los submenús anidados son difíciles de recorrer con precisión |
| Permiten incluir imágenes y destacados en mega menús | En pantallas táctiles no existe el hover |
La decisión de cuántos niveles mostrar y qué va en cada panel es parte del diseño web a medida: no hay una plantilla que sirva para todas las webs. Hoy, además, HTML incluye el atributo popover, compatible con los navegadores principales desde 2024, que facilita crear paneles con cierre ligero sin tanto JavaScript.
06 Buenas prácticas de UX para un flyout usable
Los estudios de usabilidad han dado cifras concretas para que los menús que se abren con el cursor no aparezcan ni desaparezcan por accidente:
0,3-0,5 s
Tiempo que debe permanecer el cursor antes de abrir un contenido con hover
Fuente: Nielsen Norman Group, «Timing Guidelines for Exposing Hidden Content»
0,5 s
Margen antes de ocultarlo cuando el cursor sale del área
Fuente: Nielsen Norman Group, «Timing Guidelines for Exposing Hidden Content»
0,1 s
Tiempo máximo para mostrar feedback visual al pasar el cursor
Fuente: Nielsen Norman Group, «Timing Guidelines for Exposing Hidden Content»
1 s
Retardo de cierre de submenús usado en el ejemplo del tutorial de accesibilidad del W3C
Fuente: W3C Web Accessibility Initiative, tutorial «Fly-out Menus»
- ✓Indica con un icono (flecha o chevron) qué opciones abren un submenú.
- ✓Abre con clic o toque y usa el hover solo como atajo en escritorio.
- ✓Evita más de dos niveles de submenús anidados.
- ✓Haz las zonas de clic amplias para que el cursor no se «caiga» al moverse en diagonal hacia el panel.
- ✓Cierra el panel al pulsar fuera, al pulsar Escape y al elegir una opción.
- ✓Comprueba en móvil que el flyout no queda cortado por el borde de la pantalla.
Estas pautas mejoran directamente la usabilidad de la navegación y se validan mejor con pruebas con usuarios reales que con suposiciones. Un proyecto de diseño de interfaces web UI y UX suele incluir precisamente ese tipo de test.
07 Accesibilidad de los menús flyout
El W3C advierte que las personas con destreza reducida, por ejemplo con temblores, suelen tener problemas con los menús flyout, y que quien navega con teclado no puede depender del hover. Su tutorial propone estos pasos:
-
1
Marca los elementos con submenú
Indícalo visualmente y en el código, con aria-expanded="false" mientras el submenú está oculto.
-
2
No abras submenús al tabular
Al recorrer el menú con Tab, los submenús no deben abrirse solos; obligaría a pasar por todas sus opciones.
-
3
Usa el elemento padre o un botón como conmutador
Si la opción principal es un enlace, añade un botón aparte que abra y cierre el submenú.
-
4
Actualiza el estado
Cambia aria-expanded a «true» al abrir y a «false» al cerrar para que los lectores de pantalla lo anuncien.
-
5
Da tiempo al ratón
Añade un retardo antes de cerrar el submenú para que un movimiento impreciso no lo oculte.
08 Fly out: otros significados del término
Parte de quienes buscan «flyout» o «fly out» no llegan desde el diseño web. En inglés la expresión tiene otros usos frecuentes:
Verbo en inglés
«To fly out» significa salir en avión o partir volando hacia un lugar: «We fly out to Madrid tomorrow» (mañana volamos a Madrid).
Béisbol
Un «flyout» es un out que se produce cuando un jugador defensivo atrapa en el aire una bola bateada elevada.
Software en general
En muchos programas se llama así a cualquier panel emergente, aunque cada fabricante use su propio nombre para el componente.
Preguntas frecuentes sobre Flyout
Es un panel o menú emergente que aparece junto al elemento que lo activa, al hacer clic, tocar o pasar el cursor, y se cierra al pulsar fuera o la tecla Escape.
Es un submenú que se despliega al lado de una opción de la navegación principal, normalmente hacia la derecha o hacia abajo, para mostrar las secciones que contiene.
El modal bloquea el resto de la pantalla y exige una respuesta; el flyout no interrumpe y se cierra con un simple clic fuera.
Son muy parecidos. El dropdown suele ser una lista de opciones que se despliega hacia abajo, mientras que flyout es un término más amplio que incluye paneles con cualquier contenido y submenús laterales.
Sí, siempre que se abran con un toque y no dependan del hover, que no existe en pantallas táctiles. En móvil suelen transformarse en menús laterales o acordeones.
Nielsen Norman Group recomienda esperar entre 0,3 y 0,5 segundos antes de mostrarlo y mantenerlo visible 0,5 segundos después de que el cursor salga del área.
Como verbo significa salir o partir en avión. En béisbol, un flyout es el out que se produce cuando se atrapa en el aire una bola bateada elevada.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗