¿Cómo agregar migas de pan a una aplicación de Bubble.io?

Agregar migas de pan a tu aplicación Bubble.io es un proceso sencillo. Las migas de pan son una ayuda de navegación que muestra a los usuarios su ubicación dentro de una aplicación y les permite moverse fácilmente a través de su jerarquía. Aquí te explicamos cómo puedes crear tu propia navegación con migas de pan:

Paso 1: Diseña los Elementos de las Migas de Pan

• Primero, crea un nuevo grupo en tu página donde te gustaría que aparezcan las migas de pan. Este contendrá tus enlaces de migas de pan.
• Dentro de este grupo, agrega elementos de texto para cada nivel de la miga de pan. Por ejemplo, "Inicio > Categoría > Subcategoría > Artículo".
• Dale estilo a cada elemento de texto para que coincida con el diseño de tu aplicación. Para el "Inicio", es posible que quieras agregar un icono también.

Paso 2: Configurar Datos Dinámicos

• Cada elemento de texto que representa un nivel en las migas de pan debe ser dinámico, reflejando la navegación del usuario a través de la aplicación.
• Usa las expresiones de datos dinámicos de Bubble para llenar cada parte de la miga de pan con datos de la base de datos. Por ejemplo, si el nombre de tu categoría se guarda en un campo en el tipo de datos del usuario, usarías "Categoría del usuario actual".

Paso 3: Permitir a los Usuarios Navegar con Migas de Pan

• Haz que cada elemento de texto en tus migas de pan sea clickeable utilizando la acción de flujo de trabajo "Enlace" o "Navegar a la página".
• Para cada elemento de texto, añade un flujo de trabajo que navega a la página correspondiente cuando se hace clic en el elemento. Asegúrate de pasar cualquier dato necesario a la página usando parámetros de URL o consultas a la base de datos.

Paso 4: Gestiona la Visibilidad y la Posicion

• Usa condiciones para mostrar y ocultar diferentes partes de las migas de pan basado en donde se encuentra el usuario en la aplicación. Por ejemplo, si el usuario está en la página de inicio, solo la parte "Inicio" de la miga de pan debe ser visible.
• Asegúrate de que el grupo que contiene tus migas de pan se colapse cuando los elementos de la miga de pan están ocultos, para que no ocupe espacio innecesariamente. Esto se puede hacer marcando la opción "Colapsar la altura de este elemento cuando esté oculto" en las propiedades del grupo.

Paso 5: Prueba Tus Migas de Pan

• Después de configurar tus migas de pan, navega a través de tu aplicación para probarlas. Asegúrate de que se están mostrando las migas de pan correctas para cada página y que al hacer clic en ellas te lleva a la ubicación correcta.

Paso 6: Afinar el Diseño

• Una vez que la funcionalidad de las migas de pan esté funcionando, puedes pasar un tiempo afinando el diseño. Considera agregar efectos de desplazamiento sobre el elemento, cambiar colores basados en la miga de pan activa, o agregar iconos separadores entre los niveles de la miga de pan para mejorar la usabilidad.

Recuerda que las migas de pan deben mejorar la experiencia del usuario, facilitándole navegar y entender dónde están dentro de tu aplicación. Mantén tu rastro de migas de pan actualizado a medida que añades o quitas páginas de tu aplicación para garantizar una navegación coherente y fácil de usar.