> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation

> Structurez et personnalisez la hiérarchie de navigation de votre documentation

La propriété [navigation](fr/settings#param-navigation) dans `docs.json` contrôle la structure et la hiérarchie d’informations de votre documentation.

Avec une configuration de navigation adaptée, vous pouvez organiser votre contenu pour que les utilisateurs trouvent exactement ce qu’ils recherchent.

<div id="pages">
  ## Pages
</div>

Les pages sont le composant de navigation le plus élémentaire. Elles correspondent aux fichiers MDX qui composent votre documentation.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/pages-light.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=5c77e688ba5cf754bb0a01a0b547b98c" alt="" width="1184" height="320" data-path="images/navigation/pages-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/pages-dark.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=79cc61f6fc38609a2119b16aa4561abc" alt="" width="1184" height="320" data-path="images/navigation/pages-dark.png" />

Dans l’objet `navigation`, `pages` est un tableau dans lequel chaque entrée doit indiquer le chemin d’accès vers un [fichier de page](fr/pages).

```json theme={null}
{
  "navigation": {
    "pages": [
      "settings",
      "pages",
      "navigation",
      "themes",
      "custom-domain"
    ]
  }
}
```

<div id="groups">
  ## Groupes
</div>

Utilisez des groupes pour organiser la navigation de votre barre latérale en sections. Les groupes peuvent être imbriqués, marqués avec des tags et stylisés avec des icons.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/groups-light.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=2d9f2b34435847206bb6caffa171102c" alt="" width="1184" height="320" data-path="images/navigation/groups-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/groups-dark.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=b705a47655ff873c89111462087f87f8" alt="" width="1184" height="320" data-path="images/navigation/groups-dark.png" />

Dans l’objet `navigation`, `groups` est un tableau où chaque élément est un objet qui requiert un champ `group` et un champ `pages`. Les champs `icon`, `tag` et `expanded` sont facultatifs.

```json theme={null}
{
  "navigation": {
    "groups": [
      {
        "group": "Premiers pas",
        "icon": "play",
        "expanded": false,
        "pages": [
          "quickstart",
          {
            "group": "Édition",
            "icon": "pencil",
            "pages": [
              "installation",
              "editor"
            ]
          }
        ]
      },
      {
        "group": "Rédaction de contenu",
        "icon": "notebook-text",
        "tag": "NOUVEAU",
        "pages": [
          "writing-content/page",
          "writing-content/text"
        ]
      }
    ]
  }
}
```

<div id="default-expanded-state">
  ### État développé par défaut
</div>

Définissez `expanded: true` sur un groupe pour qu’il soit développé par défaut dans la barre latérale de navigation. Cela est utile pour mettre en avant des sections importantes ou améliorer la découvrabilité des contenus clés.

```json theme={null}
{
  "group": "Prise en main",
  "expanded": true,
  "pages": ["quickstart", "installation"]
}
```

<div id="tabs">
  ## Tabs
</div>

Les Tabs créent des sections distinctes de votre documentation avec des chemins d’accès (URL) séparés. Elles génèrent une barre de navigation horizontale en haut de votre documentation qui permet aux utilisateurs de passer d’une section à l’autre.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/tabs-light.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=a555903b6af65487c3622e9f9cce428d" alt="" width="1184" height="320" data-path="images/navigation/tabs-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/tabs-dark.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=81464acbc9bacb64fab699f18c3b8de5" alt="" width="1184" height="320" data-path="images/navigation/tabs-dark.png" />

Dans l’objet `navigation`, `tabs` est un tableau où chaque entrée est un objet qui requiert un champ `tab` et peut contenir d’autres champs de navigation tels que des groups, des pages, des icon, ou des liens vers des pages externes.

```json theme={null}
{
  "navigation": {
    "tabs": [
      {
        "tab": "Référence API",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "tab": "SDK",
        "icon": "code",
        "pages": [
          "sdk/fetch",
          "sdk/create",
          "sdk/delete"
        ]
      },
      {
        "tab": "Blog",
        "icon": "newspaper",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}
```

<div id="menus">
  ### Menus
</div>

Les menus ajoutent des éléments de navigation déroulants à un onglet. Utilisez-les pour aider les utilisateurs à accéder directement à des pages spécifiques au sein d’un onglet.

Dans l’objet `navigation`, `menu` est un tableau où chaque entrée est un objet qui nécessite un champ `item` et peut contenir d’autres champs de navigation tels que des groupes, des pages, des icônes ou des liens vers des pages externes.

```json theme={null}
{
  "navigation": {
    "tabs": [
      {
        "tab": "Outils de développeur",
        "icon": "square-terminal",
        "menu": [
          {
            "item": "API reference",
            "icon": "rocket",
            "groups": [
              {
                "group": "Points de terminaison principaux",
                "icon": "square-terminal",
                "pages": [
                  "api-reference/get",
                  "api-reference/post",
                  "api-reference/delete"
                ]
              }
            ]
          },
          {
            "item": "SDKs",
            "icon": "code",
            "description": "Les SDK sont utilisés pour interagir avec l'API.",
            "pages": [
              "sdk/fetch",
              "sdk/create",
              "sdk/delete"
            ]
          }
        ]
      }
    ]
  }
}
```

<div id="anchors">
  ## Ancres
</div>

Les ancres ajoutent des éléments de navigation persistants en haut de votre barre latérale. Utilisez-les pour structurer votre contenu, offrir un accès rapide à des ressources externes ou créer des appels à l’action bien visibles.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/anchors-light.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=809ea242cb0fc9f2f5cd46b2be9c9784" width="1184" height="320" data-path="images/navigation/anchors-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/anchors-dark.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=c862b00bd30a109ff6a317710f9cda32" width="1184" height="320" data-path="images/navigation/anchors-dark.png" />

Dans l’objet `navigation`, `anchors` est un tableau où chaque entrée est un objet qui requiert un champ `anchor` et peut contenir d’autres champs de navigation tels que des groupes, des pages, des icon ou des liens vers des pages externes.

```json theme={null}
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Documentation",
        "icon": "book-open",
        "pages": [
          "quickstart",
          "development",
          "navigation"
        ]
      },
      {
        "anchor": "Référence API",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "anchor": "Blog",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}
```

Pour les ancres qui pointent uniquement vers des liens externes, utilisez le mot-clé `global`. Les ancres dans un objet `global` doivent comporter un champ `href` et ne peuvent pas pointer vers un chemin relatif.

Les ancres globales sont particulièrement utiles pour créer des liens vers des ressources qui ne font pas partie de votre documentation, mais qui devraient rester facilement accessibles à vos utilisateurs, comme un blog ou un portail d’assistance.

```json theme={null}
{
  "navigation": {
    "global":  {
      "anchors": [
        {
          "anchor": "Communauté",
          "icon": "house",
          "href": "https://slack.com"
        },
        {
          "anchor": "Blog",
          "icon": "pencil",
          "href": "https://mintlify.com/blog"
        }
      ]
    },
    "tabs": /*...*/
  }
}
```

<div id="dropdowns">
  ## Menus déroulants
</div>

Les menus déroulants se trouvent dans un menu déroulant extensible en haut de la barre latérale de votre navigation. Chaque élément d’un menu déroulant pointe vers une section de votre documentation.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/dropdowns-light.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=0e051b4e14830ebf14435d65c8e01514" width="1184" height="320" data-path="images/navigation/dropdowns-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/dropdowns-dark.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=1a38b9108b830125b7fef82180269c03" width="1184" height="320" data-path="images/navigation/dropdowns-dark.png" />

Dans l’objet `navigation`, `dropdowns` est un tableau où chaque entrée est un objet qui requiert un champ `dropdown` et peut contenir d’autres champs de navigation tels que des groups, des pages, des icon, ou des liens vers des pages externes.

```json theme={null}
{
  "navigation": {
    "dropdowns": [
      {
        "dropdown": "Documentation",
        "icon": "book-open",
        "pages": [
          "quickstart",
          "development",
          "navigation"
        ]
      },
      {
        "dropdown": "Référence API",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "dropdown": "Blog",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}
```

<div id="openapi">
  ## OpenAPI
</div>

Intégrez des spécifications OpenAPI directement dans votre structure de navigation pour générer automatiquement la documentation de votre API. Créez des sections d’API dédiées ou placez des pages d’endpoint au sein d’autres composants de navigation.

Définissez une spécification OpenAPI par défaut à n’importe quel niveau de votre hiérarchie de navigation. Les éléments enfants hériteront de cette spécification, à moins qu’ils ne définissent la leur.

```json theme={null}
{
  "navigation": {
    "groups": [
      {
        "group": "Référence API",
        "openapi": "/path/to/openapi-v1.json",
        "pages": [
          "overview",
          "authentication",
          "GET /users",
          "POST /users",
          {
            "group": "Produits",
            "openapi": "/path/to/openapi-v2.json",
            "pages": [
              "GET /products",
              "POST /products"
            ]
          }
        ]
      }
    ]
  }
}
```

Pour en savoir plus sur la façon d’intégrer des endpoints OpenAPI dans votre documentation, consultez la [configuration OpenAPI](/fr/api-playground/openapi-setup).

<div id="versions">
  ## Versions
</div>

Divisez votre navigation en différentes versions. Les versions peuvent être sélectionnées depuis un menu déroulant.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/versions-light.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=5575384d5886af1c87ff294110ae3182" width="1184" height="320" data-path="images/navigation/versions-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/versions-dark.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=cf2347cde511b5330955baefab6cfc41" width="1184" height="320" data-path="images/navigation/versions-dark.png" />

Dans l’objet `navigation`, `versions` est un tableau où chaque entrée est un objet qui exige un champ `version` et peut contenir n’importe quels autres champs de navigation.

```json theme={null}
{
  "navigation": {
    "versions": [
      {
        "version": "1.0.0",
        "groups": [
          {
            "group": "Premiers pas",
            "pages": ["v1/overview", "v1/quickstart", "v1/development"]
          }
        ]
      },
      {
        "version": "2.0.0",
        "groups": [
          {
            "group": "Premiers pas",
            "pages": ["v2/overview", "v2/quickstart", "v2/development"]
          }
        ]
      }
    ]
  }
}
```

<div id="languages">
  ## Langues
</div>

Segmentez votre navigation par langue. Les langues sont sélectionnables depuis un menu déroulant.

<img className="block dark:hidden pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/languages-light.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=2d3c88e04baaaa8b5a28046a0fb07925" width="1184" height="320" data-path="images/navigation/languages-light.png" />

<img className="hidden dark:block pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/zyJsbuZtXQKHf9Ui/images/navigation/languages-dark.png?fit=max&auto=format&n=zyJsbuZtXQKHf9Ui&q=85&s=ecd345147be4de462840e6145462da68" width="1184" height="320" data-path="images/navigation/languages-dark.png" />

Dans l’objet `navigation`, `languages` est un tableau où chaque entrée est un objet qui requiert un champ `language` et peut contenir n’importe quels autres champs de navigation.

Nous prenons actuellement en charge les langues suivantes pour la localisation :

<CardGroup cols={2}>
  <Card title="Arabic (ar)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ar.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Chinese (cn)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Chinese (zh-Hant)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="English (en)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/en.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="French (fr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/fr.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="German (de)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/de.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Indonesian (id)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/id.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Italian (it)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/it.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Japanese (jp)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/jp.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Korean (ko)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ko.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Portuguese (pt-BR)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pt-br.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Russian (ru)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ru.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Spanish (es)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/es.png" className="w-6 h-6 my-0" />} horizontal />

  <Card title="Turkish (tr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/tr.png" className="w-6 h-6 my-0" />} horizontal />
</CardGroup>

```json theme={null}
{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "groups": [
          {
            "group": "Premiers pas",
            "pages": ["en/overview", "en/quickstart", "en/development"]
          }
        ]
      },
      {
        "language": "es",
        "groups": [
          {
            "group": "Premiers pas",
            "pages": ["es/overview", "es/quickstart", "es/development"]
          }
        ]
      }
    ]
  }
}
```

Pour des traductions automatisées, [contactez notre équipe commerciale](mailto:gtm@mintlify.com) pour discuter de solutions.

<div id="nesting">
  ## Imbrication
</div>

Vous pouvez combiner librement des ancres, des onglets et des menus déroulants. Les composants peuvent être imbriqués les uns dans les autres, de manière interchangeable, pour créer la structure de navigation souhaitée.

<CodeGroup>
  ```json Anchors theme={null}
  {
    "navigation": {
      "anchors": [
        {
          "anchor": "Anchor 1",
          "groups": [
            {
              "group": "Group 1",
              "pages": [
                "some-folder/file-1",
                "another-folder/file-2",
                "just-a-file"
              ]
            }
          ]
        },
        {
          "anchor": "Anchor 2",
          "groups": [
            {
              "group": "Group 2",
              "pages": [
                "some-other-folder/file-1",
                "various-different-folders/file-2",
                "another-file"
              ]
            }
          ]
        }
      ]
    }
  }
  ```

  ```json Tabs theme={null}
  {
    "navigation": {
      "tabs": [
        {
          "tab": "Tab 1",
          "groups": [
            {
              "group": "Group 1",
              "pages": [
                "some-folder/file-1",
                "another-folder/file-2",
                "just-a-file"
              ]
            }
          ]
        },
        {
          "tab": "Tab 2",
          "groups": [
            {
              "group": "Group 2",
              "pages": [
                "some-other-folder/file-1",
                "various-different-folders/file-2",
                "another-file"
              ]
            }
          ]
        }
      ]
    }
  }
  ```

  ```json Tabs with external anchor theme={null}
  {
    "navigation": {
      "global": {
        "anchors": [
          {
            "anchor": "Anchor 1",
            "href": "https://mintlify.com/docs"
          }
        ]
      },
      "tabs": [
        {
          "tab": "Tab 1",
          "groups": [
            {
              "group": "Group 1",
              "pages": [
                "some-folder/file-1",
                "another-folder/file-2",
                "just-a-file"
              ]
            }
          ]
        },
        {
          "tab": "Tab 2",
          "groups": [
            {
              "group": "Group 2",
              "pages": [
                "some-other-folder/file-1",
                "various-different-folders/file-2",
                "another-file"
              ]
            }
          ]
        }
      ]
    }
  }
  ```
</CodeGroup>

<div id="breadcrumbs">
  ## Fil d’Ariane
</div>

Le fil d’Ariane affiche le chemin de navigation complet en haut des pages. Certains thèmes l’activent par défaut, d’autres non. Vous pouvez contrôler son activation pour votre site à l’aide de la propriété `styling` dans votre `docs.json`.

<CodeGroup>
  ```json Afficher le fil d’Ariane complet theme={null}
  "styling": {
    "eyebrows": "breadcrumbs"
  }
  ```

  ```json Afficher uniquement la section parente theme={null}
  "styling": {
    "eyebrows": "section"
  }
  ```
</CodeGroup>

<div id="interaction-configuration">
  ## Configuration des interactions
</div>

Définissez la manière dont les utilisateurs interagissent avec les éléments de navigation à l’aide de la propriété `interaction` dans votre `docs.json`.

<div id="enable-auto-navigation-for-groups">
  ### Activer la navigation automatique pour les groupes
</div>

Lorsqu’un utilisateur développe un groupe de navigation, certains thèmes ouvrent automatiquement la première page du groupe. Vous pouvez remplacer le comportement par défaut d’un thème avec l’option `drilldown`.

* Définissez sur `true` pour forcer l’ouverture automatique de la première page lorsqu’un groupe de navigation est sélectionné.
* Définissez sur `false` pour empêcher la navigation et seulement développer ou réduire le groupe lorsqu’il est sélectionné.
* Laissez non défini pour utiliser le comportement par défaut du thème.

<CodeGroup>
  ```json Force navigation theme={null}
  "interaction": {
    "drilldown": true  // Forcer l’ouverture de la première page lorsqu’un utilisateur développe un menu déroulant
  }
  ```

  ```json Prevent navigation theme={null}
  "interaction": {
    "drilldown": false // Ne jamais naviguer, seulement développer ou réduire le groupe
  }
  ```
</CodeGroup>
