How can I filter and sort "multi-reference" collection items in Webflow?
TL;DR
- Use nested collection lists with conditional visibility to visually filter multi-reference items, though this doesn't affect underlying data or sorting.
- For full filtering and sorting, use custom JavaScript or third-party tools like Finsweet CMS Library, or redesign your CMS structure to avoid multi-reference fields.
Filtering and sorting items from a Webflow Collection with a multi-reference field requires a workaround, as Webflow CMS does not support native filtering/sorting of multi-reference items within collection lists.
1. Understand Webflow's Limitations
- Multi-reference fields let you relate multiple entries from another Collection, but they can't be filtered or sorted using standard Webflow Collection List settings.
- For example, if your Blog Post has a multi-reference field for Authors, you can't directly filter a Collection List to show only posts with a specific Author.
2. Use Nested Collection Lists (with Limits)
- You can display multi-reference items using a Nested Collection List.
- A nested list must be placed within a parent Collection List, and is subject to a limit of 5 items.
- To show filtered referenced items, you must use filters in the parent list, not the nested list.
3. Use Conditional Visibility as a Filter Workaround
- You can mimic filtering by using Conditional Visibility on elements within the nested list.
- Example: Within a nested Authors list, you can hide elements unless they match a specific value (like a current page slug or name).
- Note: This hides content visually but does not change the underlying collection list results or order.
4. Use Custom Code or Third-Party Tools
- For full filtering/sorting functionality on multi-reference fields, consider:
- Custom JavaScript filtering: Load all items and filter them client-side using URL parameters or button clicks.
- Third-party tools like Finsweet’s CMS Library: Allows powerful filtering (including multi-reference support) and sorting.
- Visit: https://www.finsweet.com/cms-library
- Use their CMS Filter and Load components to enable multi-reference filtering dynamically.
5. Flatten the Data Model as an Alternative
- In some cases, you can restructure your CMS to avoid using multi-reference fields:
- Instead, create a "joining" collection, like assigning tags or categories as single references or flat fields.
- This makes your collections more compatible with Webflow’s native filter and sort options.
Summary
Webflow does not natively support filtering or sorting multi-reference collection items. The best approaches are to use nested collection lists with conditional visibility, or integrate custom code or third-party tools like Finsweet for full filtering/sorting control. Alternatively, restructuring your CMS to avoid multi-reference fields may offer the best performance and control.