If you are struggling with Webflow‘s limitation for nested collection lists in static single pages (1 collection per page with max 5 items), this clonable project might be interesting for you. In this project I explain how to use unlimited nested collections with more than 5 items on a static page.
The magic: a lightweight jQuery with no performance issues => 4x 100% from Google Lighthouse for the clonable project page .
Feel free to clone this project and read trough the short documentation to understand how it works. Feedback and ideas for improvement are very welcome!
@leamars - That is absolutely feasible! However, you have used some things wrong . The script to use the nested collection item must be included as html embed (not in the page head tag) and the reference collection must be implemented and styled on the respective collection template page.
Did you download the clone? there you can see how I did it for the blog posts.
Can you send me a share link of your project? then I can give you more detailed instructions.
Thanks for sharing this, It’s awesome and hopefully Webflow will make this native soon. I’ve implemented it on a page with a list of profiles and tags underneath them! See screenshot. Card screenshot|690x437
Is there a way to make the tags link to the tag page so I can filter the profiles?
Heres the code I’ve used so far:
You can insert the links directly into the nested collection (manually or dynamically with cms-connections). The script will fetch the whole html structure including the links.
You can clone my example project and inspect, how I‘ve added the links to the nested tags and to the categories in the blog overview page (Blog - Example for unlimited nested Webflow collections). All the tags and categories are all linked to the respective dynamic template pages.
Ahh I see,
I’ve got a bit of an usual use case here but basically I want the original tag list on the consultant page to NOT link to the tag page. But then on a different static page I would like the tags to link correctly. Not sure if this is possible by adding the links within the code embed instead?
Also I noticed that the hover interaction I built for the tag does not work in the nested collection list, Is this just a limitation with the code embed?
@MikeTalent - I’m happy to help with this issues. Can you please provide the share link of your project?
As regards the interactions: take care, that the interactions trigger the class and not the element (see screenshot below). Also ensure, that this class is included in the collection list you fetched by the html embed.
With regard to the links: you cannot insert them directly into the script since this only fetches the collection list with the respective class. But it should be possible to add an additional script which overrides the links on a specific page.
But I think the better solution would be to create two nested collections on the corresponding dynamic template pages with the appropriate links (on the dynamic template pages Webflow allows several nested collections) and then fetch and pull the collection with the appropriate links with the code embed onto the static pages on which you need the respective linking.
The hover interaction on ‘category tag’ on the consultants template page is already set to affect the class so not sure what’s going on there.
If I set up another collection list that is linked on the consultants page could I then nest it in the “quick look” page and hide it from the consultants page?
Thanks for your help on this it’s really appreciated,
Just a heads up I managed to figure both of the issues out today. I added “pointer events: none” on the class in the consultant page body to make them not clickable on the one page.
Also the hover interaction works now I switched it to use the hover state natively in Webflow instead of the interactions panel.
Thanks for all your help on this & for uploading the solve for the nested collection lists in the first place its really appreciated!
@MikeTalent - happy to hear, that you solved the problem! I will update my nested collection project regarding the native webflow interactions issues.
Maybe I will find a solution for this as well. I guess this won’t be the first case where a custom html element should be triggered via webflow’s native interactions.
Hi, @PhilippX thanks for the clonable project looks amazing. One question thought, can’t seem to find how you styled the tags list for example. I need the tags to be displayed in a certain way, can you please give a tip?.
Hi @PhilippX this is an awesome addition for such a common issue - thank you! For the site I am working with the nested collection list is being used as dropdown links, would this solution work with link blocks as well?
Hi @PhilippX, thanks for a great workaround. Is it somehow possible to use it even with references that have no template page?
What I am trying to do is display more than 5 images from a Multi-Image gallery that is part of the collection (not linked). Therefore it does not have its own slug.
I wouldnt mind putting reference to another collection with gallery but webflow wont let me select it in reference select box. I guess it is smart enough to recognize it would be creating multiple nested collections if it allowed that.
Hi @Petr_Vacek and welcome to the Webflow community!
It is definitely possible to display more than five images from a multi-image field as a nested collection, even if the multi-image field is in a collection and thus has no specific slug.
In summary: You can insert a collection on the template page of the collection where the multi-image field is located and reference the images there and style them as you like. Then you can show the collection on any static page using the jQuery load() function. You can put the collection with the images on the template page in a div with display = hidden if you don’t want it to be visible there.
Please feel free to contact me if you have any questions about this - preferably directly with a share-link to your project.
First step: Create a collection list on a CMS collection page and give the collection list element (not the collection list wrapper) an individual class.
Hope this helps. You could inspect the structure of the blog post template page and the static blog overview page in my clonable project so that the imeplementation becomes clearer.
I would also be grateful if you could briefly explain, where the documentation is unclear, so that I can add more details to it ;-).
Thank you for your feedback. yes, the script works regardless of its content. you can also create a link block and assign a specific class to the div wrapper (or collection list) where the link block is located and mirror the entire content of that div (or collection list) to any location on any static or dynamic page (including a dropdown). All content (HTML) and styling (CSS) will be copied. Only possible Webflow interactions (javascript) will not be fetched (CSS based animations, hover effects etc. will work).
I hope this helps. You can also send me a share-link to your project. Then I can give you more detailed instructions and reproduce the specific use case in a separate cloneable project.
@SebastianAguila - you can style the tag list directly at the dynamic template page (from where you fetch them). All stylings (CSS) will be fetched by the script.
You can also add an additional page (style guide) to your project and set it to draft. You can then add the tag list (with the same classes) to this style guide and style it there. If you style a specific class with CSS, this styling will be applied to the whole website where this class occurs.
@realadventura - thanks for your reply. It looks like the native Webflow interactions does not trigger the fetched nested collection. This depends on the order in which the scripts are loaded by Webflow. CSS based animations work well, but if you need javascript based animations you have to implement them by custom code (not with the native Webflow interactions panel).
I am still working on a solution for this problem. I am of course grateful for suggestions and ideas on this.
.
Feedback and ideas for improvement are very welcome! 
Here is the clonable project: https://webflow.com/website/Multiple-nested-Collections-with-unlimited-Items-on-single-pages-in-Webflow
