00:00
Buy Me a Beer
CMS

Webflow nest

Nest any Webflow element inside another Webflow element

Collection List
Collection List
Collection List

Demo

Instructions

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

In the Collection List I want to nest another Collection List:

1

Add a Text Link or a Link Block to the CMS Collection Item.

Collection Item
2

Copy this attribute:

Copied!
vdx-nest-link
3

Paste the attribute into the Text Link Custom Attributes Name field

Text Link
Style
Settings
Interactions
Custom Attributes
Name
vdx-nest-link
Value
4

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

Text Link
Style
Settings
Interactions
Custom Attributes
Name
vdx-nest-link
Value
card
5

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

Text Link
Style
Settings
Interactions
Link Settings

The CMS Collection List I want to nest:

Go to the CMS Collection Page of the CMS Collection List I want to nest.

1

Copy this attribute:

Copied!
vdx-nest-this
2

Paste the attribute into the Custom Attributes Name field of the Collection List or  Collection Items you want to nest.

Collection List
Style
Settings
Interactions
Custom Attributes
Name
vdx-nest-this
Value
4

Give the Custom Attributes Value field the same value as the vdx-nest-link attribute. eg. card

Collection List
Style
Settings
Interactions
Custom Attributes
Name
vdx-nest-this
Value
card

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.

CMS Nest Example

Blog Category A

Blog Category B