Nested collection lists are here

You can now nest collection lists in your designs to display categories, tags — or any referenced content.

Nested collection lists are here

Gaby Izarra
Product Marketing Manager
View author profile
Gaby Izarra
Product Marketing Manager
View author profile
Table of contents

Today, we announce the power to nest collection lists to display any referenced content.

Each Webflow collection is a simple database with the power to link to another through single or multi-reference fields. Consider how each blog post in a collection may reference an author, which is just an item in another collection.

Until now, displaying any reference in your design — like the author in our example — was limited to a collection template page, which of course, is the design of a single collection item. But what about displaying authors for a list of blog posts?

Nest associated categories, tags — or anything

With today’s release, you can now display up to five categories in a list of blog posts, or up to five image thumbnails in a list of products. Sure, those are common and useful examples, but you can create collections of anything. How about using nested collections to display whether or not each location in a list of Taco Bell restaurants has a drive-thru?

In a new Webflow University video, we teach you how to make use of nested collections to showcase specific location features of each Taco Bell location in a collection list.


The possibilities are infinite. We’ve compiled some examples of ‘parent’ and ‘child’ collections out in the wild.

Freshly adds badges that indicate dietary restrictions. The ‘parent’ collection is meals, and the ‘child’ collection is dietary restrictions.
Billie displays the ingredients in their skin care products. The ‘parent’ collection is products, and the ‘child’ collection is ingredients.
Alex Halliday
CEO
AirOps
Learn more
Aleyda Solis
International SEO Consultant and Founder
Orainti
Learn more
Barry Schwartz
President and Owner
RustyBrick, Inc
Learn more
Chris Andrew
CEO and Cofounder
Scrunch
Learn more
Connor Gillivan
CEO and Founder
TrioSEO
Learn more
Eli Schwartz
Author
Product-led SEO
Learn more
Ethan Smith
CEO
Graphite
Learn more
Evan Bailyn
CEO
First Page Sage
Learn more
Gaetano Nino DiNardi
Growth Advisor
Learn more
Jason Barnard
CEO and Founder
Kalicube
Learn more
Kevin Indig
Growth Advisor
Learn more
Lily Ray
VP SEO Strategy & Research
Amsive
Learn more
Marcel Santilli
CEO and Founder
GrowthX
Learn more
Michael King
CEO and Founder
iPullRank
Learn more
Rand Fishkin
CEO and Cofounder
SparkToro, Alertmouse, & Snackbar Studio
Learn more
Stefan Katanic
CEO
Veza Digital
Learn more
Steve Toth
CEO
Notebook Agency
Learn more
Sydney Sloan
CMO
G2
Learn more

How it works

Nesting a collection list is simple. In the Designer, just drag one into the other — you now have a ‘parent’ and ‘child’ collection. You can have one child per parent.

Connecting a source for your child collection works in the same way too. Set your source and drop in any element you may want to display.


Pull content from any reference field, multi-reference field, or multi-image field in the collection.

Keeping things simple — for now

With this new release, you’re able to nest one child collection per parent, and display up to five child references per collection item. For this first iteration, 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.

Have thoughts or feedback? Comment below or head over to our forum to discuss.

Read now

Last Updated
April 21, 2020

Related articles

Nested symbols: Evolving reusability and maintainability in Webflow
Nested symbols: Evolving reusability and maintainability in Webflow

Nested symbols: Evolving reusability and maintainability in Webflow

Nested symbols: Evolving reusability and maintainability in Webflow

Inside Webflow
By
Barrett Johnson
,
,
Read article
Now in beta: schedule collection items
Now in beta: schedule collection items

Now in beta: schedule collection items

Now in beta: schedule collection items

Inside Webflow
By
Gaby Izarra
,
,
Read article
How to build breadcrumb navigation for Webflow Ecommerce
How to build breadcrumb navigation for Webflow Ecommerce

How to build breadcrumb navigation for Webflow Ecommerce

How to build breadcrumb navigation for Webflow Ecommerce

Development
By
Matthew P Munger
,
,
Read article
Designing Collection Lists with flexbox
Designing Collection Lists with flexbox

Designing Collection Lists with flexbox

Designing Collection Lists with flexbox

Design
By
Nelson Abalos Jr
,
,
Read article
Our efforts to keep local businesses afloat
Our efforts to keep local businesses afloat

Our efforts to keep local businesses afloat

Our efforts to keep local businesses afloat

Inside Webflow
By
Gaby Izarra
,
,
Read article
How to increase your ecommerce growth with bounce back emails
How to increase your ecommerce growth with bounce back emails

How to increase your ecommerce growth with bounce back emails

How to increase your ecommerce growth with bounce back emails

Strategy
By
Cameron Roe
,
,
Read article

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free
Watch demo

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.