In this article, we’ll look at ways to make conditional visibility implementations in Bubble robust and easier to manage.

Using groups strategically

This article assumes you know how to apply visibility conditions to Groups containing multiple elements (navigation links, buttons, welcome message). This is a core best practice.

Instead of adding the same conditional logic to ten different buttons or text elements, you add it once to the parent group. When the group hides, all its contents hide with it.

This keeps your element tree cleaner and makes your logic easier to manage and debug.

Think of groups as containers for sections of content that share the same visibility rules.

Leverage custom states for complex visibility

Sometimes, whether an element should be visible depends on something not directly tied to a standard element property or user state. This is where Custom States are invaluable.

What is a custom state? A custom state is temporary data stored on an element or the page itself. Think of it as a temporary variable. It exists only while the page is loaded.

Why use it for visibility?

• To control visibility based on user interaction (like clicking a button to toggle a menu).
• To manage complex multi-step processes where visibility changes based on which step the user is on.
• When multiple workflows or conditions need to influence the same element's visibility.

Example: Toggling a mobile menu

Let's make that icon toggle a menu.

• Setup: Create a Group for your mobile menu content (Group Mobile Menu). Place links inside it. Position it where you want it to appear (e.g., slide in from the left). Under Layout, uncheck "This element is visible on page load."

• Create a custom state:

  • Select the Page itself in the editor.

  • Open its property editor (Page Index or whatever your page is called).

  • Click the (i) info icon next to the element name at the top.

  • Click Add a new custom state.

  • Name it is_mobile_menu_open.

  • Set the State type to yes / no.

  • Click Create.

    

• Workflow to toggle the state:

  • Select the Button Mobile Menu Icon.
  • Go to the Workflow tab.
  • Click "Click here to add an action..."
  • Go to Element Actions -> Set state of an element.
  • Element: Select Page Index (or your page name).
  • Custom state: Select is_mobile_menu_open.
  • Value: Click in the value box. Select Page Index's is_mobile_menu_open then add the operator is "no". This means "set the state to yes if it's currently no, and no if it's currently yes". This simple expression toggles the boolean state. Alternatively, you can use the not operator: not Page Index's is_mobile_menu_open.
  • So the Value is: not Page Index's is_mobile_menu_open.

• Conditional logic on the menu group:

  • Select Group Mobile Menu.

  • Go to the Conditional tab.

  • Click Define another condition.

  • Click where it says "Click here to define a condition".

  • Select the Page element: Page Index.

  • Select the custom state: 's is_mobile_menu_open.

  • Set the value: is "yes".

    • Condition: Page Index's is_mobile_menu_open is "yes"

  • Click where it says "Click here to define another property."

  • Select This element is visible.

  • Set the value to yes.

    • Rule: When Page Index's is_mobile_menu_open is "yes" Then This element is visible is "yes"

Preview your page. When the mobile icon appears on narrow screens, clicking it should trigger the workflow, toggle the custom state, and make the Group Mobile Menu visible. Clicking it again toggles the state back to "no", hiding the menu.

Understand condition order

Bubble evaluates the conditions in the "Conditional" tab from top to bottom.

• If multiple conditions on the same element are true, Bubble applies the property changes from all of them.
• If multiple true conditions try to change the same specific property (like This element is visible), the property value from the lowest true condition in the list typically takes precedence.
• For simple show/hide based on single factors, order usually doesn't cause conflicts. Be mindful if you have overlapping conditions that might try to set This element is visible to yes and no simultaneously. Using custom states can often simplify logic and avoid such conflicts.

Animate transitions

Abruptly appearing or disappearing elements can be jarring. Bubble offers a simple way to add smooth transitions.

Select any element with a conditional visibility rule. Look in the property editor, near the top, just above the "Layout" tab and below the element's name.

There's a checkbox labelled "Animate the transition." Check this box.

When a condition changes the element's visibility (This element is visible becomes yes or no), it will fade in or out instead of popping into existence or vanishing instantly. This significantly improves the perceived polish of your application.

Debug conditional visibility issues

When an element isn't showing or hiding as expected, the debugger is your best friend.

• How to activate: Add ?debug_mode=true to the end of your page's URL in preview mode.

• How to use: The Bubble debugger bar will appear at the bottom of the page.

  • Navigate your app to the state where the visibility issue occurs.
  • Click the "Inspector" button in the debugger bar (the magnifying glass icon).
  • Click on the element that has the visibility problem (the one you expect to be visible but isn't, or vice versa).
  • A popup will show the element's properties. Scroll down to the "Conditional rules" section.
  • Here, you'll see each condition you've defined. The debugger will tell you if the condition is currently evaluating to yes or no.
  • Examine the conditions. Is the correct condition evaluating to yes (if you expect it to show) or no (if you expect it to hide)?
  • If the condition's evaluation is not what you expect, inspect the elements or data that the condition relies on (e.g., check Dropdown Contact Reason's value, Current Page width, Current User is logged in, Group Product List is loading, Page Index's is_mobile_menu_open). This will pinpoint why the condition isn't true or false as you intended.

ABOUT ME

I'm Juliet Edjere, a no-code professional focused on automation, product development, and building scalable solutions with no coding knowledge.

I document all things MVP validation and how designs, data, and market trends connect.

Click. Build. Launch.

Visit my website → built with Carrd and designed in Figma