Esta sección describe los menús con desplazamiento y cómo usar el mecanismo con otros elementos.
Crear un menú grande
Te preguntarás qué sucede si creas un menú con muchas opciones en él, de tal forma que no todos los ítems aparezcan en la pantalla a la vez. Mozilla 
proveerá un mecanismo de despliegue que te permitirá moverte a través de los ítems.
Si el espacio disponible es demasiado pequeño, aparecerán flechas al final de cada menú. Si mueves el ratón sobre las flechas, el menú se desplegará hacia abajo o hacia arriba. Si el espacio disponible es lo suficientemente grande, las flechas no aparecerán. Observa que el comportamiento exacto de este mecanismo dependerá del tema actual.
Este comportamiento es automático. No tienes que hacer nada para obtener menús desplegables. Se aplicará a menús en barras de menú, en emergentes o listas de menús. Se implementa usando un elemento arrowscrollbox. Este elemento puede usarse para crear cajas desplegables con flechas.
El elemento arrowscrollbox puede usarse en cualquier lugar donde se pueda usar una caja normal. No tienes que usarlo en menús. Siempre es un caja vertical y puede contener cualquier elemento en su interior. Puedes usarlo para implementar una lista cuando no deseas hacer un menú desplegable.
Ejemplo - lista de botones con desplazamiento
El siguiente ejemplo muestra cómo crear una lista desplegable de botones (tendrás que redefinir el tamaño de la ventana para ver los botones de flechas):
Ejemplo 1: Código Ver en funcionamiento
<arrowscrollbox orient="vertical" flex="1"> <button label="Rojo"/> <button label="Azul"/> <button label="Verde"/> <button label="Amarillo"/> <button label="Naranja"/> <button label="Plata"/> <button label="Lavenda"/> <button label="Oro"/> <button label="Turquesa"/> <button label="Melocotón"/> <button label="Marrón"/> <button label="Negro"/> </arrowscrollbox>
Si pruebas este ejemplo, primero abrirá a tamaño total. Sin embargo, si encoges el alto de la ventana, las flechas de despliegue aparecerán. Al volver a hacer la ventana más grande, las flechas desaparecerán.
Puedes establecer una altura máxima usando la propiedad CSS max-height en el arrowscrollbox para limitar el tamaño de la caja de despliegue y así hacer que las flechas aparezcan todo el tiempo.
El arrowscrollbox es principalmente útil en menús y emergentes.
A continuación veremos cómo añadir gestores de eventos a elementos XUL.