Explore mega-menu
What you're building: a navigation panel whose categories come from your index rather than being hand-maintained, with example products inside it.
This is an assembly rather than a single feature. It combines standalone filter groups for the category columns with hit previews for the examples.
The payoff is that the menu never goes stale: categories appear and disappear as the index changes.
What you need
- Applies toEach category column
Renders live facet values.
- Applies toEach group
Required outside a browse wrapper.
- Applies toEach group
Where each category links to.
Build it
1. Design the panel in Webflow as you normally would — a dropdown, a nav panel, whatever fits.
2. Make each column a standalone filter group, pointed at the facet it represents, with its own index and link template.
3. Add previews where you want examples, one hit preview per category you want to illustrate.
4. Slugify the values so the links are clean: .
Watch the query count
Every column and every preview is a query. A menu with six columns and four previews issues ten requests as the page loads — before the visitor has done anything.
If the panel is hidden until hover, the queries still run at page load unless the markup is absent until then. Where the menu is large, prefer rendering previews only for the panel actually opened.
Keeping it in step with the listing
Point the link templates at a browse page carrying
wf-algolia-url-sync="true", so arriving from the menu lands on the filtered
view and the URL stays shareable.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Columns are empty | Each group needs its own wf-algolia-index | There is no wrapper to inherit from |
| Links 404 | Values contain spaces or punctuation | Add wf-algolia-slugify |
| The landing page ignores the filter | The destination has no URL sync | Add wf-algolia-url-sync="true" |
| The page is slow | Too many simultaneous previews | Reduce them |