The nested collections feature, which is available by default in Webflow designer, is a powerful tool. You can place a collection inside a collection on every static page (e.g. display blog tags on the main blog page). Webflow has, however, provided this feature with two drastic limitations: (1) Nested collection items are limited to a maximum of 5 items. (2) Maximum one nested collection list per page.
Webflow says: "...we’ve added these limitations to ensure optimal performance of your site, but we’re currently gathering feedback, and figuring out the best next enhancements for nesting collections." (Source, April 21, 2020)
The finsweet-Team (I really love them for their awesome work!) provides a more flexible solution for nested Collections. With this solution, you can add more than 1 nested collection on a page and more than 5 items inside the nested collection.
The major advantage of this solution is that it integrates perfectly into the Finsweet ecosystem and can be combined with other attribute solutions developed by Finsweet. Finsweet also provides very good documentation.
The only minor drawback of this solution is that you need to add a second (hidden) collection list at the end of each page where the nested collection should be available. This additional collection holds your reference items and makes your page more structurally complex. The HTML of the respective page contains hidden collections that would not be necessary in the frontend and are only there because Webflow does not provide the required functionality directly within the backend. As a result, the functionality that is actually required in the backend is, so to speak, faked via the frontend.
Depending on the project requirements, it is recommended to test this solution as well as the following jQuery solution to determine which is best suited.
An easy and lightweight way to nest unlimited collections with unlimited collection items on any single and dynamic page is to use a (simple) jQuery code snippet. This solution was firstly provided by antar (Alex). In basic, the jQuery pulls a multi-reference element from any page into an HTML embed, that works like a nested collection.
You can set up and style your nested collections wherever you want and use them wherever you want! No second plain text field with a comma separated list and no hidden collections are necessary.
This solution is based on the jQuery .load() function - a simple way to fetch data from a server and place the returned HTML into a matching element.
How easy is that! Clone and inspect this project (e.g. the blog example) or read the short documentation to start from scretch ;-).
