Nested Collection Lists: Breaking Webflow’s Limitation

Webflow’s limitations

The nested collections feature that comes standard in the Webflow Designer is a powerful tool. You can place a collection inside a collection on any static page (for example, to display tags or categories on the main blog page).

However, Webflow shipped this feature with two drastic limitations:

• Nested collection items are limited to a maximum of 5 entries.
• A maximum of one nested collection list per page.

Webflow says:

… we added these limitations to ensure optimal performance of your site, but we are currently collecting feedback and reviewing the best next improvements for nested collections.

Webflow Blog, Nested collection lists are here, April 21, 2020

Finsweet CMS Nest: an interesting solution, embedded in the Finsweet ecosystem

The Finsweet team (I love them for their great work!) offers a more flexible solution for nested collections. With this solution, you can embed more than one nested collection on a page and more than 5 items within the nested collection.

The big advantage of this solution is that it integrates perfectly into the Finsweet ecosystem and can be combined with other Attributes solutions developed by Finsweet. Finsweet also provides very good documentation. The only small downside: you have to add a second (hidden) collection list at the end of every page where the nested collection should be available. This additional collection contains your reference items and makes your page structurally more complex. The HTML of each page contains hidden collections that wouldn’t actually be needed in the front end and only exist because Webflow doesn’t provide the required functionality directly in the back end. In effect, functionality that really belongs in the back end is being replicated through the front end.

Depending on your project requirements, it’s worth testing both this solution and the following jQuery solution to find out which one fits best.

The jQuery .load() function: lightweight and without admin hurdles

A simple and lightweight way to nest an unlimited number of collections with an unlimited number of collection items on every single static and dynamic page is a (simple) jQuery code snippet. Essentially, the jQuery fetches a multi-reference element (that is, its HTML structure) from any page and pulls that element into an HTML embed that works like a nested collection.

You can build and style your nested collections wherever you want and use them anywhere! Unlike the Finsweet solution, there’s no need for second plain-text fields with comma-separated lists and no hidden collections.

In short, this solution relies solely on the lightweight jQuery .load() function, a simple way to fetch data from a server and insert the returned HTML into a matching element. It wins through its simplicity and a clean HTML structure without additional hidden collections.

Demo and cloneable

I’ve described how the jQuery .load() function works for nested collection lists in a demo project.

In this project, I explain how to embed multiple nested collections into a static page without affecting the page’s performance.

You’ll also find a cloneable version of this project in the Webflow Showcase.