00:00
Buy Me a Beer
CMS

Webflow CMS Collection Nest

Nest any Webflow element inside another Webflow element

Collection List
Collection List
Collection List

Demo

How to add multiple nested lists to your Webflow Collections.

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Prerequisite: Set up 2 CMS Collections and bind them with a Reference field or a Multi-refrence field

Add Link to Collection Item

In the Collection List I want to nest another Collection List:
Add a Text Link or a Link Block to the CMS Collection Item.

In the Text Link Settings choose the purple Collection page link option and choose Current Item

Collection List Wrapper
Collection List
Collection Item
Text Link
Text Link
Style
Settings
Interactions
Link Settings

Add Nest Link Attribute to Link

Copy this attribute:

vdx-nest-link

Paste the attribute into the Text Link Custom Attributes Name field.

Collection List Wrapper
Collection List
Collection Item
Text Link
Text Link
Style
Settings
Interactions
Link Settings
Custom Attributes
Name
vdx-nest-link
Value

Give Nest Link Attribute a Value

Give the Text Link Custom Attributes Value field a unique value. eg. card.

Collection List Wrapper
Collection List
Collection Item
Text Link
Text Link
Style
Settings
Interactions
Link Settings
Custom Attributes
Name
vdx-nest-link
Value
card

Add Collection List to CMS Collection Page

Go to the CMS Collection Page of the CMS Collection List I want to nest. Add Collection List to the page and filter by Current Category.

Collection List Wrapper
Collection List
Collection Item
Collection Item
Collection Item
Collection List Wrapper
Style
Settings
Interactions
Collection List Settings
Filter
Categories contains current Category

Add Nest This Attribute

Copy this attribute:

vdx-nest-this

Paste the attribute into the Custom Attributes Name field of the Collection List or  Collection Items you want to nest.
Give the Custom Attributes Value input the same value as the vdx-nest-link attribute. eg. card

Collection List Wrapper
Collection List
Collection Item
Collection Item
Collection Item
Collection List
Style
Settings
Interactions
Collection List Settings
Filter
Categories contains current Category
Custom Attributes
Name
vdx-nest-this
Value
card

Publish

The Link with the Nest Link Attribute will be replaced with the Collection List or Collection Items with the Nest This Attribute

Collection List Wrapper
Collection List
Collection Item
Collection List
Collection Item
Collection Item
Collection Item

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.

Think of it like buying me a pint for keeping your Webflow spells flowing.

You can support it here.

Cheers, legend!

This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.