Hierarchical filters
What you're building: a category tree where choosing a parent reveals its children — Clothing → Shoes → Trainers.
Two different things called hierarchy
Pick the right one before building:
| Your data | Use |
|---|---|
One field holding a path, Clothing > Shoes > Trainers | Hierarchical filters — this page |
Separate facets that relate, country and region | Cascading filters |
Hierarchical is one facet with levels. Cascading is several facets that narrow each other.
What you need
- Applies toA Div inside the browse wrapper
One group per level.
- Applies toThe group
The level this group renders.
- Applies toThe parent group
Names the level so children can point at it.
- Applies toThe child group
Scopes this level to the parent selection.
In Algolia first
Algolia's convention is one attribute per level:
{
"categories.lvl0": "Clothing",
"categories.lvl1": "Clothing > Shoes",
"categories.lvl2": "Clothing > Shoes > Trainers"
}
Each level repeats the full path. Declare every level as a facet.
Then in Webflow
One filter group per level, chained with group-id and refines:
<div
wf-algolia-element="filter-group"
wf-algolia-field="categories.lvl0"
wf-algolia-group-id="lvl0"
></div>
<div
wf-algolia-element="filter-group"
wf-algolia-field="categories.lvl1"
wf-algolia-refines="lvl0"
wf-algolia-group-id="lvl1"
></div>
Showing only the leaf
Because each level stores the full path, labels read
Clothing > Shoes > Trainers.
renders only the last segment — Trainers — which is almost always what you want
in a list.
Before a parent is chosen
controls each child level:
disable (default) or hide.
Levels must chain in one direction. Two groups pointing at each other log
Cycle detected in hierarchy at and stop.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Labels show the full path | Default label mode | wf-algolia-label="leaf" |
| The child level is always empty | Level attributes are not faceted in Algolia | Declare every level |
| The child ignores the parent | group-id and refines do not match | Exact strings |
| Everything renders at once | No refines on the child groups | Chain them |