Hierarchical menu show more + hide all parents option


Is there a way to add the show more option to the Hierarchical menu? (React seems to have it, but not the JS version)

Also an option/method to hide all the parents when you click one, and not only the last parent item? So you create a menu->submenu filter. Where you only show the current menu items, and not its parents.

  • Car
  • Kitchen
  • Video

Then when you then click “car”

  • Audi
  • BMW
  • Mercedes

And not like it shows now:

  • Car
    – Audi
    – BMW
    – Mercedes
  • Kitchen
  • Video

Is this possible with the Hierarchical object structure (without trying to hide everything with CSS :stuck_out_tongue: ), or must i change the objects structure and use some different conditional widgets?


Hi @tsmits

I don’t think it’s possible to hide all parents either with widgets react or JS only flavours of instantsearch.
You can however achieve this by using the connector connectHierarchicalMenu and creating your own widget on top.

This gives you full control of the rendering.

The CSS option might be faster: hack around with .hierarchical-menu--list__lvl0 and .hierarchical-menu--list__lvl1 CSS classes that the original widget is putting on the parents.

Ok thanks, i’ll look into it, and else will use the CSS option :slight_smile:

Hi tsmits,
Did you manage to find a way? CSS or by creating a custom component?