How to use tabs to let users sort a CMS collection list in Webflow
Want to let your user sort a Webflow collection list using buttons? You can do that easily by taking advantage Webflow's tab element. In this blog post I show you how to do this quickly via a short video tutorial. Enjoy!
Estimated reading time:
Just recently I worked on a Webflow site for a real estate agent. Here I implemented the functionality to let the site visitor sort a list of properties via buttons on the page. This effectively means the user is able to press a button and can sort properties by price or from newest to oldest (or whatever other criteria you specify). Let me show you how this is done:
Create your CMS collection and collection list on the page
If you're creating a site for a real estate agent or another client who needs to have commas in their pricing, see my recent blog post on this issue first
Insert the "Tab" element on your page and style the tabs to your liking
Add as many tabs as you need - one for each sorting option you need (e.g. one for filtering by price, one for filtering by date etc.)
Duplicate the collection list you have created earlier and filter one of the collection lists by price (use the sort order option), and the other one by date (or any other filter you want to apply)
Pull one of the collection lists into the first tab pane and the other one in the second tab pane
You can now press on each tab and reveal the corresponding collection list
Don't want to read? Watch the video tutorial below!
Want to know how I got started and became a Webflow designer? Then, listen up! You'll find a brief rundown of how I got to where I am now, as I haven't only switched continents but also moved from print to web/digital design...
Are you based in Perth, Australia? Great - I've just established the city's first Webflow Meetup Group. Check out this post for all the details and for some more info on how to start a meetup group in your own hometown.
Ever heard of Matterport? The service allows you to place virtual walkthroughs on your client's website. This could be especially useful for real estate agents and tourism businesses. Let me show you how to easily integrate this feature into your next Webflow project.