ineed this done if you can doit for me i tryed using ai agent and nohelp and i tried manually and either no way i can make it happin am having some issue with this is it possible you could help me out AIRBNB-STYLE CATEGORY + SUBCATEGORY DISCOVERY SLIDERS
Goal:
Implement a two-level discovery system on Home similar to Airbnb categories.
The user should first browse parent categories horizontally.
When a parent category is selected, a second horizontal slider containing only matching subcategories appears directly below it.
This must feel smooth, premium and mobile-first.
LEVEL 1 — MAIN CATEGORY SLIDER
Create a horizontally scrollable category carousel.
Examples:
Stay
Property
Vacation & Experiences
Water & Adventure
Transport & Mobility
Food & Dining
Wellness
Family & Leisure
Requirements:
horizontal scrolling enabled
swipe gestures enabled
category chips fully tappable
no touch interception
premium pill design
soft shadow
rounded corners
smooth scrolling
When a category chip is pressed:
Set:
selected_category_
on:
Group State Holder
Value:
Current HorizontalListItem’s listing_category option value
NOT:
ElementParent
get_group_data
text values
Then:
clear selected_subcategory_
refresh listings
show subcategory slider
SELECTED CATEGORY VISUAL STATE
Selected category should visually change:
slightly smaller scale
darker background
stronger shadow
selected border or highlight
premium active state
Example:
Before:
Stay | Water | Transport
After selecting Stay:
[STAY ACTIVE]
Water
Transport
LEVEL 2 — SUBCATEGORY SLIDER
Subcategory slider is hidden by default.
Show only when:
selected_category_ is not empty
Position:
Directly below category slider.
Data source:
listing_subcategory
Filter:
listing_subcategory.parent_category =
selected_category_
Examples:
If selected category:
Stay
Show:
Hotels
Resorts
Villas
Apartments
Holiday Homes
Unique Stays
If selected category:
Water & Adventure
Show:
Jet Skis
Boats
Boat Tours
Fishing Trips
Water Sports
If selected category:
Transport & Mobility
Show:
Car Rentals
Motorbikes
RV & Campers
Bicycles
E-Bikes
SUBCATEGORY INTERACTION
When a subcategory chip is pressed:
Set:
selected_subcategory_
on:
Group State Holder
Value:
Current HorizontalListItem’s listing_subcategory option value
Then:
refresh listings.
Selected subcategory visual state:
darker style
active shadow
selected border
LISTING FILTERING
Listings VerticalList should filter using:
selected_category_
AND
selected_subcategory_
No duplicate states.
Use existing State Holder only.
CRITICAL TECHNICAL REQUIREMENT
The following elements MUST be direct children of Home root:
Search Entry Pill
Category Slider
Subcategory Slider
State Holder
Guest Popup
Date Popup
They MUST NOT be children of:
VerticalList Listings Vertical List
Reason:
The VerticalList scroll container captures gestures and causes:
frozen category slider
category taps not firing
subcategory slider not appearing
horizontal scrolling not working
VerticalList should contain only:
Listing Item Template
KNOWN ISSUE TO RESOLVE
Current behaviour:
category slider appears
category slider does not scroll
category chips cannot be pressed
selected_category_ does not update
subcategory slider never appears
search feels frozen
Expected behaviour:
User swipes categories.
User taps:
Stay
Result:
Stay becomes active.
Subcategory slider appears:
Hotels
Resorts
Villas
Apartments
User taps:
Villas
Listings refresh automatically.
Hey @aldorinoa94 , Your spec is fine, the problem is in the build. The symptoms you listed (slider won’t scroll, chips won’t tap, state never updates) almost always come from one thing: your category repeating group is nested inside a scrolling container, so the vertical scroll swallows every gesture before the chips receive them. Move the category and subcategory rows out so they sit directly on the page, exactly like your spec already says, and most of this fixes itself.
After that it’s standard Bubble: each category chip sets a custom state (use Current cell’s Category, not anything from the parent group), the subcategory row is only visible when that state isn’t empty, its data source filters by parent category, and your listings search constrains on both states. Active chip styling is just conditionals reading the state.
Maybe a 1-2 hour fix for someone who’s built this pattern before, but hard to debug over forum replies since it depends on your exact element tree. Happy to take a look, feel free to DM me.
Thank you for the explanation — that makes a lot more sense now.
Would it be possible for you to send me some guidance or reference material that I could follow to set this up myself? For example, if you know of a tutorial, documentation, or a video that explains this pattern, I’d be happy to go through it and try to implement it on my own.
If you have any examples showing the correct element structure or how the custom states are set up, that would also be really helpful.
Thanks again for taking the time to point me in the right direction.
Hi Andrew, sure. There’s no single tutorial for this exact pattern, but it’s built from three standard Bubble concepts, so if you learn those the rest clicks into place:
Custom states — Bubble’s manual covers these well. Search “custom states Bubble manual”. Create one hidden group (your state holder) with two states, selected_category and selected_subcategory, both of type “listing_category” option set (not text).
Element structure — the two carousels and the state holder must sit directly on the page, not inside the vertical repeating group. That nesting is why your taps and scrolling are dead right now. Fix this first before anything else.
Conditional visibility and filtering — the subcategory row gets “This element is visible when selected_category is not empty”. Its repeating group source is your subcategory option set filtered by parent = selected_category. The listings search gets constraints on both states. Active chip styling is just a conditional on each chip: when current cell’s category = selected_category, change background and border.
Build order that will save you pain >>>> fix the hierarchy first, then get one category chip updating the state (put a text element on the page temporarily showing the state value so you can see it change), then add the subcategory row, then wire the filters, and style last.
If you get through steps 1 and 2 and something still won’t tap or scroll, that usually means an invisible group is overlapping the chips. That kind of thing is hard to spot without seeing the editor, so if you hit a wall, my offer stands.
I was wondering if it would be possible for you to set out an easy-to-follow workflow for me once the main system has been completed. I’d like something simple that I can refer to in the future so I can add as many categories and subcategories as I need without having to ask for help each time.
The website will work similarly to Airbnb, where users can either:
Become a host and list their service, property, or experience.
Browse and book a category or place to use or stay.
For all standard bookings, I would like the platform to automatically charge a 15% commission, which I will earn.
For restaurants, however, I’d like the model to work differently. Instead of charging a commission, I want participating restaurants to offer a discount to users who book or redeem offers through the app. Ideally, each restaurant host should be able to control their own discount percentage from their dashboard, so they can increase, decrease, or remove the discount whenever they choose.
If possible, could you also include in the workflow:
How to create new categories and subcategories.
How to assign commission rules to different categories.
How to set up categories that use discounts instead of commissions (such as restaurants).
How hosts manage their listings and pricing.
How restaurant hosts manage and update their discounts.
Any other steps I should know so I can expand the platform easily in the future.
The goal is to make the system scalable and easy to manage as I continue adding new types of businesses and services.
