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

Cool, Happy
Project 2

Branding

Life Changing, Redonkulous, Happy
Project 3

Web Design

Cool
Project 4

Development

Happy, Interesting
Project 5

Development

Cool, Funny, Life Changing
Project 6

Motion Graphics

Redonkulous
Project 7

Branding

Funny, Life Changing, Happy
Project 8

Web Design

Cool, Happy
Project 9

Web Design, Development

Happy, Fun, Redonkulous, Life Changing, Interesting, Funny
Project 10

Web Design, Development

Interesting
Project 11
Redonkulous, Life Changing, Interesting, Happy, Funny, Awesome, Fun, Cool
Project 12
we have no tags here!
Project 13
Fun, Interesting
Project 14
Interesting, Funny, Life Changing
Project 15
Redonkulous, Life Changing
Project 16
Funny, Life Changing, Awesome, Redonkulous
Project 17
Life Changing, Cool
Project 18
Interesting, Funny, Fun
Project 19
Fun
Project 20
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.

Made in Webflow