Webflow Smart Filtering

Filter elements and Collection Lists.

View the Demos
DEMO #1

Filter, by eval

The wfu-filter-eval attribute is set on the SVG DIV containers.

  • See the attribute on the DIV blocks containing each SVG element.

NO-CODE, attributes-only solution.

How to implement

Morning v. Afternoon

This filter demo evaluates the local time. If it's before noon, it shows a morning image. If it's after noon, it shows an evening image.

DEMO #1

Filter, by func

This demo uses the wfu-filter-func attribute to identify a function, which evaluates the node for filtering.

  • See the attribute on the Collection Item element.
  • See the Specials CMS collection to see the implementation there.

LO-CODE, attributes solution.

How to implement

This month's special.

Here we are filtering 12 collection items that show a monthly special. Only the current month isshown.

Winter Wonderland Deals

Celebrate the festive season with our December specials.

December

Thanksgiving Treats

Special offers to be thankful for!

November

Fall Fiesta

Embrace the autumn chill with our special offers.

October

Back to School Bargains

Gear up for school with exclusive deals!

September

Summer Escape Specials

Beat the heat with our cool August offers.

August

July Jubilee

Independence month specials you won't want to miss!

July

Valentine's Serenade

Book a romantic getaway for two this month!

February

New Year's Wellness Boost

Kick off the year with a rejuvenating wellness package!

January

Easter Extravaganza

Exclusive offers for all your Easter needs!

April

Spring Bloom Offer

Spring into action with our special March discounts!

March

May Flowers Special

Celebrate the bloom with a floral retreat.

May

Summer Kickoff Sale

Dive into summer with these sizzling deals!

June

DEMO #1

Filter, by CSS selector match

Uses the wfu-filter-match attribute to specify a CSS selector.

  • See the attribute on the Collection Item element.
  • See the Specials CMS collection to see the implementation there.

NO-CODE, attributes-only solution.

How to implement

This month's special.

Here we are filtering 12 collection items that show a monthly special. Only the current month isshown.

Winter Wonderland Deals

Celebrate the festive season with our December specials.

December

Thanksgiving Treats

Special offers to be thankful for!

November

Fall Fiesta

Embrace the autumn chill with our special offers.

October

Back to School Bargains

Gear up for school with exclusive deals!

September

Summer Escape Specials

Beat the heat with our cool August offers.

August

July Jubilee

Independence month specials you won't want to miss!

July

Valentine's Serenade

Book a romantic getaway for two this month!

February

New Year's Wellness Boost

Kick off the year with a rejuvenating wellness package!

January

Easter Extravaganza

Exclusive offers for all your Easter needs!

April

Spring Bloom Offer

Spring into action with our special March discounts!

March

May Flowers Special

Celebrate the bloom with a floral retreat.

May

Summer Kickoff Sale

Dive into summer with these sizzling deals!

June