---
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.md) in a Coveo solution using either the [Coveo Atomic library](https://docs.coveo.com/en/lcdf0264.md) or the [Coveo Headless library](https://docs.coveo.com/en/lcdf0493.md).

## Step 1: Configure a DNE model

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

1. [Associate the DNE model with the query pipeline](https://docs.coveo.com/en/l1qf4156.md) to which queries originating from your search interface are routed.
See [query pipeline routing mechanisms and rules](https://docs.coveo.com/en/1666.md) 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.md) 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.md) 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.md) components with [DNE](https://docs.coveo.com/en/2907.md) enabled.

### JavaScript Search Framework

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

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