Passer au contenu principal
La propriété 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. Représentation décorative de pages. 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.
{
  "navigation": {
    "pages": [
      "settings",
      "pages",
      "navigation",
      "themes",
      "custom-domain"
    ]
  }
}

Groupes

Utilisez des groupes pour organiser la navigation de votre barre latérale en sections. Les groupes peuvent être imbriqués les uns dans les autres, assortis de tags et stylisés avec des icônes. Graphique décoratif représentant des groupes. 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 et expanded sont facultatifs.
{
  "navigation": {
    "groups": [
      {
        "group": "Premiers pas",
        "icon": "play",
        "pages": [
          "quickstart",
          {
            "group": "Édition",
            "expanded": false,
            "icon": "pencil",
            "pages": [
              "installation",
              "editor"
            ]
          }
        ]
      },
      {
        "group": "Rédaction du contenu",
        "icon": "notebook-text",
        "tag": "NEW",
        "pages": [
          "writing-content/page",
          "writing-content/text"
        ]
      }
    ]
  }
}

É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 : le groupe est développé par défaut.
  • expanded: false ou omis : le groupe est réduit 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 sont toujours développés et ne peuvent pas être réduits.
{
  "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. Graphique décoratif d’une navigation par onglets. 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.
{
  "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.
{
  "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. Image décorative d’une navigation avec ancres. 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.
{
  "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 externes 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.
Les ancres globales doivent inclure un champ href pointant vers une URL externe. Elles ne peuvent pas contenir de chemins relatifs.
{
  "navigation": {
    "global":  {
      "anchors": [
        {
          "anchor": "Communauté",
          "icon": "house",
          "href": "https://slack.com"
        },
        {
          "anchor": "Blog",
          "icon": "pencil",
          "href": "https://mintlify.com/blog"
        }
      ]
    },
    "tabs": /*...*/
  }
}
Les menus déroulants se trouvent dans 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. Graphique décoratif d’une navigation avec menu déroulant. 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.
{
  "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"
      }
    ]
  }
}

Produits

Illustration décorative d’un sélecteur de produit. 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.
{
  "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"
      }
    ]
  }
}

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ériteront 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.
{
  "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. Illustration décorative d’un sélecteur de version. 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.
{
  "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"]
          }
        ]
      }
    ]
  }
}

Langues

Organisez votre navigation en différentes langues. Les langues sont sélectionnables via un menu déroulant. Graphique décoratif d’un sélecteur de langue. Dans l’objet navigation, languages est un tableau où chaque entrée est un objet qui doit contenir un champ language et peut inclure tout autre champ de navigation, y compris des configurations de bannières propres à chaque langue. Nous prenons actuellement en charge les langues suivantes pour la localisation :
https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/ar.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=1d2b397bae3100c21089394967d5b6ed

Arabe (ar)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/cs.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=bcdcc7105aa807745d5a6e5995143b2d

Tchèque (cs)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/cn.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=99c00d04cf00d95d817243e86caee8ff

Chinois (cn)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/cn.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=99c00d04cf00d95d817243e86caee8ff

Chinois (zh-Hant)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/nl.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=ce46a9dda6d7392480f7ce4075e188df

Néerlandais (nl)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/en.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=b151ddb015628c19c00932810eab6cf5

Anglais (en)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/fr.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=0c08d85a6310af694c8e3d9de22dd77b

Français (fr)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/de.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=f91331daba7fb3a197871d65ed38d135

Allemand (de)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/he.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=0f8fd0220d50d6dc29334681881436b8

Hébreu (he)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/hi.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=da4adc3507f2e358bcf52ce3406a87c4

Hindi (hi)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/id.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=f9d62873a61be465cd00517a1f3d3b77

Indonésien (id)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/it.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=6bc84439d7708f6e749bdc5cb8e53076

Italien (it)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/jp.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=bf989858bb84d8e530256f1dfd79e172

Japonais (jp)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/ko.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=6ac5841deffd49b6f0e4f3dd344483ce

Coréen (ko)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/lv.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=2156d30e10212a2849d9402ea28b9aae

Letton (lv)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/no.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=daffdef00e4c2f4ce37bddfc1c0b1923

Norvégien (no)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/pl.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=381ea98b6166475b88dc7d54d19b4456

Polonais (pl)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/pt-br.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=b7184110f9c80dd41a7e464eba0a3a8e

Portugais (pt-BR)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/ro.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=551adefac53399decf0fc342be780387

Roumain (ro)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/ru.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=6613ba259835e368403641ae3fea58ea

Russe (ru)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/es.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=4ea8c27c82f881483942a652a6e948c1

Espagnol (es)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/sv.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=a8067feb17d3b6a9503762fadf5b5b9c

Suédois (sv)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/tr.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=68b9d91330437a1783d0873e91d145e3

Turc (tr)

https://mintcdn.com/anotherhorizon/nGGkQ8HPtMLIJ_OO/images/navigation/languages/ua.png?fit=max&auto=format&n=nGGkQ8HPtMLIJ_OO&q=85&s=a8c8c36fe3ac2153f78cb6bfe9a002a0

Ukrainien (ua)

https://mintcdn.com/anotherhorizon/KtT4EXjd_91dkOA7/images/navigation/languages/uz.png?fit=max&auto=format&n=KtT4EXjd_91dkOA7&q=85&s=87098bb08e3f7a6fae5709204315d91c

Ouzbek (uz)

https://mintcdn.com/anotherhorizon/KtT4EXjd_91dkOA7/images/navigation/languages/vi.png?fit=max&auto=format&n=KtT4EXjd_91dkOA7&q=85&s=d1102f0e3eab69b9d759b2384dd57b1f

Vietnamien (vi)

{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "banner": {
          "content": "🚀 Version 2.0 is now live! See our [changelog](/en/changelog) for details.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Getting started",
            "pages": ["en/overview", "en/quickstart", "en/development"]
          }
        ]
      },
      {
        "language": "es",
        "banner": {
          "content": "🚀 La version 2.0 est maintenant en ligne ! Consultez notre [journal des modifications](/es/changelog) pour plus de détails.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Getting started",
            "pages": ["es/overview", "es/quickstart", "es/development"]
          }
        ]
      }
    ]
  }
}
Pour des traductions automatiques, contactez notre équipe commerciale pour discuter de solutions.

Imbrication

Les éléments de navigation peuvent être imbriqués 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 tabs, groups 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 ne peut contenir qu’un seul type d’élément enfant à chaque niveau de votre hiérarchie de navigation. Par exemple, un onglet peut contenir des tabs qui contiennent des groups, mais un onglet ne peut pas contenir à la fois des tabs et des groups au même niveau.
{
  "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"]
          }
        ]
      }
    ]
  }
}
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 son activation pour votre site à l’aide de la propriété styling dans votre docs.json.
"styling": {
  "eyebrows": "breadcrumbs"
}

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 groupe de navigation est sélectionné.
  • Définissez false pour empêcher la navigation et uniquement développer ou réduire le groupe lorsqu’il est sélectionné.
  • Laissez la valeur non définie pour utiliser le comportement par défaut du thème.
"interaction": {
  "drilldown": true  // Forcer la navigation vers la première page lorsqu’un utilisateur ouvre un menu déroulant
}