How can I create a dropdown menu in Webflow's projects page that allows users to sort projects by sectors and tags?
TL;DR
- Create CMS collections including multi-reference or option fields for Sectors and Tags.
- Add dropdown elements with filter options for each category.
- For dynamic filtering, use Jetboost or custom JavaScript; for static filtering, use Webflow’s native collection filters.
- Style dropdowns and test across devices for a smooth user experience.
To create a dropdown menu to sort projects by sectors and tags in Webflow, you’ll need to use collection lists, filters, and custom interactions or optionally Webflow’s CMS filtering features with third-party tools like Jetboost or custom JavaScript.
1. Set Up CMS Collections
- Ensure you have a CMS collection for your projects.
- Include multi-reference fields or option fields for Sectors and Tags.
- If using a multi-reference field (e.g., linking to a separate Tags/Sectors collection), create those collections as well.
2. Add Dropdown Menus
- Add a Dropdown element to your page from the Add panel.
- In the Dropdown List, add Text Links or Buttons for each sector or tag.
- Duplicate this dropdown for both Sectors and Tags, if needed.
3. Implement Filtering (Two Options)
Option A: Native Filter (Static)
- This only works if your dropdown filters link to different CMS template pages or use pre-filtered CMS collections.
- Could create duplicate pages/sections with filtered collections using Webflow’s native Collection List Filters.
- Not scalable nor dynamic.
Option B: Real-Time Filtering (Recommended)
- Use a third-party tool such as Jetboost:
- Jetboost allows dynamic CMS filtering without code.
- Integrate Jetboost’s CMS Filters booster to filter by multi-reference fields like sectors and tags.
- You can customize dropdown elements to act as filter toggles using Jetboost’s attributes.
- Or, use custom JavaScript with
Mixitup.jsorIsotope.jsfor advanced UI filtering, but this requires manual setup and code.
4. Style and Test
- Style the dropdown menus to match your design.
- Label each list item clearly to make filtering intuitive.
- Test the filters on different devices to ensure functionality.
Summary
To let users sort projects by sectors and tags using dropdowns on a Webflow CMS page, use dropdown menus for filtering and combine them with either Jetboost for dynamic filtering or custom JavaScript for full control. Webflow alone offers limited real-time filtering capabilities without third-party support.