> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.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 des 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.
## Pages
Les pages sont le composant de navigation le plus élémentaire. Elles correspondent aux fichiers MDX qui constituent votre documentation.
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
{
"navigation": {
"pages": [
"parametres",
"pages",
"navigation",
"themes",
"domaine-personnalise"
]
}
}
```
## Groupes
Utilisez des groupes pour organiser la navigation de votre barre latérale en sections. Les groupes peuvent être imbriqués, étiquetés avec des tags et stylisés avec des icônes.
Dans l’objet `navigation`, `groups` est un tableau dans lequel chaque entrée est un objet nécessitant un champ `group` et un champ `pages`. Les champs `icon`, `tag` et `expanded` sont facultatifs.
```json
{
"navigation": {
"groups": [
{
"group": "Bien démarrer",
"icon": "play",
"expanded": false,
"pages": [
"quickstart",
{
"group": "Édition",
"icon": "pencil",
"pages": [
"installation",
"editor"
]
}
]
},
{
"group": "Rédaction de contenu",
"icon": "notebook-text",
"tag": "NOUVEAUTÉ"
"pages": [
"writing-content/page",
"writing-content/text"
]
}
]
}
}
```
### État développé par défaut
Définissez `expanded: true` sur un groupe pour l’afficher développé par défaut dans la barre latérale de navigation. C’est utile pour mettre en avant les sections importantes ou améliorer la découvrabilité des contenus clés.
```json
{
"group": "Bien démarrer",
"expanded": true,
"pages": ["quickstart", "installation"]
}
```
## Onglets
Les onglets définissent des sections distinctes de votre documentation avec des chemins d’URL séparés. Ils ajoutent en haut de la documentation une barre de navigation horizontale qui permet aux utilisateurs de passer d’une section à l’autre.
Dans l’objet `navigation`, `tabs` est un tableau dont chaque entrée est un objet qui requiert un champ `tab` 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
{
"navigation": {
"tabs": [
{
"tab": "Référence de l’API",
"icon": "square-terminal",
"pages": [
"api-reference/get",
"api-reference/post",
"api-reference/delete"
]
},
{
"tab": "SDKs",
"icon": "code",
"pages": [
"sdk/fetch",
"sdk/create",
"sdk/delete"
]
},
{
"tab": "Blog"
"icon": "newspaper",
"href": "https://external-link.com/blog"
}
]
}
}
```
Les menus ajoutent des éléments de navigation déroulants à un onglet. Utilisez-les pour permettre aux utilisateurs d’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 requiert 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
{
"navigation": {
"tabs": [
{
"tab": "Outils développeur",
"icon": "square-terminal",
"menu": [
{
"item": "Référence API",
"icon": "rocket",
"groups": [
{
"group": "Endpoints principaux",
"icon": "square-terminal",
"pages": [
"api-reference/get",
"api-reference/post",
"api-reference/delete"
]
}
]
},
{
"item": "SDK",
"icon": "code",
"description": "Les SDK permettent d’interagir avec l’API."
"pages": [
"sdk/fetch",
"sdk/create",
"sdk/delete"
]
}
]
}
]
}
}
```
## Ancres
Les ancres ajoutent des éléments de navigation persistants en haut de votre barre latérale. Utilisez-les pour structurer votre contenu, donner un accès rapide à des ressources externes ou créer des appels à l’action bien visibles.
Dans l’objet `navigation`, `anchors` est un tableau où chaque entrée est un objet qui exige un champ `anchor` 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
{
"navigation": {
"anchors": [
{
"anchor": "Documentation",
"icon": "book-open",
"pages": [
"quickstart",
"development",
"navigation"
]
},
{
"anchor": "Référence de l’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 renvoient 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 lier des ressources qui ne font pas partie de votre documentation, mais qui devraient être facilement accessibles à vos utilisateurs, comme un blog ou un portail d’assistance.
```json
{
"navigation": {
"global": {
"anchors": [
{
"anchor": "Communauté",
"icon": "house",
"href": "https://slack.com"
},
{
"anchor": "Blog"
"icon": "pencil",
"href": "https://mintlify.com/blog"
}
]
},
"tabs": /*...*/
}
}
```
## Menus déroulants
Les menus déroulants se trouvent dans un menu extensible en haut de la barre latérale. Chaque élément d’un menu déroulant mène à une section de votre documentation.
Dans l’objet `navigation`, `dropdowns` est un tableau dont chaque entrée est un objet qui doit inclure un champ `dropdown` 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
{
"navigation": {
"dropdowns": [
{
"dropdown": "Documentation",
"icon": "book-open",
"pages": [
"quickstart",
"development",
"navigation"
]
},
{
"dropdown": "Référence de l’API",
"icon": "square-terminal",
"pages": [
"api-reference/get",
"api-reference/post",
"api-reference/delete"
]
},
{
"dropdown": "Blog",
"href": "https://external-link.com/blog"
}
]
}
}
```
## OpenAPI
Intégrez des spécifications OpenAPI directement dans votre structure de navigation pour générer automatiquement la documentation de l’API. Créez des sections API dédiées ou placez des pages d’endpoints au sein d’autres éléments 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, sauf s’ils définissent la leur.
```json
{
"navigation": {
"groups": [
{
"group": "Référence de l’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 manière de référencer des endpoints OpenAPI dans vos docs, consultez la [configuration OpenAPI](/fr/api-playground/openapi-setup).
## Versions
Divisez votre navigation en différentes versions. Les versions sont sélectionnables via un menu déroulant.
Dans l’objet `navigation`, `versions` est un tableau dont chaque entrée est un objet qui requiert un champ `version` et peut contenir n’importe quels autres champs de navigation.
```json
{
"navigation": {
"versions": [
{
"version": "1.0.0",
"groups": [
{
"group": "Bien démarrer",
"pages": ["v1/overview", "v1/quickstart", "v1/development"]
}
]
},
{
"version": "2.0.0",
"groups": [
{
"group": "Bien démarrer",
"pages": ["v2/overview", "v2/quickstart", "v2/development"]
}
]
}
]
}
}
```
## Langues
Partitionnez votre navigation par langues. Les langues sont sélectionnables via un menu déroulant.
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 :
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
} horizontal />
```json
{
"navigation": {
"languages": [
{
"language": "en",
"groups": [
{
"group": "Bien démarrer",
"pages": ["en/overview", "en/quickstart", "en/development"]
}
]
},
{
"language": "es",
"groups": [
{
"group": "Bien démarrer",
"pages": ["es/overview", "es/quickstart", "es/development"]
}
]
}
]
}
}
```
Pour des traductions automatisées, [contactez notre équipe commerciale](mailto:gtm@mintlify.com) pour discuter de solutions.
## Imbrication
Vous pouvez combiner librement des ancres, des onglets et des menus déroulants. Les composants peuvent s’imbriquer les uns dans les autres de manière interchangeable pour créer la structure de navigation souhaitée.
```json Anchors
{
"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
{
"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
{
"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"
]
}
]
}
]
}
}
```
## Fil d’Ariane
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 décider s’il est activé pour votre site via la propriété `styling` dans votre `docs.json`.
```json Display full breadcrumbs
"styling": {
"eyebrows": "breadcrumbs"
}
```
```json Display parent section only
"styling": {
"eyebrows": "section"
}
```
## Configuration des interactions
Contrôlez la façon dont les utilisateurs interagissent avec les éléments de navigation à l’aide de la propriété `interaction` dans votre `docs.json`.
### Activer la navigation automatique pour les groupes
Lorsqu’un utilisateur ouvre un groupe de navigation, certains thèmes accèdent 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 la navigation automatique vers la première page lorsqu’un groupe de navigation est sélectionné.
* Définissez sur `false` pour empêcher la navigation et uniquement ouvrir ou refermer le groupe lorsqu’il est sélectionné.
* Laissez non défini pour utiliser le comportement par défaut du thème.
```json Force navigation
"interaction": {
"drilldown": true // Forcer la navigation vers la première page lorsqu’un utilisateur ouvre un groupe
}
```
```json Prevent navigation
"interaction": {
"drilldown": false // Ne jamais naviguer, uniquement ouvrir ou refermer le groupe
}
```