Need help to create a drop down menu filtering collection list

Design help Animations & Interactions
1

Hi,

I have a problem creating a drop down that filters the collection list. All of my blog posts are linked to the categories CMS. I want to create a drop down that filters the categories list (News, Events) and the default list should be All.

Currently, my collection list is linked to each page of the categories, but I want the results to be regenerated based on the filter, not go to a new page. Here is an example (http://dynamic-search.webflow.io/). But I want a drop down, instead of buttons. Here is a video explaining the problem further: - YouTube

Please let me know if you figure it out! Thank you!

Here is my read-only project link: https://preview.webflow.com/preview/elevat-iot?utm_medium=preview_link&utm_source=designer&utm_content=elevat-iot&preview=e7ef5111908793cc0d33ad12cabe2f3d&pageId=5ce4601f881a4d11935dae47&mode=preview

Here is my public share link: LINK

2

Use mixItUp (Or isotope) - (No “example” as-is for dropdowns but the idea is the same).

*You find more tutorials/examples about webflow & mixitup VS isotope

For now no use of “custom JS” (Your link is “regular” “current” link).

image
image

Starter:

MixItUp Licenses:

3

I will look into it. Thank you!!

4

Learn mixItUp in general by youtube/google/codepens + Use Starter .
Not so hard to solve this by webflow.

Than add live-URL // Read-Only + Specific Q.

**copy-paste mixitup code (CSS/JS) only for the relevant pages (Not for the “entire site”).

5

This may help the community later:

6

Hi @Esther_Lin, were you ever able to find a good solution for this problem? I am looking to do the same