How to create a collapsible menu in Bubble

A collapsible menu in Bubble is created by placing the menu inside a group and toggling that group’s collapse height when hidden property. Then you show/hide that group with a custom state or a workflow triggered by a button (like a hamburger icon). When the group hides, the page layout collapses smoothly; when it shows, the group expands again.

How to Build It Step‑by‑Step

The core idea is: put all menu items inside one Group, make that group collapsible, and then control its visibility using a custom state or a simple workflow.

• Create the menu group: Add a Group to the page. Inside it, place your menu items (buttons, texts, icons, etc.). In the Group’s Layout settings, check “This element is visible on page load” if you want it open by default, and always check “Collapse height when hidden”.
• Set the container layout: If the page or parent group uses a column layout, Bubble will automatically slide things up/down when the collapsible group hides.
• Add a toggle trigger: Usually an icon (hamburger). Select the icon → Start/Edit Workflow → choose Element Actions → Toggle and select the menu group. This action shows the group if hidden, hides it if visible.
• Optional: using a custom state: On the page, create a custom state called isOpen (type yes/no). Clicking the icon sets isOpen = not isOpen. Then set the menu group’s Conditional tab: “When Page’s isOpen is yes → This element is visible”.
• Check transitions: If you want smooth animation, enable “animate collapse” in the group’s Layout settings (available on new responsive engine).

// Example: Custom state toggle workflow
When Icon Menu is clicked →
Set state: Page’s isOpen = not Page’s isOpen

This setup uses only Bubble’s native visibility rules plus collapse behavior. No plugins, no hacks, and fully supported by Bubble’s responsive engine.