# How to create a collapsible menu in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- A Bubble app with navigation or content sections
- Basic understanding of Bubble custom states
- Familiarity with the Bubble responsive engine

## Step-by-step guide

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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 code example

File: `Workflow summary`

```text
COLLAPSIBLE MENU PATTERNS
===========================

BASIC COLLAPSIBLE:
  Header Group:
    Custom state: is_open (yes/no, default no)
    Click workflow: Set is_open = not is_open
  Content Group:
    Collapse when hidden: checked
    Visible when: parent's is_open = yes
  Chevron icon:
    Conditional: when is_open = yes → rotate 180deg

ACCORDION (one open at a time):
  Page state: open_section (text)
  Section 1 header click: Set open_section = 'section1'
    (or empty if already 'section1')
  Section 1 content: Visible when open_section = 'section1'
  Section 2 header click: Set open_section = 'section2'
  Section 2 content: Visible when open_section = 'section2'

MOBILE NAV MENU:
  Hamburger icon (mobile only):
    Click: toggle mobile_menu_open state
  Nav Group:
    Collapse when hidden: checked
    Visible when: mobile_menu_open = yes
    Z-index: high (above page content)
  Nav links:
    Click: Navigate + set mobile_menu_open = no
```

## Common mistakes

- **Forgetting to check 'Collapse when hidden' on collapsible groups** — Without this setting, hidden groups still occupy layout space, leaving a blank gap where the collapsed content should be Fix: Always check 'Collapse when hidden' on any Group that needs to disappear from the layout when hidden
- **Using separate custom states for each accordion section** — With separate states, opening one section does not automatically close others — users end up with all sections open simultaneously Fix: Use a single page-level state 'open_section' (text) that tracks which section is currently open
- **Not closing the mobile menu after navigation** — If the mobile menu stays open after clicking a link, it covers the destination page content Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-a-collapsible-menu-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-a-collapsible-menu-in-bubble