The application of attributes to find matching items from a data set.
This is meant to appear inline with the dropdown filters. Entered keywords would be added to the filter collection.
Webflow has no logic engine so you will need to manually script the desired interactions. This example is currently set up for removing the filters one at a time, from left to right, or removing them all at once via Clear All (in production, the Clear All button would automatically vanish if all of the other collected filters were individually removed).
On smaller breakpoints, only the text label and Clear All button are visible as the collected filter buttons are moved to an off canvas.
This example shows the above components combined in the most common pattern, and across all breakpoints. Feel free to customize which components are being used, however the layout and general functionality should not change. Some additional notes for this example ...
Due to Webflow limitations, you will see many unexpected outcomes if you switch between breakpoints after interacting with the pattern. It's therefore recommended that you refresh the page after triggering a different breakpoint.
The labels on the dropdown filters won't automatically change as you check or uncheck their menu options. You can script interactions to change these, if it's important.
The filter collection should also automatically change state as you check or uncheck options, or enter keyword filters into the input, but this example doesn't include that functionality.
This example is currently set up for removing the filters one at a time, from left to right, or removing them all at once via Clear All.
In production, the sorting option would function like a select on larger breakpoints (its label matches the current selection), and as a dropdown button on smaller ones. See the sorting page for more details.
The "Show Next # Filters" button is present only when there are more than 8 filters (including the keyword input) on larger breakpoints.
It's label should reflect the # of additional filters that would be shown when clicked. On larger breakpoints, this value is never greater than 4 because the filters are shown in a 4-up layout (i.e. it shows no more than one additional filter row per click).
On MD breakpoint, this button is present only when there are more than 6 filters because the layout is 3-up per row. It would never show more than 3 additional filters per click because of the 3-up layout.
Using the Clear All button doesn't uncheck options within the filter dropdowns, nor does it change their labels, nor change the contents of the off canvas that's shown on smaller breakpoints. But in production it should do all of these.
The filter rows (including keyword input) are consolidated into a single button, with the number of applied filters appended to the end of the button label as "Filter & Search (#)". Select this button to open an off canvas containing the rest of the filter components.
The "Show Next # Filters" button is not needed because the filter rows are not present.
The collected filters are moved to the off canvas content, although the main page still shows the number of results, and you can still Clear All filters without the inconvenience of opening the off canvas.
The sorting select loses its text label, and it behaves more like a dropdown button.
The current selection is highlighted within the dropdown menu. In this example, "Lowest price" is initially the current selection.
The < Cancel option closes the off canvas without applying any changes.
The Apply button closes the off canvas and applies all changes. This button should be disabled until a change is made within the off canvas, and once enables it doesn't become disabled again.
The Clear All button is a redundant version of the one that remained on the page.
Dropdown filters are replaced with accordions within the off canvas.
All of the filters are shown, with no need for a "Show Next # Filters" button, due to the ease with which users can scroll vertical content on mobile.
Applied filters are now collected at the very bottom of the off canvas, where they can be individually removed.
Typically within in a sidebar, such as a container at the left side of the page. Selected filters are added to the filter collection at the top. This example is set up to either remove the filters one at a time, from left-to-right, or all of them at once via Clear All.
Checking or unchecking a filter should scroll back to the top of the component in order to show the results of the action, however this is not possible in Webflow because checkboxes cannot be inside navigation links.
On smaller breakpoints if filters are applied, then the entire component is replaced with a horizontal option row.
On smaller breakpoints if no filters are applied, then the entire component is replaced with a block button on smaller breakpoints. Select this option while viewing a smaller breakpoint to see the button.
This emulates the UI Core classes using Webflow native tabs.
Option 1 content
Option 2 content
Option 3 content