Nest Collection lists
In this lesson, we’ll look at two Collections in Webflow: a list of Taco Bell locations and a list of features each location has. Then we’ll connect both Collections using a multi-reference field, build out our design using a Collection list, and then we’ll nest a Collection list inside another Collection list.
Steps in the video: 00:00 - Introduction 01:10 - Go through the collections 02:09 - Create a multi-reference field 03:18 - Make the collection list 05:50 - Use a nested collection list
Read on the blog: https://webflow.com/blog/nested-collection-lists-are-here
Video transcript
Nest Collection Lists in Webflow lets you place one CMS Collection List inside another, allowing you to display related content from multiple collections on the same page or within the same element.
A common use case is displaying blog posts alongside their categories, or products alongside their related tags. With nested collection lists, you can pull data from a referenced collection and display it inline with the parent collection item.
In Webflow, to nest a collection list, place a Collection List element inside an existing Collection List item. Then bind the inner list to a different collection — typically one that's referenced by the outer collection's items. The inner list will show only the items connected to that specific outer item.
Keep in mind that Webflow has a limit on how many nested collection lists you can have on a single page, and deeply nested structures can add complexity. Use nested lists when the relationship between the collections is clear and the nesting genuinely improves the content display.
.jpg)