I was wondering what’s the best way to create a mobile filter menu similar to this
I tried with an infinite slider initially but I don’t seem to have the option of having items align vertically or horizontally and it seems to center all my flexboxes inside normally and I can’t get a nice horizontal scroll going.
I asked CoPilot to generate me one and it did something like below (basically a whole bunch of containers)
I don’t quite want the scroll bars to be there, I’d rather the user just use their finger to control the scroll movement, so just wondering what would be the best way to tackle this? i.e which element should I work off?
Apologies for the late reply. I can try to find a nice solution for this UX and record something for you but first I kind of wanted to challenge you on this approach if that’s ok
Are you married to this mobile UX or open to suggestions?
The reason I ask is that my first instinct is that this type of UX might lead to a lot of user misclicks and, if I look at popular mobile apps that have a lot of filters like Airbnb, they don’t handle filters that way which makes me think it might not be the best approach.
I’m thinking maybe a more user-friendly UX could be achieved with a parent container, let’s call it filters, that contains all your filters.
On desktop, that container would have a horizontal direction. On mobile, it would have a vertical direction (and might be in a modal like Airbnb does).
What do you think?
No worries if you’d rather go with your first idea! I have to say it looks really nice. Let me know either way and I’ll record something for you to hopefully help out
