"Hi everyone, I’m trying to replicate a Figma design that uses tabs to filter CMS content.
My setup is:
A Tabs Component for filtering categories (e.g., ‘All’, ‘Technology’).
Inside each Tab Pane, I have a Collection List that displays my blog posts.
On each blog post card, I need to display its tags, which is a multi-reference field.
To show the tags, I have to nest a second Collection List inside the main one. This works perfectly for the first one or two tab panes. However, when I try to copy this structure into the other tab panes, I hit Webflow’s limit on nested collections.
Is there a known workaround for this limitation when using nested collections inside multiple tab panes?"
If I required to go with finesweet what kind of combo should I try with bcoz only cms filter didn’t worked
If you have > 100 items in your collection list, then you’ll FS List Load as well.
The primary advantage in your scenario is you’ll reduce your collection list needs to 1 total, regardless of the number of “filter tabs.” You’ll re-implement those as radio buttons.
Fundamentally it’s just radio buttons, usually sourced from some kind of “Categories” collection list. But if you’re asking how to make them look like buttons, the easiest way is to add the Finsweet accessible components library directly to your project. There you’ll find a number of pre-made radio button stylings that work really well as filter buttons.
It’s a very simple setup, but the attributes need to be in specific places. The FS List Filter docs give you everything you need, just read them carefully, and make sure to copy-paste the attribute titles to avoid typos. FS has some demos on the page too, you can view source on those in your browser to see the attribute placement. Also you can usually find Youtube videos on this, but make sure they’re for Attributes v2, which only came out this year. v1 has a different setup.
I build these often for clients, who get stuck on the implementation- usually what I see is typos or missing attributes that are needed. If you get completely stuck and need help building it out drop me a message, happy to share my details.
Honestly the setup is pretty clean, you’ll spend more time on the radio button styling to get the exact look you want.
Thank you for the detailed suggestions. I’ve reviewed this approach with my colleagues, and while it’s a great idea, we have a firm requirement to use Webflow’s native tabs component. This is to ensure design consistency, as this same tab layout is implemented across multiple pages on the site.
Considering this constraint, is there a potential solution or workaround that would allow us to achieve our goal directly within the standard Webflow tabs framework?
You can have one collection list, with one nested collection list, and than assign the custom attributes so that the cards will be slotted into the right tab.
The docs should be enough to setup what you need, but drop me a message if you need help, or need something done specially. For this feature you should only need;
1 collection list ( per 100 total items )
1 nested collection list
Plus 1 optional collection list for the tabs if you want to drive them from the CMS also
