Nest

Example 3: 1 nested collection, dynamic filter buttons

Use Nest with a CMS Dynamic List as your filter buttons. Buttons will be added and removed as needed!

See Finsweet
Walkthrough

What we will cover

  • The structure of our CMS Collection List that is visible for the user

  • The structure of our CMS Collection List that is hidden

  • The .nest() and .filter() component to simulate nested Collections and filters through 2 different lists

  • Use a Dynamic List as your filter buttons to filter through your nested items

Filter by Multi Reference. The filtering buttons below are created via Webflow CMS.
Project 1

Branding, Web Design

our multi-reference tags will be 'pasted' here! our text-based list is below
Cool, Happy
Project 2

Branding

our multi-reference tags will be 'pasted' here! our text-based list is below
Life Changing, Redonkulous, Happy
Project 3

Web Design

our multi-reference tags will be 'pasted' here! our text-based list is below
Cool
Project 4

Development

our multi-reference tags will be 'pasted' here! our text-based list is below
Happy, Interesting
Project 5

Development

our multi-reference tags will be 'pasted' here! our text-based list is below
Cool, Funny, Life Changing
Project 6

Motion Graphics

our multi-reference tags will be 'pasted' here! our text-based list is below
Redonkulous
Project 7

Branding

our multi-reference tags will be 'pasted' here! our text-based list is below
Funny, Life Changing, Happy
Project 8

Web Design

our multi-reference tags will be 'pasted' here! our text-based list is below
Cool, Happy
Project 9

Web Design, Development

our multi-reference tags will be 'pasted' here! our text-based list is below
Happy, Fun, Redonkulous, Life Changing, Interesting, Funny
Project 10

Web Design, Development

our multi-reference tags will be 'pasted' here! our text-based list is below
Interesting
Project 11
our multi-reference tags will be 'pasted' here! our text-based list is below
Redonkulous, Life Changing, Interesting, Happy, Funny, Awesome, Fun, Cool
Project 12
our multi-reference tags will be 'pasted' here! our text-based list is below
we have no tags here!
Project 13
our multi-reference tags will be 'pasted' here! our text-based list is below
Fun, Interesting
Project 14
our multi-reference tags will be 'pasted' here! our text-based list is below
Interesting, Funny, Life Changing
Project 15
our multi-reference tags will be 'pasted' here! our text-based list is below
Redonkulous, Life Changing
Project 16
our multi-reference tags will be 'pasted' here! our text-based list is below
Funny, Life Changing, Awesome, Redonkulous
Project 17
our multi-reference tags will be 'pasted' here! our text-based list is below
Life Changing, Cool
Project 18
our multi-reference tags will be 'pasted' here! our text-based list is below
Interesting, Funny, Fun
Project 19
our multi-reference tags will be 'pasted' here! our text-based list is below
Fun
Project 20
our multi-reference tags will be 'pasted' here! our text-based list is below
Happy

Our Multi-Reference Collection List. You can make this 'display: none' on the page

Clone me!

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.