Skip to main content

Hierarchical Menu

Returns a list of facet options in a hierarchy that can be applied to refine the result set. When one level is selected, the next level is populated with the children of the selected option.

Elasticsearch Mapping

Below is an example mapping for the field actors. We need to use a keyword field type for this facet.

{
"properties": {
"category1": {
"type": "text",
"fields": {
"raw": {
"type": "keyword"
}
}
}
},
"category2": {
"type": "text",
"fields": {
"raw": {
"type": "keyword"
}
}
},
"category3": {
"type": "text",
"fields": {
"raw": {
"type": "keyword"
}
}
}
}

HierarchicalMenuFacet

Usage

{
HierarchicalMenuFacet
} from '@searchkit/sdk'

const searchkitConfig = {
...
facets: [
new HierarchicalMenuFacet({
fields: ['categories1', 'categories2', 'categories3'],
identifier: 'categories',
label: 'Categories'
})
]
}

const request = Searchkit(searchkitConfig);
const response = await request
.setFilters([
{identifier: 'categories', value: 'Clothing', level: 1},
{identifier: 'categories', value: 'Shoes', level: 2},
])
.execute({
facets: true,
hits: {
size: 10,
from: 0
},
});

Response

  {
"hits": {
"items": [
// 10 items
],
"page": {
"from": 0,
"pageNumber": 0,
"size": 10,
"total": 11,
"totalPages": 2
}
},
"sortedBy": undefined,
"facets": [
{
"display": "HierarchicalMenuFacet",
"entries": [
{
"count": 73,
"label": "Clothing",
},
{
"count": 56,
"label": "Shoes",
"entries": [
{
"count": 56,
"label": "Trainers",
},
{
"count": 23,
"label": "Boots",
}
]
},
{
"count": 56,
"label": "Sport",
}
]
"identifier": "categories",
"label": "Categories",
"type": "HierarchicalMenuFacet"
},
],
"summary": {
"appliedFilters": [
{
"display": "ListFacet",
"id": "categories_clothing",
"identifier": "categories",
"label": "Categories",
"value": "Clothing",
"level": 1
},
{
"display": "ListFacet",
"id": "categories_shoes",
"identifier": "categories",
"label": "Categories",
"value": "Shoes",
"level": 2
},
],
"disabledFilters": [],
"query": "",
"sortOptions": [],
"total": 11
}
}

Options

OptionDescription
fieldAggregation field to be used, preferably a field that is raw, not tokenized
idRequired to be unique. Used to apply filters on field
labelUI label for facet. Used by @searchkit/elastic-ui components
displayOptional. Used on UI to specify what component to handle facet