---
title: Coveo Dynamic Hierarchical Facet
slug: '3209'
canonical_url: https://docs.coveo.com/en/3209/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Coveo Dynamic Hierarchical Facet
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.


[.version.c4sc.c4sc-new.5-0-943-3.March-26&-2021]
[Coveo for Sitecore 5.0.943.3](https://docs.coveo.com/en/l22b0522#release-notes)


Implements the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) [DynamicHierarchicalFacet](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html) component to display a [facet](https://docs.coveo.com/en/198/) that renders values in a hierarchical fashion.
The **Coveo Dynamic Hierarchical Facet** is an evolution over the [Coveo Category Facet](https://docs.coveo.com/en/3068/) rendering, particularly because it implements [Dynamic Navigation Experience](https://docs.coveo.com/en/3383/).

## Usage notes

* To use the **{doctitle}** rendering, you first need to:

** have a content tree structure, such as the one below.

![Content Tree Category Structure | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/category-facet-content-tree.png)

** create a `Single-Line Text` (or `Multi-Line Text`) field, such as the `ParentCategories` field in the example below, listing the paths to each parent folder of the item.
See [Insert a Category Facet - Example](https://docs.coveo.com/en/2791#example) for more details about the format of values for this field.

![Multi value example | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/category-facet-parent-categories-value.png)

** index that `Single-Line Text` or `Multi-Line Text` field as a [multi-value facet](https://docs.coveo.com/en/2377/).

* To benefit from the automatic facet reordering functionality, group **{doctitle}** renderings and other dynamic facets (for example, [Coveo Dynamic Facets](https://docs.coveo.com/en/3206/) and [Coveo Dynamic Numeric Facet Ranges](https://docs.coveo.com/en/3208/)) within a [Coveo Dynamic Facet Manager](https://docs.coveo.com/en/3207/).

* **{doctitle}** renderings may also be used as standalone facets without a **Coveo Dynamic Facet Manager**.

* Any change to the facet selection triggers a new Search API call.

* You can [display a dynamic facet only when a specific value is selected in another facet](https://docs.coveo.com/en/2788#example-2-display-a-facet-only-when-a-specific-value-is-selected-in-its-parent).

* You can [customize the CSS](https://docs.coveo.com/en/2342/) associated with this rendering.

## Insertion location


<div>
<h3>Coveo Hive</h3>
  <p>The <strong>Coveo Dynamic Hierarchical Facet</strong> rendering is an Allowed Control in the following placeholder(s): <code class="highlighter-rouge">Dynamic Facets</code>, <code class="highlighter-rouge">Facets</code></p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/dynamic-hierarchical-facet-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Dynamic Hierarchical Facet</strong> rendering.
  </div>
</div>
<div>
<h3>Coveo Hive SXA</h3>
  <p>When you add the <strong>Coveo Dynamic Facet Manager</strong> SXA rendering, this adds a <code class="highlighter-rouge">coveouidynamicfacetssxa</code> placeholder. Insert your <strong>Coveo Dynamic Hierarchical Facet</strong> rendering in this <code class="highlighter-rouge">coveouidynamicfacetssxa</code> placeholder.</p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/dynamic-hierarchical-facet-sxa.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Dynamic Hierarchical Facet</strong> rendering.
  </div>
</div>

## Data source options

The following table lists the available data source options for this rendering.

[%header,cols="33%,66%"]
|===
|Option name
|Description

|Title
|See the [title](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.title) component option.

|Field
|See the [field](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.field) component option.

|Facet ID
|See the [id](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.id-1) component option.

|Depends on
|The data source `Facet ID` value of another facet that this facet depends on.
See the [dependsOn](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.dependson) component option.

|Enable collapse
|See the [`enableCollapse`](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.enablecollapse) component option.

|Facet collapsed by default
|See the [collapsedByDefault](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.collapsedbydefault) component option.

|Enable more/less button
|See the [enableMoreLess](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.enablemoreless) component option.

|Scroll back to the top of the page on interaction
|See the [enableScrollToTop](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.enablescrolltotop) component option.

|Exclude folded result parents
|See the [filterFacetCount](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.filterfacetcount) component option.

|Notify the breadcrumb component
|See the [includeInBreadcrumb](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.includeinbreadcrumb) component option.

|Facet accuracy determined by the number of scanned results
|See the [injectionDepth](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.injectiondepth) component option.

a|{empty}
--


[.version.c4sc.c4sc-new.5-0-943-3.March-26&-2021]
[Coveo for Sitecore 5.0.943.3](https://docs.coveo.com/en/l22b0522#release-notes)


--
Custom sort order
|See the [`customSort`](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.customsort) component option.

|Number of values
|See the [numberOfValues](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.numberofvalues) component option.

a|{empty}
--


[.version.c4sc.c4sc-new.5-0-943-3.March-26&-2021]
[Coveo for Sitecore 5.0.943.3](https://docs.coveo.com/en/l22b0522#release-notes)


--
Custom sort delimiting character
|See the [customSortDelimitingCharacter](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.customsortdelimitingcharacter) component option.

|Mapping of facet values to the desired caption
|See the [`valueCaption`](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.valuecaption) component option.

|Clear facet label
|See the [`clearLabel`](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.clearlabel) component option.

|Delimiting character that specifies the hierarchical dependency
|See the [`delimitingCharacter`](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html#options.delimitingcharacter) component option.

|DOM unique ID
a|{empty}
--
Randomly generated HTML element ID.
--

|Additional data attributes
a|{empty}
--
Allows [use of the Coveo JavaScript Search Framework **DynamicHierarchicalFacet** component options](https://docs.coveo.com/en/2776/) that aren't directly available in the data source.
--
|===

## Sample generated HTML and corresponding visual output

You have a structure such as the following in your Sitecore Content Editor.

![Sample Structure | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/dyn-hier-facet-samplestructure.png)

You use a field called `ParentCategories` to specify the path to an item in that structure.
The item selected in the above screenshot has the following `ParentCategories` value.

![ParentCategory sample value | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/dyn-hier-facet-parent-categories-value.png)

**Generated HTML:**

```html
<div id="coveodb691f83" class="CoveoDynamicHierarchicalFacet" data-prebind-field="fieldTranslator"
data-field="@parentcategories" data-title="Categories" data-id="Categories" data-injection-depth="1000"
data-delimiting-character="|" data-collapsed-by-default="true" data-enable-collapse="true"
data-enable-scroll-to-top="false" data-filter-facet-count="false" data-include-in-breadcrumb="true"
data-applied-prebind="true">
```

**Visual output:**

![Dyn Hierarchical Facet animation | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/dynamic-hierarchical-facet-animation.gif)