# Hierarchical Facets using out-of-the-box Search UI
**URL:** https://discuss.elastic.co/t/hierarchical-facets-using-out-of-the-box-search-ui/316314
**Category:** Elastic Search
**Tags:** elastic-app-search
**Created:** [October 11, 2022, 10:29am UTC](https://discuss.elastic.co/t/hierarchical-facets-using-out-of-the-box-search-ui/316314 "2022-10-11T10:29:59Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Rustin\_Spencer](https://discuss.elastic.co/u/Rustin_Spencer)
#### Post date: [October 11, 2022, 10:29am UTC](https://discuss.elastic.co/t/hierarchical-facets-using-out-of-the-box-search-ui/316314/1 "2022-10-11T10:29:59Z")
I'm trying to implement hierarchical facets (Province -\> District) using out-of-the-box Search UI. With searchDriver can I do facets like this
```auto
Province 1
- District 1-1
- District 1-2
Province 2
- District 2-1
- District 2-2
```
---
### Author:  [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [October 11, 2022, 11:53am UTC](https://discuss.elastic.co/t/hierarchical-facets-using-out-of-the-box-search-ui/316314/2 "2022-10-11T11:53:35Z")
The easiest way to implement this is to make District a separate facet, rather than trying to do a hierarchy: [First class support for Hierarchical facets · Issue #285 · elastic/search-ui · GitHub](https://github.com/elastic/search-ui/issues/285#issuecomment-1188032266)
---
### Author:  [@Rustin\_Spencer](https://discuss.elastic.co/u/Rustin_Spencer)
#### Post date: [October 11, 2022, 8:46pm UTC](https://discuss.elastic.co/t/hierarchical-facets-using-out-of-the-box-search-ui/316314/3 "2022-10-11T20:46:31Z")
But how would I know that District 2-1 actually related to Province 2?
---
### Author:  [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [October 12, 2022, 3:14pm UTC](https://discuss.elastic.co/t/hierarchical-facets-using-out-of-the-box-search-ui/316314/4 "2022-10-12T15:14:17Z")
In that case, there is no direct relationship between the two. You'd have your data structured like so:
```auto
{
"id": 1,
"province": "Province 1",
"district": "District 1-1"
},
{
"id": 2,
"province": "Province 1",
"district": "District 1-2"
},
{
"id": 3,
"province": "Province 2",
"district": "District 2-1"
}
```
You would facet on "province", first, which would allow you to show the entire list of Provinces:
```auto
Provinces:
[] Province 1
[] Province 2
```
After a user has selected a province (or in other words, has applied a filter on "province"), you can then facet on "district".
At this point, since you're data is filtered on a particular "province", like "Province 1", for instance, you'd only see results "district" facets for districts that are actually in "Province 1".
```auto
Provinces:
[x] Province 1
District:
[] District 1-1
[] District 1-2
```
Similarly, if a user would have selected "Province 2", you would then only see district values that are
in Province 2.
```auto
Provinces:
[x] Province 2
District:
[] 2-1
```
Does that make sense?
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [November 9, 2022, 3:14pm UTC](https://discuss.elastic.co/t/hierarchical-facets-using-out-of-the-box-search-ui/316314/5 "2022-11-09T15:14:25Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.