Filter

Example 6: Filter with a Collection List + with a nested Collection

Filter by color and a native Webflow Nested Collection inside our primary Collection

See Finsweet
Walkthrough

What we will cover

  • The structure of our CMS Collection List

  • Buttons that will filter our Collection List by color and our nested Collection

  • Structure of one unique class to the filter group's parent element and data-attributes to each button

  • Setting up our array (list) to hold all of the filter groups

  • The .filter() component to make our Collection List grid filterable by 1 filter group

We are using exclusive filtering. We need a dynamic list to create our filter buttons. These buttons will filter the native Webflow nested Collection.
Blue
Red
Yellow
Orange
Green
Life Changing
Cool
Funny
Interesting
Redonkulous
Happy
Fun
Awesome
Project 1
2019
Blue
Fun
used cms true

Branding, Web Design

Cool
Happy
Project 2
2020
Blue
Fun
used cms false

Branding

Life Changing
Redonkulous
Happy
Project 3
2017
Red
Not fun
used cms true

Web Design

Cool
Project 4
2018
Yellow
Not fun
used cms false

Development

Happy
Interesting
Project 5
2018
Green
Fun
used cms true

Development

Cool
Funny
Life Changing
Project 6
2018
Blue
Not fun
used cms false

Motion Graphics

Redonkulous
Project 7
2019
Blue
Fun
used cms true

Branding

Funny
Life Changing
Happy
Project 8
2020
Yellow
Fun
used cms false

Web Design

Cool
Happy
Project 9
2020
Orange
Fun
used cms true

Web Design, Development

Happy
Fun
Redonkulous
Life Changing
Interesting
Project 10
2020
Green
Not fun
used cms false

Web Design, Development

Interesting
Project 11
2019
Yellow
Not fun
used cms true

Strategy Consulting

Redonkulous
Life Changing
Interesting
Happy
Funny
Project 12
2017
Red
Not fun
used cms false

Web Design, Development

No items found.
Project 13
2019
Red
Not fun
used cms true

Web Design

Fun
Interesting
Project 14
2020
Red
Fun
used cms false

Strategy Consulting

Interesting
Funny
Life Changing
Project 15
2017
Blue
Fun
used cms true

Branding, Motion Graphics

Redonkulous
Life Changing
Project 16
2018
Blue
Not fun
used cms false

Branding, Web Design

Funny
Life Changing
Awesome
Redonkulous
Project 17
2018
Blue
Fun
used cms true

Strategy Consulting

Life Changing
Cool
Project 18
2018
Red
Fun
used cms false

Branding, Web Design

Interesting
Funny
Fun
Project 19
2019
Yellow
Fun
used cms true

Branding, Web Design

Fun
Project 20
2020
Green
Not fun
used cms false

Branding, Web Design

Happy
Project 21
2020
Blue
Not fun
used cms true

Branding, Strategy Consulting

No items found.
Project 22
2020
Blue
Fun
used cms false

Branding, Strategy Consulting

No items found.
Project 23
2019
Yellow
Not fun
used cms true

Motion Graphics

No items found.
Project 24
2017
Orange
Fun
used cms false

Motion Graphics

No items found.
Project 25
2019
Green
Fun
used cms true

Branding, Web Design

No items found.
Project 26
2020
Yellow
Fun
used cms false

Branding

No items found.
Project 27
2017
Red
Not fun
used cms true

Web Design

No items found.
Project 28
2018
Red
Not fun
used cms false

Development

No items found.
Project 29
2018
Red
Not fun
used cms true

Development

No items found.
Project 30
2018
Blue
Not fun
used cms false

Motion Graphics

No items found.
Project 31
2019
Blue
Fun
used cms true

Branding

No items found.
Project 32
2020
Blue
Fun
used cms false

Web Design

No items found.
Project 33
2020
Red
Not fun
used cms true

Web Design, Development

No items found.
Project 34
2020
Yellow
Fun
used cms false

Web Design, Development

No items found.
Project 35
2019
Green
Fun
used cms true

Strategy Consulting

No items found.
Project 36
2017
Blue
Fun
used cms false

Web Design, Development

No items found.
Project 37
2019
Blue
Not fun
used cms true

Web Design

No items found.
Project 38
2020
Yellow
Not fun
used cms false

Strategy Consulting

No items found.
Project 39
2017
Orange
Fun
used cms true

Branding, Motion Graphics

No items found.
Project 40
2018
Green
Not fun
used cms false

Branding, Web Design

No items found.
Project 41
2018
Yellow
Fun
used cms true

Strategy Consulting

No items found.
Project 42
2018
Red
Fun
used cms false

Branding, Web Design

No items found.
Project 43
2019
Red
Fun
used cms true

Branding, Web Design

No items found.
Project 44
2020
Red
Not fun
used cms false

Branding, Web Design

No items found.
Project 45
2020
Blue
Not fun
used cms true

Branding, Strategy Consulting

No items found.
Project 46
2020
Blue
Not fun
used cms false

Branding, Strategy Consulting

No items found.
Project 47
2019
Blue
Not fun
used cms true

Motion Graphics

No items found.
Project 48
2017
Red
Fun
used cms false

Motion Graphics

No items found.
Project 49
2019
Yellow
Fun
used cms true

Branding, Web Design

No items found.
Project 50
2020
Green
Not fun
used cms false

Branding

No items found.
Project 51
2017
Blue
Fun
used cms true

Web Design

No items found.
Project 52
2018
Blue
Fun
used cms false

Development

No items found.
Project 53
2018
Yellow
Fun
used cms true

Development

No items found.
Project 54
2018
Orange
Not fun
used cms false

Motion Graphics

No items found.
Project 55
2019
Green
Not fun
used cms true

Branding

No items found.
Project 56
2020
Yellow
Fun
used cms false

Web Design

No items found.
Project 57
2020
Red
Not fun
used cms true

Web Design, Development

No items found.
Project 58
2020
Red
Fun
used cms false

Web Design, Development

No items found.
Project 59
2019
Red
Fun
used cms true

Strategy Consulting

No items found.
Project 60
2017
Blue
Fun
used cms false

Web Design, Development

No items found.
Project 61
2019
Blue
Not fun
used cms true

Web Design

No items found.
Project 62
2020
Blue
Not fun
used cms false

Strategy Consulting

No items found.
Project 63
2017
Red
Not fun
used cms true

Branding, Motion Graphics

No items found.
Project 64
2018
Yellow
Not fun
used cms false

Branding, Web Design

No items found.
Project 65
2018
Green
Fun
used cms true

Strategy Consulting

No items found.
Project 66
2018
Blue
Fun
used cms false

Branding, Web Design

No items found.
Project 67
2019
Blue
Not fun
used cms true

Branding, Web Design

No items found.
Project 68
2020
Yellow
Fun
used cms false

Branding, Web Design

No items found.
Project 69
2020
Orange
Fun
used cms true

Branding, Strategy Consulting

No items found.
Project 70
2020
Green
Fun
used cms false

Branding, Strategy Consulting

No items found.
Project 71
2019
Yellow
Not fun
used cms true

Motion Graphics

No items found.
Project 72
2017
Red
Not fun
used cms false

Motion Graphics

No items found.
Project 73
2019
Red
Fun
used cms true

Branding, Web Design

No items found.
Project 74
2020
Red
Not fun
used cms false

Branding

No items found.
Project 75
2017
Blue
Fun
used cms true

Web Design

No items found.
Project 76
2018
Blue
Fun
used cms false

Development

No items found.
Project 77
2018
Blue
Fun
used cms true

Development

No items found.
Project 78
2018
Red
Not fun
used cms false

Motion Graphics

No items found.
Project 79
2019
Yellow
Not fun
used cms true

Branding

No items found.
Project 80
2020
Green
Not fun
used cms false

Web Design

No items found.
Project 81
2020
Blue
Not fun
used cms true

Web Design, Development

No items found.
Project 82
2020
Blue
Fun
used cms false

Web Design, Development

No items found.
Project 83
2019
Yellow
Fun
used cms true

Strategy Consulting

No items found.
Project 84
2017
Orange
Not fun
used cms false

Web Design, Development

No items found.
Project 85
2019
Green
Fun
used cms true

Web Design

No items found.
Project 86
2020
Yellow
Fun
used cms false

Strategy Consulting

No items found.
Project 87
2017
Red
Fun
used cms true

Branding, Motion Graphics

No items found.
Project 88
2018
Red
Not fun
used cms false

Branding, Web Design

No items found.
Project 89
2018
Red
Not fun
used cms true

Strategy Consulting

No items found.
Project 90
2018
Blue
Fun
used cms false

Branding, Web Design

No items found.
Project 91
2019
Blue
Not fun
used cms true

Branding, Web Design

No items found.
Project 92
2020
Blue
Fun
used cms false

Branding, Web Design

No items found.
Project 93
2020
Red
Fun
used cms true

Branding, Strategy Consulting

No items found.
Project 94
2020
Yellow
Fun
used cms false

Branding, Strategy Consulting

No items found.
Project 95
2019
Green
Not fun
used cms true

Motion Graphics

No items found.
Project 96
2017
Blue
Not fun
used cms false

Motion Graphics

No items found.
Project 97
2019
Blue
Not fun
used cms true

Branding, Web Design

No items found.
Project 98
2020
Yellow
Not fun
used cms false

Branding

No items found.
Project 99
2017
Orange
Fun
used cms true

Web Design

No items found.
Project 100
2018
Green
Fun
used cms false

Development

No items found.
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.

More examples
1 filter, exclusive
1 filter, multi
2 filters, exclusive and multi
Filter by search
Really crazy complex filter with every filter option
1 nested collection, dynamic filter buttons
Load More
Component
Sort
Component
Made with
by