Laura Niebel Headshot | Laura Niebel Web Design

How to use tabs to let users sort a CMS collection list in Webflow

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:

  1. Create your CMS collection and collection list on the page
  2. 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
  3. Insert the "Tab" element on your page and style the tabs to your liking
  4. 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.)
  5. 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)
  6. Pull one of the collection lists into the first tab pane and the other one in the second tab pane
  7. You can now press on each tab and reveal the corresponding collection list
  8. That's it!

Don't want to read? Watch the video tutorial below!

This might also interest you...

Tuesday, December 31, 2019

Matterport: What it is and how you can integrate it into your next Webflow project

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.

Thursday, December 26, 2019

How to source a background video from the Webflow CMS

Would you like to use a dynamic background video on your site? Maybe even use it on your CMS collection page? I show you how this is done in just 8-9 steps! Let's get started...

Tuesday, December 24, 2019

How to create a cool slide in out hover interaction with Webflow

Want to do a fun hover animation with slide in text for your next project? I've made a short video to show you how it's done and there's also a link to the cloneable example project.


Join the newsletter for Webflow & Web Design updates.

Thanks for subscribing! Your first newsletter will arrive in your inbox soon.
Oops! Something went wrong! Try again or get in touch via the form below, so I can add you manually!

Have questions or want to talk about a project idea?

Just send an email to or fill out the form below. I'm looking forward to hear from you!

Thanks! I'll get back to you as soon as possible!
Oops! Something went wrong while submitting the form. Please try again or contact me via email.