How to use conditional visibility in Bubble

In Bubble, you use conditional visibility by turning an element’s visibility on or off based on a condition you define in the element’s Conditional tab. Bubble doesn’t “hide/show” with workflow logic — instead, you tell the element when it should be visible, and Bubble handles it automatically.

How Conditional Visibility Works

Every visual element in Bubble has two places for visibility control: the Layout tab and the Conditional tab. In Layout, you decide if the element is visible by default and whether it should collapse when hidden. In Conditional, you add rules like “When Current User is logged in → This element is visible.” The rule becomes true or false at runtime, and Bubble updates visibility instantly.

• Visible on page load (Layout) = starting visibility.
• Collapse when hidden (Layout) = removes empty space when hidden.
• Condition (Conditional tab) = defines when visibility should override the default.

Step-by-Step Example

Let’s say you want a group to show only when the user is logged in.

• Click the Group → open the Layout tab.
• Uncheck Visible on page load if you want it hidden by default.
• Check Collapse when hidden if you don’t want empty space.
• Go to the Conditional tab → click Add a condition.
• Set the expression to: Current User is logged in.
• Enable the property This element is visible.

// This is the Bubble condition expression (not code you execute)
When Current User is logged in
    This element is visible = yes

Tips That Avoid Common Mistakes

• Conditions override the default state, not the other way around.
• You must check the box next to "This element is visible" inside the condition, or nothing will happen.
• If something stays visible, check if another condition is also turning it on.
• If spacing looks weird, verify Collapse when hidden is checked for groups.

That’s the entire system: set a default visibility, then use the Conditional tab to tell Bubble when the element should appear or disappear.