Control element visibility in Bubble using the Conditional tab on any element, the 'This element is visible on page load' checkbox, and workflow Show/Hide actions. Combine these for role-based content (admin vs user), feature flags, premium content gating, and A/B testing. Always check 'Collapse when hidden' to prevent blank spaces when elements are hidden.
Implement Conditional Visibility in Bubble
This tutorial covers advanced visibility patterns in Bubble — from basic show/hide conditions to role-based UI, feature flags, and premium content gating. Mastering conditional visibility is key to building apps that adapt to different users and contexts.
Prerequisites
- A Bubble account with an active app
- Basic understanding of conditions and dynamic expressions
- User roles configured on the User data type
Step-by-step guide
Set Element Visibility Conditions
Set Element Visibility Conditions
Select any element and open the Conditional tab. Click '+ Add condition'. Set the 'When' field to a dynamic expression (e.g., 'Current User's role is admin'). In the properties section, set 'This element is visible' to 'yes' (to show) or 'no' (to hide). Multiple conditions can exist — they evaluate top-down with the bottom condition taking priority for conflicting properties.
Pro tip: Always check 'Collapse when hidden' on the element's Layout properties. Without this, hidden elements still occupy space in the layout, creating blank gaps.
Expected result: Elements show or hide based on dynamic conditions.
Implement Role-Based Visibility
Implement Role-Based Visibility
For admin-only content, add the condition: 'When Current User's role is not admin' → This element is visible = no. For premium features: 'When Current User's subscription_plan is free' → visible = no. For logged-out users: 'When Current User is logged out' → visible = no. Apply these conditions to groups containing multiple elements rather than individual elements for efficiency.
Expected result: Different users see different content based on their role and subscription.
Use Show/Hide Workflow Actions
Use Show/Hide Workflow Actions
In addition to conditions, use workflow actions for event-driven visibility. Create a workflow: When Button 'Show Details' is clicked → Element Actions → Show → target the details group. When Button 'Hide Details' is clicked → Hide the group. This is useful for toggles, expandable sections, and modals. The hierarchy: workflow Show/Hide overrides conditions, which override the default visible-on-page-load setting.
Expected result: Elements toggle visibility in response to user actions.
Build Feature Flags with Custom States
Build Feature Flags with Custom States
Create a Custom State on the page called 'show_new_feature' (yes/no). Set it based on your criteria — user role, random assignment for A/B testing, or an admin toggle from the database. Apply conditional visibility: 'When page's show_new_feature is yes' → show the new feature group. This lets you roll out features gradually without redeploying.
Expected result: Features can be toggled on/off for specific users using Custom States as feature flags.
Handle Sensitive Content Security
Handle Sensitive Content Security
Important: hiding elements does NOT secure data. Hidden element content is still in the page HTML and accessible to tech-savvy users. For sensitive data, use Privacy Rules to prevent the data from reaching the browser at all. Conditional visibility should be used for UX, not security. Always pair visibility conditions with Privacy Rules for any sensitive information.
Expected result: You understand that visibility is for UX and Privacy Rules are for security.
Complete working example
1VISIBILITY PATTERNS:231. ROLE-BASED (Conditional tab)4 Admin panel group → Condition: Current User's role is not 'admin' → visible = no5 Premium feature → Condition: Current User's plan is 'free' → visible = no6 Login prompt → Condition: Current User is logged in → visible = no782. TOGGLE (Workflow actions)9 Show Details button → Show Group Details10 Hide Details button → Hide Group Details11 Or single toggle: If visible → Hide, If not visible → Show12133. FEATURE FLAGS (Custom State)14 Page state: show_beta_feature (yes/no)15 Set on page load based on User's is_beta_tester field16 Group BetaFeature → Condition: page's show_beta_feature is no → visible = no17184. VISIBILITY PRIORITY ORDER:19 Workflow Show/Hide > Element Conditions > Default 'visible on page load'2021IMPORTANT: Always set 'Collapse when hidden' = checked22IMPORTANT: Visibility ≠ Security. Use Privacy Rules for data protection.Common mistakes when using conditional visibility in Bubble
Why it's a problem: Not checking 'Collapse when hidden'
How to avoid: Check 'Collapse when hidden' on every element that may be conditionally hidden.
Why it's a problem: Using visibility as a security measure
How to avoid: Use Privacy Rules to prevent sensitive data from reaching the browser. Visibility is for UX only.
Why it's a problem: Adding conditions to individual elements instead of container groups
How to avoid: Wrap related elements in a Group and set visibility conditions on the Group.
Best practices
- Set conditions on container Groups rather than individual elements.
- Always check 'Collapse when hidden' to prevent layout gaps.
- Use Privacy Rules alongside visibility conditions for sensitive data.
- Use Custom States for feature flags and A/B testing visibility.
- Keep visibility logic simple — deeply nested conditions are hard to debug.
- Document your visibility rules with Bubble Notes.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to implement conditional visibility in my Bubble.io app for: admin-only sections, premium feature gating, and a toggle to show/hide details. How do I set up conditions, workflow show/hide, and ensure elements collapse when hidden?
Add conditional visibility: hide admin panel when user is not admin, hide premium features for free users, add show/hide toggle for the details section. Set collapse when hidden on all conditionally visible elements.
Frequently asked questions
Can I animate elements when showing/hiding?
Bubble supports basic transitions. On the element's Conditional tab or in the workflow Show action, you can enable fade transitions. For custom animations, use CSS transitions via the HTML header.
Does hiding elements improve page performance?
No. Hidden elements are still loaded and rendered in the DOM. They just are not visible. For performance, use conditions on Repeating Group data sources rather than hiding loaded data.
Can I set visibility based on screen size?
Yes. Use Bubble's responsive breakpoints. In the responsive editor, set elements to be visible or hidden at specific breakpoints (mobile, tablet, desktop).
How do I test conditional visibility for different roles?
Open incognito browser windows and log in as different test users. Verify each role sees the correct elements.
Can conditional visibility be used for A/B testing?
Yes. Randomly assign users to a group (store on User) and conditionally show variant A or B based on the assignment. For sophisticated A/B testing setups, RapidDev can implement analytics-tracked experiments.
Why does my hidden element still show a blank space?
You forgot to check 'Collapse when hidden' in the element's Layout properties. Enable it for all conditionally hidden elements.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation