Select filters
What you're building: a dropdown that filters by one value from a facet, for lists too long to show in full.
Same behaviour as a radio filter, less vertical space.
What you need
- Applies toA Div inside the browse wrapper
The group.
- Applies toThe group
Which facet to filter on.
- Applies toThe group
Renders as a dropdown.
- Applies toOne option inside the select
Cloned per facet value.
Build it
Put a Webflow Select inside the group and mark one <option> as the template.
The script clones it per facet value.
<div
wf-algolia-element="filter-group"
wf-algolia-field="brand"
wf-algolia-type="select"
wf-algolia-default-option="All brands"
>
<select>
<option wf-algolia-element="filter-template"></option>
</select>
</div>
Set to the "All" entry, so the filter can be cleared — a dropdown with no empty choice traps the visitor in a filtered view.
Ordering
Dropdowns are scanned, not searched, so alphabetical usually beats count-descending here: .
When the list is very long
Past a few dozen values a dropdown becomes hard work. Add a typeahead over the values instead — see Filter search.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| The dropdown is empty | The facet is not declared in Algolia | Configuration → Facets |
| No way to clear the filter | No default option | Add wf-algolia-default-option |
| Options appear in a strange order | Default sorting is by result count | wf-algolia-sort="alpha" |
| Several values can be chosen | The element is a multi-select | Use a single select |