Deploy Dynamic Navigation Experience (DNE)

This article details how to deploy DNE in a Coveo solution using either the Coveo Atomic library or the Coveo Headless library.

Step 1: Configure a DNE model

  1. Create a DNE model.

  2. Associate the DNE model with the query pipeline to which queries originating from your search interface are routed. See query pipeline routing mechanisms and rules for more information about query routing.

Step 2: Configure dynamic facets in your search interface

Coveo Atomic

To ensure the effective functioning of DNE in a search interface built with the Atomic library, ensure that all facet components are placed as children of the atomic-facet-manager component.

Tip
Leading practice

To maximize the usefulness and quality of DNE facet reordering, all relevant facets should be included and made visible in the search interface.

Example
<atomic-facet-manager>
    <atomic-facet
      field="prd_category"
      label="Category"
      with-search="false"
    ></atomic-facet>
    <atomic-facet
      field="prd_brand"
      label="Brand"
      with-search="false"
    ></atomic-facet>
    <atomic-facet
      field="prd_screen_size"
      label="Screen size"
      with-search="false"
    ></atomic-facet>
    <atomic-facet
      field="prd_wall_mountable"
      label="Wall mountable"
      with-search="false"
    ></atomic-facet>
    <atomic-facet
      field="prd_processor_speed"
      label="Processor speed"
      with-search="false"
    ></atomic-facet>
    <atomic-facet
      field="prd_resolution"
      label="Resolution"
      with-search="false"
    ></atomic-facet>
</atomic-facet-manager>

Coveo Headless

In a Coveo Headless library search interface, the FacetManager and the Facet controllers are used to implement facet components with DNE enabled.

JavaScript Search Framework

If your search interface uses the Coveo JavaScript Search Framework, configure dynamic facets using the CoveoDynamicFacet component.

Note

DNE doesn’t support regular facets (CoveoFacet).