The Hierarchical Menu facet is used to create a navigation based on a hierarchy of facet fields. It is commonly used for categories with subcategories.
The objects to use in the hierarchical menu must follow this structure:
|fields||Array of Aggregation fields to be used, preferably a field that is raw, not tokenized. Ordered in the array in their hierarchy.|
|identifier||Required to be unique. Used to apply filters on field|
|label||UI label for facet. Used by @searchkit/elastic-ui components|
|display||Optional. Used on UI to specify what component to handle facet|
You can use GraphQL summary node to provide you what filters have been applied and the search query. list below is all possible values that summary node provides and with graphQL, you can specify what fields you need.
- Notice how the filters are applied with the level property added.
- Within facets, entries can return sub entries for hierarchical facets when they are selected. The GQL example supports up to 3 levels but you can add more sub levels, depending on how many sub category fields you have
If you use the FacetList component, the hierarchical component should work out the box.
FilterLinkReact component. This will provide both href url (if routing has been switched on) / onClick handler to remove the filter. See FilterLink API documentation for more information.