Hierarchical Tree Menu with Select Box (instantsearch)

Hello guys, I’m here to show you a widget I’ve built to convert hierarchical menus from tree-like text to select boxes!

Unfortunately only two levels of depth are currently supported right now.


This is awesome, thank you for the contribution @giampaolofalqui :heart:

Here is a jsfiddle of your widget, which is working perfectly: https://jsfiddle.net/tc1938hk/

Did you run in any issues while creating your custom widget? Or some thoughts on how can we improve the connectors API?

Cheers, Maxime.

1 Like

Thank you @iam4x ! :heart:

I’ve had a couple of issues at making the widget support unlimited hierarchy levels, because I couldn’t save the currentSelectedValue for different depths. Also, if you unselect, above the first depth, the option, it automatically unselects also the first option, removing the filter entirely, instead of keeping at least the first option.

Sounds like a mindfuck, but for example you can see as well in the jsfiddle that if you select Audio (1570) and then you choose a sub-category, whenever you try to de-select the sub-category, also Audio (1570) gets automatically deselected.

The second thing is that if you use the active refined filters widget and you have selected a category, and a sub-category, only the sub-category is shown, instead of both with the correct label.

Other than that, it’s pretty easy!


1 Like


Thanks for sharing your code snippet for that =)

Are you aware of the same kind of component for Algolia ReactJS by any chance ?