---
title: Define dependent facets
slug: '3210'
canonical_url: https://docs.coveo.com/en/3210/
collection: javascript-search-framework
source_format: adoc
---
# Define dependent facets
The [`dependsOn`](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.dependson) and [`dependsOnCondition`](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.dependsoncondition) options let you define relationships between facets, so that a _dependent_ facet will only appear when the end user interacts with its specified _parent_ facet.

> **Notes**
>
> * The `dependsOn` option has always been supported by non-dynamic facets, and is supported by dynamic facets since the [December 2019 release (v2.7610)](https://docs.coveo.com/en/3277#december-2019-release-v27610).
> * The `dependsOnCondition` option is supported by all facets since the [April 2020 release (v2.8864)](https://docs.coveo.com/en/m54e5269#2-8864).

## Example 1: Display a facet whenever any value is selected in its parent

You want to display the **Book subgenre** facet whenever any value is selected in the **Book genre** facet.

In such a simple case, all you have to do is set the `dependsOn` option in the markup configuration for the dependent facet.

```html
<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-facet-column">
    <div class="CoveoDynamicFacet"
        data-title="Book genre"
        data-field="@bookgenre"></div>
    <div class="CoveoDynamicFacet"
        data-title="Book subgenre"
        data-field="@booksubgenre"
        data-depends-on="@bookgenre"></div>
  </div>
  <!-- ... -->
</div>
```

## Example 2: Display a facet only when a specific value is selected in its parent

[jsui-new Coveo JavaScript Search Framework v2.7610]


You want to display the **Book genre** facet only when the currently selected value in the **Product type** facet is **Book**.

Here the dependent facet (that is, **Book genre**) should only appear when its parent facet (that is, **Product type**) is in a certain state.
To achieve this, [set the `dependsOnCondition` option](https://docs.coveo.com/en/346#passing-component-options-in-the-init-call) for the dependent facet in the [`init`](https://coveo.github.io/search-ui/globals.html#init) call of your search interface.

The `dependsOnCondition` option expects a function as a value.
This function will always receive the parent facet instance as an argument, and must return a Boolean value.

```html
<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-facet-column">
    <div class="CoveoDynamicFacet"
         data-title="Product type"
         data-field="@producttype"></div>
    <div id="book_genre_facet"
         class="CoveoDynamicFacet"
         data-title="Book genre"
         data-field="@bookgenre"></div>
  </div>
  <!-- ... -->
</div>
```

```javascript
document.addEventListener("DOMContentLoaded", () => {
  const root = document.getElementById("search");
  Coveo.init(root, {
    book_genre_facet: {
      dependsOn: "@producttype",
      dependsOnCondition: (parentFacet) => {
        const id = parentFacet.options.id;
        const value = "Book";
        const selected = parentFacet.queryStateModel.get(`f:${id}`)
        return selected.includes(value);
      }
    }
  });
  // ...
});
```

## Example 3: Display a facet only when a specific hierarchical value is selected in its parent

[jsui-new Coveo JavaScript Search Framework v2.7610]


You want to display the **Processor** facet only when the **Electronics** > **Computers** hierarchical value is selected in the **Product category** facet.

This is similar to [Example 2](#example-2-display-a-facet-only-when-a-specific-value-is-selected-in-its-parent), except in this case the value to match is a hierarchical one.

```html
<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-facet-column">
    <div class="CoveoDynamicHierarchicalFacet"
         data-title="Product category"
         data-field="@productcategory"></div>
    <div id="processor_facet"
         class="CoveoDynamicFacet"
         data-title="Processor"
         data-field="@processor"></div>
  </div>
  <!-- ... -->
</div>
```

```javascript
document.addEventListener("DOMContentLoaded", () => {
  const root = document.getElementById("search");
  Coveo.init(root, {
    processor_facet: {
      dependsOn: "@productcategory",
      dependsOnCondition: (parentFacet) => {
        const id = parentFacet.options.id;
        const value = "Computers;";
        return parentFacet.queryStateModel.get(`f:${id}`).includes(value);
      }
    }
  });
  // ...
});
```

## Example 4: Defining multiple dependent facets with conditions

[jsui-new Coveo JavaScript Search Framework v2.7610]


You want to display different facets depending on the currently selected values in the **Object type** facet:

* Display the **Case status** facet only when the **Case** value is selected.
* Display the **Opportunity stage** facet only when the **Opportunity** value is selected.
* Display the **Lead source** facet only when the **Opportunity** and/or **Contact** values are selected.

Here, using a higher level function to set the various `dependsOnCondition` will avoid code duplication.

```html
<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-facet-column">
    <div class="CoveoDynamicFacet"
         data-id="sf-objecttype"
         data-title="Object type"
         data-field="@objecttype"></div>
    <div id="case_status_facet"
         class="CoveoDynamicFacet"
         data-title="Case status"
         data-field="@sfstatus"></div>
    <div id="opportunity_stage_facet"
         class="CoveoDynamicFacet"
         data-title="Opportunity stage"
         data-field="@sfopportunitystagename"></div>
    <div id="lead_source_facet"
         class="CoveoDynamicFacet"
         data-title="Lead source"
         data-field="@sfleadsource"></div>
  </div>
  <!-- ... -->
</div>
```

```javascript
document.addEventListener("DOMContentLoaded", () => {
  function isAnySelectedInParent(values) {
    return (parentFacet) => {
      const id = parentFacet.options.id;
      const selected = parentFacet.queryStateModel.get(`f:${id}`)
      const matches = values.map((value) => selected.includes(value));
      return matches.some((element) => element === true);
    }
  }

  const root = document.getElementById("search");
  Coveo.init(root, {
    case_status_facet: {
      dependsOn: "sf-objecttype",
      dependsOnCondition: isAnySelectedInParent(["Case"])
    },
    opportunity_stage_facet: {
      dependsOn: "sf-objecttype",
      dependsOnCondition: isAnySelectedInParent(["Opportunity"])
    },
    lead_source_facet: {
      dependsOn: "sf-objecttype",
      dependsOnCondition: isAnySelectedInParent(["Contact", "Opportunity"])
    }
  });
  // ...
})
```