Diseñar un menú lateral colapsable en Bubble es uno de esos detalles que transforma una aplicación funcional en una experiencia fluida. Aquí aprenderás a configurar la altura dinámica de los grupos, aplicar el comando Toggle y activar la opción de colapso para que el contenido se reorganice de forma natural cuando ocultas el menú.

¿Cómo extender la altura de los grupos hasta el final de la pantalla?

Antes de animar nada, necesitas que los grupos ocupen todo el alto disponible. Y aquí entra en juego una propiedad muy concreta del layout en Bubble.

El punto de partida es el grupo dashboard, que contiene a su vez los grupos menú lateral y bandeja de entrada. Si te pierdes navegando entre tantos elementos, abre el árbol de elementos y despliega el group dashboard: ahí verás la jerarquía completa [01:00].

Para que los grupos se estiren correctamente, sigue estos pasos:

• Selecciona el group dashboard y desmarca la opción de alinear la altura con el contenido. Esto desactiva el ajuste dinámico que limita el alto.
• Selecciona el grupo del menú lateral y, en vertical alignment, elige vertical stretch para que ocupe toda la altura.
• Repite el mismo ajuste con el grupo de la derecha, la bandeja de entrada.

Con esto, ambos grupos llegan hasta el borde inferior de la pantalla y quedan listos para la siguiente fase.

¿Cómo crear un workflow con Toggle para mostrar y ocultar el menú?

La idea es replicar el comportamiento clásico: presionas la hamburguesa, el menú se desliza y desaparece. Vuelves a presionar y reaparece. En Bubble esto se logra con un workflow sencillo.

Haz clic derecho sobre el icono de hamburguesa y selecciona Start Edit Workflow. Esta es una alternativa al botón del editor de propiedades que ya usaste en la creación del pop-up, y te lleva al mismo lugar desde el menú contextual [03:10].

Una vez dentro, organiza tu workflow con buenas prácticas:

• Asigna un color que tenga significado para ti.
• Ubícalo en la carpeta cabecera, porque el icono pertenece a esa zona.
• Añade una acción desde Element Actions.

En lugar de usar Show, elige Toggle. Esta acción cambia la visibilidad de un elemento según su estado actual: si está visible lo oculta, y si está oculto lo muestra.

¿Qué hace el comando Toggle en Bubble? Alterna la visibilidad de un elemento según su estado. Si el elemento está visible, lo oculta. Si está oculto, lo muestra. Es ideal para menús desplegables o paneles laterales.

En el campo del elemento a alternar, escribe menú y Bubble filtrará automáticamente la lista para que selecciones el grupo correcto [04:20].

¿Por qué cambiar los colores de los grupos antes de probar?

Un truco práctico antes de hacer preview: dale colores distintos al menú lateral y a la bandeja de entrada. Así verás con claridad cómo se comporta cada grupo cuando aplicas el toggle. Después podrás regresarlos a su estilo original.

¿Cómo evitar el espacio en blanco cuando el menú se oculta?

Al probar el workflow notarás algo extraño: el menú desaparece, pero deja un hueco vacío. El otro grupo no se expande para ocuparlo. Y aquí está el detalle que marca la diferencia.

Vuelve al editor, selecciona el grupo del menú y abre la pestaña Layout. Ahí encontrarás una opción que dice colapsar cuando está oculto. Marca esa casilla y prueba de nuevo [05:40].

Ahora cuando ocultas el menú, la bandeja de entrada se expande y ocupa todo el ancho disponible. Justo el comportamiento que esperabas.

¿Qué significa colapsar cuando está oculto en Bubble? Es una propiedad del layout que hace que un elemento no solo desaparezca visualmente, sino que también libere el espacio que ocupaba para que otros elementos se reorganicen.

Una vez confirmado el efecto, devuelve el grupo del menú a su color original, que es #FAFAFA, y elimina el color temporal de la bandeja de entrada.

¿Cómo organizar los elementos internos del menú lateral?

Dentro del menú lateral hay dos bloques principales:

• Cuatro selectores que sirven para filtrar las tareas visualizadas.
• Un grupo de proyectos ubicado debajo.

Todos los elementos están apilados verticalmente, lo que indica que el menú usa un layout tipo columna. En la pestaña Layout, confirma que esté configurado como columna.

A partir de aquí, la mecánica es la misma que aplicaste al construir la cabecera: crear grupos que contienen iconos y texto, ajustar alineaciones y respetar la jerarquía visual.

¿Te animas a construir los selectores y el grupo de proyectos por tu cuenta? Comparte en los comentarios cómo te fue y qué decisiones tomaste con el layout.