---
title: Dynamic Navigation Experience (DNE) implementation overview
slug: '2918'
canonical_url: https://docs.coveo.com/en/2918/
collection: leverage-machine-learning
source_format: adoc
---
# Dynamic Navigation Experience (DNE) implementation overview
This article details how to implement [DNE](https://docs.coveo.com/en/2907/) in a Coveo solution using either the [Coveo Atomic library](https://docs.coveo.com/en/lcdf0264/) or the [Coveo Headless library](https://docs.coveo.com/en/lcdf0493/).

## Step 1: Configure a DNE model

. [Create a DNE model](https://docs.coveo.com/en/3396/).

. [Associate the DNE model with the query pipeline](https://docs.coveo.com/en/l1qf4156/) to which queries originating from your search interface are routed.
See [query pipeline routing mechanisms and rules](https://docs.coveo.com/en/1666/) 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](https://docs.coveo.com/en/198/) components are placed as children of the [`atomic-facet-manager`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-facet-manager\--docs) component.

> **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**

```html
<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](https://docs.coveo.com/en/lcdf0493/) search interface, the [`FacetManager`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.FacetManager.html) and the [`Facet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Facet.html) controllers are used to implement [facet](https://docs.coveo.com/en/198/) components with [DNE](https://docs.coveo.com/en/2907/) enabled.

### JavaScript Search Framework

If your search interface uses the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/), configure [dynamic facets](https://docs.coveo.com/en/2917/) using the `CoveoDynamicFacet` component.

> **Note**
>
> [DNE](https://docs.coveo.com/en/2907/) doesn't support [regular facets](https://docs.coveo.com/en/1554#regular-facets) (`CoveoFacet`).