> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Navigation
> Configurez la navigation de votre site avec des groupes, pages, menus déroulants, onglets et ancres dans docs.json pour bâtir votre barre latérale.
La propriété [navigation](/fr/organize/settings-structure#navigation) dans `docs.json` détermine la structure et la hiérarchie de l’information de votre documentation.
Avec une configuration de navigation adéquate, vous pouvez organiser votre contenu pour que les utilisateurs trouvent exactement ce qu’ils recherchent.
Choisissez un modèle d’organisation principal à la racine de votre navigation. Une fois ce modèle principal choisi, vous pouvez y imbriquer d’autres éléments de navigation.
## Pages
Les pages sont le composant de navigation le plus élémentaire. Chaque page est un fichier MDX dans votre référentiel de documentation.
Dans l'objet `navigation`, `pages` est un tableau dont chaque entrée doit référencer le chemin d’accès à un [fichier de page](/fr/organize/pages).
```json theme={null}
{
"navigation": {
"pages": [
"settings",
"pages",
"navigation",
"themes",
"custom-domain"
]
}
}
```
### Combiner des pages autonomes avec des groupes
L'objet `navigation` à la racine accepte un seul modèle principal (par exemple, `pages` ou `groups`), mais le tableau `pages` d'un groupe peut combiner des chemins de pages sous forme de chaînes avec des objets de groupes imbriqués. Utilisez ce pattern pour placer une page autonome, telle qu'une page d'aperçu ou de bienvenue, au-dessus des autres groupes dans la barre latérale.
Encapsulez votre navigation dans un seul groupe de premier niveau et listez la page autonome avant les groupes imbriqués :
```json theme={null}
{
"navigation": {
"groups": [
{
"group": "Documentation",
"pages": [
"overview",
{
"group": "Get started",
"pages": ["quickstart", "installation"]
},
{
"group": "Guides",
"pages": ["guides/authentication", "guides/deployment"]
}
]
}
]
}
}
```
Dans cet exemple, `overview` apparaît comme un lien autonome en haut de la barre latérale, suivi des groupes `Get started` et `Guides`. Vous pouvez aussi utiliser la propriété `root` sur un groupe pour désigner une page d'aperçu pour ce groupe. Voir [Page racine](/fr/organize/navigation#root-page).
## Groupes
Utilisez des groupes pour organiser la navigation de votre barre latérale en sections. Vous pouvez imbriquer les groupes les uns dans les autres, les assortir de tags et les styliser avec des icônes.
Dans l’objet `navigation`, `groups` est un tableau où chaque entrée est un objet qui nécessite un champ `group` et un champ `pages`. Les champs `icon`, `tag`, `root` et `expanded` sont facultatifs.
```json theme={null}
{
"navigation": {
"groups": [
{
"group": "Getting started",
"icon": "play",
"pages": [
"quickstart",
{
"group": "Editing",
"expanded": false,
"icon": "pencil",
"pages": [
"installation",
"editor"
]
}
]
},
{
"group": "Rédaction du contenu",
"icon": "notebook-text",
"tag": "NEW",
"pages": [
"writing-content/page",
"writing-content/text"
]
}
]
}
}
```
### Page racine
Utilisez la propriété `root` pour désigner une page principale pour un groupe. Lorsqu'un groupe a une page racine, cliquer sur le titre du groupe dans la barre latérale de navigation ouvre la page racine. Les pages racines fonctionnent pour les groupes de premier niveau comme pour les groupes imbriqués.
```json Example group with a root page theme={null}
{
"navigation": {
"groups": [
{
"group": "Pages API",
"root": "api-overview",
"pages": [
"api-reference/get",
"api-reference/post",
"api-reference/delete"
]
}
]
}
}
```
### Listes de répertoire
Lorsqu'un groupe possède une page racine, vous pouvez générer une liste de répertoire sur cette page. La liste de répertoire affiche les pages enfants du groupe et les groupes imbriqués pour offrir aux utilisateurs un aperçu du contenu de la section.
Définissez la propriété `directory` sur un groupe, un onglet ou l'objet `navigation` de niveau supérieur pour activer les listes de répertoire. La propriété accepte trois valeurs :
| Valeur | Description |
| ------------- | ----------------------------------------------------------- |
| `"accordion"` | Affiche les pages enfants dans une liste |
| `"card"` | Affiche les pages enfants sous forme de cartes horizontales |
| `"none"` | Désactive les listes de répertoire (par défaut) |
La valeur de `directory` est héritée à travers la hiérarchie de navigation. Si vous définissez une valeur `directory` sur un élément parent, cette valeur s'applique à tous les groupes descendants sauf si elle est remplacée.
```json Enable accordion directory for a group {6} theme={null}
{
"navigation": {
"groups": [
{
"group": "API reference",
"root": "api-overview",
"directory": "accordion",
"pages": [
"api-reference/authentication",
"api-reference/endpoints",
"api-reference/errors"
]
}
]
}
}
```
```json Enable card directory for all groups {3} theme={null}
{
"navigation": {
"directory": "card",
"groups": [
{
"group": "Guides",
"root": "guides/overview",
"pages": [
"guides/quickstart",
"guides/configuration"
]
}
]
}
}
```
Les listes de répertoire n'apparaissent que sur les pages racines de groupe. Si un groupe ne possède pas de propriété `root`, il ne peut pas afficher de liste de répertoire.
### État développé par défaut
Utilisez la propriété `expanded` pour contrôler l’état par défaut d’un groupe imbriqué dans la barre latérale de navigation.
* `expanded: true` : développe le groupe par défaut.
* `expanded: false` ou omis : réduit le groupe par défaut.
La propriété `expanded` n’affecte que les groupes imbriqués — des groupes à l’intérieur d’autres groupes. Les groupes de premier niveau se développent toujours et vous ne pouvez pas les réduire.
```json theme={null}
{
"group": "Premiers pas",
"pages": [
"quickstart",
{
"group": "Avancé",
"expanded": false,
"pages": ["installation", "configuration"]
}
]
}
```
## Tabs
Les Tabs créent des sections distinctes de votre documentation avec des chemins d’URL séparés. Les Tabs génèrent une barre de navigation horizontale en haut de votre documentation qui permet aux utilisateurs de passer d’une section à l’autre.
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 groupes, des pages, des icons 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"
}
]
}
}
```
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 requiert un champ `item` et peut contenir d’autres champs de navigation tels que des groupes, des pages, des icon, ou des liens vers des pages externes.
Les éléments de menu peuvent uniquement contenir des groupes, des pages et des liens externes.
```json theme={null}
{
"navigation": {
"tabs": [
{
"tab": "Outils de développeur",
"icon": "square-terminal",
"menu": [
{
"item": "Référence API",
"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"
]
}
]
}
]
}
}
```
## Ancres
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.
Dans l’objet `navigation`, `tabs` 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 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"
}
]
}
}
```
### Ancres globales
Utilisez des ancres globales pour les liens qui doivent apparaître sur toutes les pages, quelle que soit la section de votre navigation que l’utilisateur consulte. Les ancres globales sont particulièrement utiles pour créer des liens vers des ressources en dehors de votre documentation (comme un blog, un forum communautaire ou un portail d’assistance) ou pour fournir un accès cohérent à des pages internes importantes (comme un journal des modifications ou une page de statut).
Les ancres globales prennent en charge aussi bien les URL externes que les chemins relatifs vers des pages de votre documentation.
```json theme={null}
{
"navigation": {
"global": {
"anchors": [
{
"anchor": "Journal des modifications",
"icon": "list",
"href": "/changelog"
},
{
"anchor": "Blog",
"icon": "pencil",
"href": "https://mintlify.com/blog"
}
]
},
"tabs": /*...*/
}
}
```
## Produits
Les produits créent une section de navigation dédiée pour organiser la documentation propre à chaque produit. Utilisez les produits pour séparer différentes offres, services ou grands ensembles de fonctionnalités au sein de votre documentation.
Dans l’objet `navigation`, `products` est un tableau où chaque entrée est un objet qui exige un champ `product` et peut contenir d’autres champs de navigation tels que des groupes, des pages, des icons ou des liens vers des pages externes.
```json theme={null}
{
"navigation": {
"products": [
{
"product": "Core API",
"description": "Description de l'API Core",
"icon": "api",
"groups": [
{
"group": "Prise en main",
"pages": [
"core-api/quickstart",
"core-api/authentication"
]
},
{
"group": "Points de terminaison",
"pages": [
"core-api/users",
"core-api/orders"
]
}
]
},
{
"product": "Analytics Platform",
"description": "Description de la plateforme Analytics",
"icon": "chart-bar",
"pages": [
"analytics/overview",
"analytics/dashboard",
"analytics/reports"
]
},
{
"product": "Mobile SDK",
"description": "Description du SDK Mobile",
"icon": "smartphone",
"href": "https://mobile-sdk-docs.example.com"
}
]
}
}
```
## Menus déroulants
Les menus déroulants constituent un menu extensible en haut de la navigation de votre 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 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"
}
]
}
}
```
## OpenAPI
Intégrez des spécifications OpenAPI directement dans votre structure de navigation afin de générer automatiquement la documentation de votre API. Créez des sections d’API dédiées ou placez des pages d’endpoints 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éritent de cette spécification, sauf s’ils définissent leur propre spécification.
Lorsque vous ajoutez la propriété `openapi` à un élément de navigation (comme une ancre, un onglet ou un groupe) sans spécifier de pages, Mintlify génère automatiquement des pages pour **tous les endpoints** définis dans votre spécification OpenAPI.
Pour contrôler les endpoints qui apparaissent, énumérez explicitement les endpoints souhaités dans un tableau `pages`.
Pour plus d’informations sur la manière de référencer des endpoints OpenAPI dans votre documentation, consultez la page [Configuration d’OpenAPI](/fr/api-playground/openapi-setup).
```json theme={null}
{
"navigation": {
"groups": [
{
"group": "Référence de l'API",
"openapi": "/path/to/openapi-v1.json",
"pages": [
"apercu",
"authentification",
"GET /users",
"POST /users",
{
"group": "Produits",
"openapi": "/path/to/openapi-v2.json",
"pages": [
"GET /products",
"POST /products"
]
}
]
}
]
}
}
```
## Versions
Divisez votre navigation en différentes versions. Les versions peuvent être sélectionnées à partir d’un menu déroulant.
Dans l’objet `navigation`, `versions` est un tableau dans lequel chaque entrée est un objet qui requiert 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"]
}
]
}
]
}
}
```
### Version par défaut
Mintlify utilise la première version du tableau `versions` comme version par défaut. Utilisez le champ `default` pour spécifier une autre version comme version par défaut.
```json theme={null}
{
"navigation": {
"versions": [
{
"version": "1.0.0",
"groups": [
{
"group": "Getting started",
"pages": ["v1/overview", "v1/quickstart"]
}
]
},
{
"version": "2.0.0",
"default": true,
"groups": [
{
"group": "Getting started",
"pages": ["v2/overview", "v2/quickstart"]
}
]
}
]
}
}
```
### Tags de version
Ajoutez un badge aux entrées de version dans le menu déroulant du sélecteur de version à l'aide du champ facultatif `tag`. Utilisez des tags pour mettre en avant des versions spécifiques comme « Dernière », « Recommandée » ou « Bêta ».
```json theme={null}
{
"navigation": {
"versions": [
{
"version": "2026_03",
"tag": "Latest",
"groups": [
{
"group": "Getting started",
"pages": ["getting-started", "quickstart"]
}
]
},
{
"version": "2025_12",
"tag": "Recommended",
"groups": [
{
"group": "Getting started",
"pages": ["2025_12/getting-started", "2025_12/quickstart"]
}
]
},
{
"version": "2025_09",
"tag": "Deprecated",
"groups": [
{
"group": "Getting started",
"pages": ["2025_09/getting-started", "2025_09/quickstart"]
}
]
}
]
}
}
```
## Langues
Répartissez votre navigation en différentes langues. Les langues peuvent être sélectionnées à partir d’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 tout autre champ de navigation, y compris des configurations de bannière, de pied de page et de barre de navigation spécifiques à la langue.
Nous prenons actuellement en charge les langues suivantes pour la localisation :
```json theme={null}
{
"navigation": {
"languages": [
{
"language": "en",
"banner": {
"content": "🚀 Version 2.0 is now live! See our [changelog](/en/changelog) for details.",
"dismissible": true
},
"footer": {
"socials": {
"x": "https://x.com/mintlify"
},
"links": [
{
"header": "Resources",
"items": [
{ "label": "Documentation", "href": "/en/docs" },
{ "label": "Blog", "href": "https://mintlify.com/blog" }
]
}
]
},
"navbar": {
"links": [
{ "label": "Docs", "href": "/en/docs" }
],
"primary": {
"type": "button",
"label": "Get Started",
"href": "/en/quickstart"
}
},
"groups": [
{
"group": "Getting started",
"pages": ["en/overview", "en/quickstart", "en/development"]
}
]
},
{
"language": "es",
"banner": {
"content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/es/changelog).",
"dismissible": true
},
"footer": {
"socials": {
"x": "https://x.com/mintlify"
},
"links": [
{
"header": "Recursos",
"items": [
{ "label": "Documentación", "href": "/es/docs" },
{ "label": "Blog", "href": "https://mintlify.com/blog" }
]
}
]
},
"navbar": {
"links": [
{ "label": "Documentación", "href": "/es/docs" }
],
"primary": {
"type": "button",
"label": "Comenzar",
"href": "/es/quickstart"
}
},
"groups": [
{
"group": "Getting started",
"pages": ["es/overview", "es/quickstart", "es/development"]
}
]
}
]
}
}
```
Pour les traductions automatisées, [configurez une automatisation](/fr/automations) pour exécuter l’agent selon un calendrier ou en réponse à des pushes vers le dépôt.
## Imbrication
Vous pouvez imbriquer des éléments de navigation les uns dans les autres pour créer des hiérarchies complexes. Vous devez avoir un élément de navigation parent au niveau racine, comme des Onglets, des groupes ou un menu déroulant. Vous pouvez imbriquer d’autres types d’éléments de navigation dans votre structure de navigation principale.
Chaque élément de navigation peut contenir un type d’élément enfant à chaque niveau de votre hiérarchie de navigation. Par exemple, un Onglet peut contenir des ancres qui contiennent des groupes, mais un Onglet ne peut pas contenir à la fois des ancres et des groupes au même niveau.
```json Tabs contenant des tabs theme={null}
{
"navigation": {
"tabs": [
{
"tab": "Documentation",
"anchors": [
{
"anchor": "Guides",
"icon": "book-open",
"pages": ["quickstart", "tutorial"]
},
{
"anchor": "API Reference",
"icon": "code",
"pages": ["api/overview", "api/endpoints"]
}
]
},
{
"tab": "Resources",
"groups": [
{
"group": "Help",
"pages": ["support", "faq"]
}
]
}
]
}
}
```
```json Tabs contenant des tabs theme={null}
{
"navigation": {
"anchors": [
{
"anchor": "Documentation",
"icon": "book-open",
"tabs": [
{
"tab": "Guides",
"pages": ["quickstart", "tutorial"]
},
{
"tab": "API",
"pages": ["api/overview", "api/endpoints"]
}
]
},
{
"anchor": "Community",
"icon": "users",
"href": "https://community.example.com"
}
]
}
}
```
```json Produits contenant des onglets theme={null}
{
"navigation": {
"products": [
{
"product": "Platform",
"icon": "server",
"tabs": [
{
"tab": "Documentation",
"groups": [
{
"group": "Getting started",
"pages": ["platform/quickstart"]
}
]
},
{
"tab": "API Reference",
"pages": ["platform/api"]
}
]
},
{
"product": "Mobile SDK",
"icon": "mobile",
"pages": ["mobile/overview"]
}
]
}
}
```
```json SaaS multi-produit avec onglets et menu theme={null}
{
"navigation": {
"products": [
{
"product": "Platform",
"icon": "cloud",
"tabs": [
{
"tab": "Documentation",
"menu": [
{
"item": "Getting Started",
"icon": "rocket",
"groups": [
{
"group": "Setup",
"pages": ["platform/install", "platform/config"]
},
{
"group": "Core Concepts",
"pages": ["platform/concepts/auth", "platform/concepts/data"]
}
]
},
{
"item": "Guides",
"icon": "book",
"pages": ["platform/guides/deployment", "platform/guides/scaling"]
}
]
},
{
"tab": "API Reference",
"groups": [
{
"group": "REST API",
"pages": ["platform/api/users", "platform/api/projects"]
},
{
"group": "GraphQL",
"pages": ["platform/api/graphql/queries", "platform/api/graphql/mutations"]
}
]
}
]
},
{
"product": "Analytics",
"icon": "chart-bar",
"tabs": [
{
"tab": "Documentation",
"groups": [
{
"group": "Getting Started",
"pages": ["analytics/quickstart", "analytics/setup"]
}
]
},
{
"tab": "API",
"pages": ["analytics/api/events", "analytics/api/reports"]
}
]
}
]
}
}
```
```json Documentation versionnée avec onglets theme={null}
{
"navigation": {
"versions": [
{
"version": "v2.0",
"tabs": [
{
"tab": "Documentation",
"groups": [
{
"group": "Getting Started",
"pages": ["v2/quickstart", "v2/migration-from-v1"]
},
{
"group": "Features",
"pages": ["v2/features/auth", "v2/features/api"]
}
]
},
{
"tab": "API Reference",
"pages": ["v2/api/overview", "v2/api/endpoints"]
}
]
},
{
"version": "v1.0",
"tabs": [
{
"tab": "Documentation",
"groups": [
{
"group": "Getting Started",
"pages": ["v1/quickstart"]
}
]
},
{
"tab": "API Reference",
"pages": ["v1/api/overview"]
}
]
}
]
}
}
```
## Fil d’Ariane
Le fil d’Ariane affiche le chemin de navigation complet en haut des pages. Certains thèmes activent le fil d’Ariane par défaut, d’autres non. Vous pouvez contrôler l’affichage du fil d’Ariane sur votre site à l’aide de la propriété `styling` dans votre `docs.json`.
```json Display full breadcrumbs theme={null}
"styling": {
"eyebrows": "breadcrumbs"
}
```
```json Display parent section only theme={null}
"styling": {
"eyebrows": "section"
}
```
## Configuration des interactions
Contrôlez la manière 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 redirigent automatiquement vers la première page du groupe. Vous pouvez modifier le comportement par défaut d’un thème avec l’option `drilldown`.
* Définissez `true` pour forcer la navigation automatique vers la première page lorsqu’un utilisateur sélectionne un groupe de navigation.
* Définissez `false` pour empêcher la navigation et uniquement développer ou réduire le groupe lorsqu’un utilisateur sélectionne un groupe de navigation.
* Laissez la valeur non définie pour utiliser le comportement par défaut du thème.
```json Forcer la navigation theme={null}
"interaction": {
"drilldown": true // Forcer la navigation vers la première page lorsqu’un utilisateur ouvre un menu déroulant
}
```
```json Empêcher la navigation theme={null}
"interaction": {
"drilldown": false // Ne jamais naviguer, uniquement développer ou réduire le groupe
}
```
## Related topics
- [Scripts personnalisés](/fr/customize/custom-scripts.md)
- [Configurations](/fr/editor/configurations.md)
- [Serveur Admin Model Context Protocol (MCP)](/fr/ai/mintlify-mcp.md)