This component adds dynamic filtering to your CMS collections. It automatically creates interactive dropdown filters based on the data in your CMS, letting visitors filter through your content in real-time. Choose between single-select dropdowns for exclusive filtering or multi-select options with checkboxes.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy and paste the CMS Filter Component into your Framer project
Connect your CMS collection to the "Collection" property in the component - ensure you remove any native Framer pagination from your collection as this component won't work with it
Add filters by clicking the "+" button in the Filters section - for each filter, select the Type (Single Select or Multi Select) and enter the Layer Name that matches a text layer inside your CMS Card
Make sure the Layer Name in your filter exactly matches the name of a text layer (not a container) inside your CMS Card - this is how the component knows which data to filter
Choose your Layout type (Vertical Stack, Horizontal Stack, or Grid) and adjust the gap between items
Customize the filter button appearance, dropdown styling, and checkbox design through the property controls - adjust colors, fonts, padding, borders, hover effects, and spacing
(Optional) Connect a custom component to the Empty State property to show when no items match the filters
(Optional) Enable Debug mode to verify your layer names are correctly set up
The filtering system works by matching layer names between your filters and the text layers inside your CMS Card. Here's how it works:
The Key Rule: The "Layer Name" you enter in the Filters property control must exactly match the name of a text layer (not a container) inside your CMS Card.
For example:
If you create a filter with Layer Name "Category", there must be a text layer named "Category" inside your CMS Card
If you create a filter with Layer Name "Color", there must be a text layer named "Color" inside your CMS Card
The layer name is case-sensitive and must match exactly
The component will automatically detect all unique values from those text layers across your CMS items and create filter options.
Collection Connection: Connect the component to your CMS collection using the Collection property. The component will read your CMS data and generate filters automatically. Important: This component won't work with native Framer pagination - make sure to remove any pagination settings from your collection before using this component.
Filters: Add filters by clicking the "+" button in the Filters property. Each filter needs two settings:
Type: Choose Single Select (one option at a time) or Multi Select (multiple options with checkboxes)
Layer Name: Enter the exact name of the text layer inside your CMS Card that contains the values you want to filter by
Layout Options: Choose how filtered items display - Vertical Stack, Horizontal Stack, or Grid. For Grid layout, set the number of columns. Adjust the gap between items to control spacing.
Button Styling: Customize filter button appearance with separate styles for default and active states. Control text colors, backgrounds, hover effects, padding, borders, shadows, and fonts. The icon section lets you customize the dropdown arrow size, color, and spacing.
Dropdown Styling: Control how the dropdown menu looks with background color, border radius, shadows, and borders. Customize option styles including hover states, active selection colors, and fonts. For multi-select filters, style the checkboxes with custom sizes, colors, and border radius.
Empty State: Connect a custom component to show when no items match the selected filters. If left empty, a default "No items match your filters" message appears.
Debug Mode: Enable to see the data being read from each CMS item for troubleshooting filter setup.
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
