A collapsible menu in Bubble uses custom states to toggle section visibility with smooth height animations. This tutorial covers building expandable and collapsible sections using custom states, creating accordion-style menus where opening one section closes others, adding smooth transition animations, and making the collapsible menu responsive for mobile navigation.
Overview: Adding a Collapsible Menu in Bubble
This tutorial shows how to build collapsible and accordion-style menus in Bubble using custom states for visibility toggling, the Collapse when hidden property for smooth layout changes, and conditional formatting for visual feedback.
Prerequisites
- A Bubble app with navigation or content sections
- Basic understanding of Bubble custom states
- Familiarity with the Bubble responsive engine
Step-by-step guide
Build a basic collapsible section
Build a basic collapsible section
Create a Group for the section header containing a title Text and a toggle Icon (chevron down/up). Create a child Group for the collapsible content below the header. Check 'Collapse when hidden' on the content Group — this removes it from the layout flow when hidden. Add a custom state 'is_open' (yes/no, default no) on the header Group. Set the content Group visibility to: when parent's is_open = yes. The header click workflow toggles is_open. Add a Conditional on the icon: when is_open = yes, rotate 180 degrees (or swap chevron-down to chevron-up).
Expected result: Clicking the section header expands or collapses the content with the chevron icon rotating.
Create an accordion with auto-close behavior
Create an accordion with auto-close behavior
For an accordion where only one section is open at a time, use a page-level custom state 'open_section' (text) instead of per-section states. Each section header sets open_section to its own identifier (e.g., 'section1', 'section2'). Each content Group is visible when open_section = its identifier. Clicking an already-open section sets open_section to empty (closing it). This ensures only one section is visible at a time without needing to manually close others.
Pro tip: Name sections consistently: 'faq_1', 'faq_2', etc. This makes the accordion pattern scalable to any number of sections.
Expected result: Opening one section automatically closes any other open section in the accordion.
Add smooth transitions for expand and collapse
Add smooth transitions for expand and collapse
Bubble's 'Collapse when hidden' creates an instant collapse. For smoother animation, go to the content Group's Appearance → Transitions section and add a transition on the 'max-height' or 'opacity' property. Set duration to 300ms and easing to ease-in-out. When the Group becomes visible, the transition animates the appearance. For the chevron icon rotation, add a CSS transition on the transform property. These small animations make the collapsible feel polished.
Expected result: Sections expand and collapse with smooth animations instead of instant jumps.
Build a collapsible mobile navigation menu
Build a collapsible mobile navigation menu
Create a hamburger menu icon visible only on mobile breakpoints. Add a page custom state 'mobile_menu_open' (yes/no). The hamburger click toggles this state. Create a full-width navigation Group with Collapse when hidden, visible when mobile_menu_open = yes. Inside, list your navigation links vertically. Each link navigates to the page and sets mobile_menu_open to no (closing the menu). Position the menu below the header with a high z-index so it overlays page content.
Expected result: Mobile users can open and close a navigation menu with a hamburger icon.
Complete working example
1COLLAPSIBLE MENU PATTERNS2===========================34BASIC COLLAPSIBLE:5 Header Group:6 Custom state: is_open (yes/no, default no)7 Click workflow: Set is_open = not is_open8 Content Group:9 Collapse when hidden: checked10 Visible when: parent's is_open = yes11 Chevron icon:12 Conditional: when is_open = yes → rotate 180deg1314ACCORDION (one open at a time):15 Page state: open_section (text)16 Section 1 header click: Set open_section = 'section1'17 (or empty if already 'section1')18 Section 1 content: Visible when open_section = 'section1'19 Section 2 header click: Set open_section = 'section2'20 Section 2 content: Visible when open_section = 'section2'2122MOBILE NAV MENU:23 Hamburger icon (mobile only):24 Click: toggle mobile_menu_open state25 Nav Group:26 Collapse when hidden: checked27 Visible when: mobile_menu_open = yes28 Z-index: high (above page content)29 Nav links:30 Click: Navigate + set mobile_menu_open = noCommon mistakes when creating a collapsible menu in Bubble
Why it's a problem: Forgetting to check 'Collapse when hidden' on collapsible groups
How to avoid: Always check 'Collapse when hidden' on any Group that needs to disappear from the layout when hidden
Why it's a problem: Using separate custom states for each accordion section
How to avoid: Use a single page-level state 'open_section' (text) that tracks which section is currently open
Why it's a problem: Not closing the mobile menu after navigation
How to avoid: Set mobile_menu_open to no in every navigation link's click workflow
Best practices
- Always use 'Collapse when hidden' for collapsible content groups
- Use a single state for accordion behavior (one open at a time)
- Add chevron rotation to indicate open/closed state visually
- Add CSS transitions for smooth expand/collapse animations
- Close the mobile menu after any navigation action
- Test collapsible menus on both desktop and mobile breakpoints
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a collapsible FAQ section and a mobile hamburger menu to my Bubble.io app. The FAQ should work as an accordion where only one question is open at a time. How do I build both with smooth animations?
Create an accordion FAQ section with 5 questions. Use a page custom state to track the open section. Each question header toggles the state. Content groups have Collapse when hidden checked. Add a mobile hamburger menu that toggles a vertical navigation menu.
Frequently asked questions
Can I animate the expand/collapse transition?
Yes. Add CSS transitions on the content Group's appearance properties (opacity, max-height). Set duration to 200-400ms for a smooth effect.
How do I keep a section open by default?
Set the custom state's default value to yes (for basic collapsible) or to the section identifier (for accordion). The section loads in its open state.
Can I nest collapsible sections?
Yes. Add a separate custom state for the nested level. The parent toggle controls the parent content, and nested toggles control their own content independently.
Does Collapse when hidden work with all layout types?
Yes. Collapse when hidden works with Column, Row, and Align to Parent layouts. The element is removed from the layout flow when not visible.
Can RapidDev help build navigation components in Bubble?
Yes. RapidDev can create responsive navigation systems with collapsible menus, accordions, mobile hamburger menus, and mega-menu dropdowns for your Bubble app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation