Merge #682

682: Add compatibility with hierarchicalMenu/breadcrumb/RatingsMenu in readme r=bidoubiwa a=bidoubiwa

Per `@gmourier` tests, these widgets are compatible provided that you meet the requirements. 
For example the document structure and the settings.

Co-authored-by: Charlotte Vermandel <[email protected]>
Co-authored-by: cvermand <[email protected]>

Author: bors[bot]

README.md

@@ -195,11 +195,11 @@ List of all the components that are available in [instantSearch](https://github.
 ### Table Of Widgets
 
 - ✅ [InstantSearch](#-instantsearch)
-- ❌[index](#-index)
+- ❌ [index](#-index)
 - ✅ [SearchBox](#-searchbox)
 - ✅ [Configure](#-configure)
-- ❌[ConfigureRelatedItems](#-configure-related-items)
-- ❌[Autocomplete](#-autocomplete)
+- ❌ [ConfigureRelatedItems](#-configure-related-items)
+- ❌ [Autocomplete](#-autocomplete)
 - ✅ [Voice Search](#-voice-search)
 - ✅ [Insight](#-insight)
 - ✅ [Middleware](#-middleware)
@@ -209,27 +209,27 @@ List of all the components that are available in [instantSearch](https://github.
 - ✅ [Highlight](#-highlight)
 - ✅ [Snippet](#-snippet)
 - ✅ [Geo Search](#-geo-search)
-- ❌[Answers](#-answers)
+- ❌ [Answers](#-answers)
 - ✅ [RefinementList](#-refinementlist)
-- ❌[HierarchicalMenu](#-hierarchicalmenu)
+- ✅ [HierarchicalMenu](#-hierarchicalmenu)
 - ✅ [RangeSlider](#-rangeslider)
 - ✅ [Menu](#-menu)
 - ✅ [currentRefinements](#-currentrefinements)
 - ✅ [RangeInput](#-rangeinput)
 - ✅ [MenuSelect](#-menuselect)
 - ✅ [ToggleRefinement](#-togglerefinement)
 - ✅ [NumericMenu](#-numericmenu)
-- ❌[RatingMenu](#-ratingmenu)
+- ✅ [RatingMenu](#-ratingmenu)
 - ✅ [ClearRefinements](#-clearrefinements)
 - ✅ [Pagination](#-pagination)
 - ✅ [HitsPerPage](#-hitsperpage)
-- ❌[Breadcrumb](#-breadcrumb)
+- ✅ [Breadcrumb](#-breadcrumb)
 - ✅ [Stats](#-stats)
-- ❌[Analytics](#-analytics)
-- ❌[QueryRuleCustomData](#-queryrulecustomdata)
-- ❌[QueryRuleContext](#-queryrulecontext)
+- ❌ [Analytics](#-analytics)
+- ❌ [QueryRuleCustomData](#-queryrulecustomdata)
+- ❌ [QueryRuleContext](#-queryrulecontext)
 - ✅ [SortBy](#-sortby)
-- ❌[RelevantSort](#-relevantsort)
+- ❌ [RelevantSort](#-relevantsort)
 - ✅ [Routing](#-routing)
 
 
@@ -606,15 +606,52 @@ instantsearch.widgets.refinementList({
 })
 ```
 
-### ❌ HierarchicalMenu
+### ✅ HierarchicalMenu
 
 [Hierarchical menu references](https://www.algolia.com/doc/api-reference/widgets/hierarchical-menu/js/)
 
-The `hierarchicalMenu` widget is used to create a navigation based on a hierarchy of facet attributes. It is commonly used for categories with subcategories.
+The `hierarchicalMenu` widget is used to create navigation based on a hierarchy of facet attributes. It is commonly used for categories with subcategories. See [usage](#hierarchical-menu-usage) below.
 
-No compatibility because Meilisearch does not support hierarchical facets.
+- ✅ container: The CSS Selector or HTMLElement to insert the refinements. _required_
+- ✅ attribute: The name of the attributes to generate the menu with. _required_.
+- ✅ limit: How many facet values to retrieve.
+- ✅ showMore: Whether to display a button that expands the number of items.
+- ✅ showMoreLimit: The maximum number of displayed items (min `2`).
+- ❌ separator: The level separator used in the records. (default `>`).
+- 🤷‍♀️ rootPath: The prefix path to use if the first level is not the root level.
+- ❌ showParentLevel: Whether to show the siblings of the selected parent level of the current refined value.
+- ✅ sortBy: How to sort refinements. [See guide](https://www.algolia.com/doc/api-reference/widgets/hierarchical-menu/js/#widget-param-sortby)
+- ✅ templates: The templates to use for the widget.- ✅ templates: The templates to use for the widget.
+- ✅ cssClasses: The CSS classes to override.
+
+#### Hierarchical Menu Usage
+To make it work with Meilisearch your documents must have a specific structure, an explanation of the structure can [be found here](https://www.algolia.com/doc/api-reference/widgets/hierarchical-menu/js/#requirements).
+
+Contrary to `instantsearch.js`, the hierarchical fields are added in [`filterableAttributes`](https://docs.meilisearch.com/reference/api/filterable_attributes.html#update-filterable-attributes).
+
+Example:
+Give the following document structure:
+```json
+{
+    "id": 1,
+    "name": "Basic T-shirt",
+    "categories.lvl0": "Men",
+    "categories.lvl1": "Men > clothes",
+    "categories.lvl2": "Men > clothes > t-shirt"
+  }
+```
+
+You have to add the fields `categories.lvl0`, `categories.lvl1` and `categories.lvl2` in the `filterableAttributes` in your Meilisearch settings.
+```json
+{
+  "filterableAttributes": [
+    "categories.lvl0",
+    "categories.lvl1",
+    "categories.lvl2"
+  ]
+}
+```
 
-If you'd like get nested facets/hierarchical facets implemented, please vote for it in the [roadmap](https://roadmap.meilisearch.com/c/97-nested-facets?utm_medium=social&utm_source=portal_share).
 
 ### ✅ RangeSlider
 
@@ -761,13 +798,19 @@ The `numericMenu` widget displays a list of numeric filters in a list. Those num
 - ✅ cssClasses: The CSS classes to override.
 - ✅ transformItems: function receiving the items, called before displaying them.
 
-### ❌ RatingMenu
+### ✅ RatingMenu
 
 [Rating menu references](https://www.algolia.com/doc/api-reference/widgets/rating-menu/js/)
 
 The `RatingMenu` widget lets the user refine search results by clicking on stars. The stars are based on the selected attribute.
 
-No compatibility because Meilisearch does not support integers as facet and instantSearch uses facets information to showcase the UI elements.
+- ✅ container: The CSS Selector or HTMLElement to insert the widget into. _required_
+- ✅ attribute: The name of the attribute in the document. _required_.
+- ✅ max: The maximum value for the rating. This value is exclusive, which means the number of stars will be the provided value, minus one.
+- ✅ templates: The templates to use for the widget.
+- ✅ cssClasses: The CSS classes to override.
+
+Contrary to `instantsearch.js`, To be able to use `RatingMenu` the field containing the rating has to be added in the [`filterableAttributes`](https://docs.meilisearch.com/reference/api/filterable_attributes.html#update-filterable-attributes) setting in your index settings.
 
 ### ✅ ClearRefinements
 
@@ -819,15 +862,19 @@ The `hitsPerPage` widget displays a dropdown menu to let the user change the num
 - ✅ cssClasses: The CSS classes to override.
 - ✅ transformItems: function receiving the items, called before displaying them.
 
-### ❌ Breadcrumb
+### ✅ Breadcrumb
 
 [Breadcrumb references](https://www.algolia.com/doc/api-reference/widgets/breadcrumb/js/)
 
-The `breadcrumb` widget is a secondary navigation scheme that lets the user see where the current page is in relation to the facet’s hierarchy.
+The `breadcrumb` widget is a secondary navigation scheme that lets the user see where the current page is in relation to the facet’s hierarchy. The `HierarchicalMenu` widget has the same requirements, see its [usage](#hierarchical-menu-usage) to make breadcrumb work.
 
-No compatibility because Meilisearch does not support hierarchical facets.
+- ✅ container: The CSS Selector or HTMLElement to insert the refinements. _required_
+- ✅ attribute: The name of the attributes to generate the menu with. _required_.
+- ❌ separator: The level separator used in the records. (default `>`).
+- 🤷‍♀️ rootPath: The prefix path to use if the first level is not the root level.
+- ✅ templates: The templates to use for the widget.- ✅ templates: The templates to use for the widget.
+- ✅ cssClasses: The CSS classes to override.
 
-If you'd like get nested facets implemented, please vote for it in the [roadmap](https://roadmap.meilisearch.com/c/97-nested-facets?utm_medium=social&utm_source=portal_share).
 
 ### ✅ Stats