---
title: Navigation
description: La navigation dans Jamdesk utilise des onglets, des groupes et des pages pour organiser votre documentation. Des liens externes peuvent être ajoutés via des anchors.
---
Votre barre latérale et votre barre supérieure sont entièrement définies dans `docs.json`. La hiérarchie de navigation comporte trois niveaux — des onglets pour les sections de premier niveau, des groupes pour les dossiers repliables, et des pages pour les entrées individuelles — ainsi que des anchors pour les liens externes qui apparaissent sur toutes les pages.
Les captures d'écran montrent l'interface en anglais.
## Aperçu de la structure
```json docs.json
{
"navigation": {
"tabs": [
{
"tab": "Documentation",
"icon": "book-open",
"groups": [
{
"group": "Getting Started",
"pages": ["introduction", "quickstart"]
}
]
}
]
}
}
```
## Concepts
### Onglets
Sections de navigation de premier niveau. Contrôlez leur position avec le paramètre `tabsPosition` :
| Valeur | Position |
| -------- | -------------------------------- |
| `"top"` | Dans la barre d'onglets d'en-tête |
| `"left"` | En haut de la barre latérale |
La position par défaut dépend de votre thème :
| Thème | Défaut |
| ------ | -------- |
| jam | `"left"` |
| nebula | `"left"` |
| pulsar | `"top"` |
```json
{
"tabsPosition": "left",
"navigation": {
"tabs": [
{ "tab": "Guides", "icon": "book", "groups": [...] },
{ "tab": "API", "icon": "code", "groups": [...] }
]
}
}
```
Les icônes utilisent la variante Font Awesome Light pour conserver une
apparence épurée et cohérente.
### Liens externes (Anchors)
Ajoutez des liens externes qui apparaissent en haut de la barre latérale sur toutes les pages :
```json
{
"anchors": [
{ "name": "Blog", "href": "https://blog.example.com", "icon": "newspaper" },
{ "name": "Status", "href": "https://status.example.com", "icon": "signal" }
]
}
```
| Champ | Type | Requis | Description |
| ------ | ------ | ------ | ---------------------------------- |
| `name` | string | Oui | Texte affiché pour le lien |
| `href` | string | Oui | URL (s'ouvre dans un nouvel onglet) |
| `icon` | string | Non | Nom d'icône Font Awesome |
### Groupes
Un groupe est un ensemble d'entrées de barre latérale étiquetées à l'intérieur d'un onglet. Les groupes donnent à votre barre latérale un rythme à deux niveaux et vous permettent de masquer les sections plus profondes derrière des dossiers de style accordéon.
```json
{
"group": "Authentication",
"pages": ["auth/overview", "auth/tokens"]
}
```
#### Deux niveaux de rendu
La barre latérale affiche différemment les groupes de premier niveau et les groupes imbriqués :
| Niveau | Où il apparaît | Comportement |
| --- | --- | --- |
| **Groupe de premier niveau** | Directement sous un onglet dans `docs.json` | Agit comme un en-tête de section persistant. Affiche toujours ses pages. Cliquer sur l'en-tête accède à la première page du groupe. |
| **Groupe imbriqué** | Dans le tableau `pages` d'un autre groupe | S'affiche comme un dossier de style accordéon avec un chevron de basculement. Cliquer pour développer ou réduire. |
Le niveau d'un groupe est positionnel : les groupes les plus externes sous un onglet s'affichent comme des groupes de premier niveau, et tout groupe placé dans le tableau `pages` d'un autre groupe s'affiche comme un dossier imbriqué. Il n'existe pas de propriété `topLevel`.
Utilisez les groupes de premier niveau pour les sections principales de votre barre latérale (Pour commencer, Référence, Guides) et les groupes imbriqués lorsqu'une section de premier niveau comporte suffisamment de pages pour qu'un second niveau de hiérarchie aide le lecteur à parcourir le contenu. Voir [Groupes imbriqués](#groupes-imbriqu-s) pour la structure JSON.
#### Comportement des groupes imbriqués
- **Développement automatique vers la page courante.** Le groupe contenant la page que vous consultez s'ouvre automatiquement, de sorte que le lien actif est toujours visible.
- **Cliquer pour basculer.** Cliquer sur l'en-tête d'un groupe imbriqué le développe (et navigue vers sa première page) ou le réduit s'il est déjà ouvert.
- **L'état persiste lors de la navigation dans l'application.** Les groupes que vous ouvrez manuellement restent ouverts lorsque vous changez de page. Un rechargement complet de la page réinitialise l'état ouvert/fermé.
#### Champs d'un groupe
| Champ | Type | Requis | Description |
| --- | --- | --- | --- |
| `group` | string | Oui | Libellé d'affichage dans la barre latérale. |
| `pages` | array | Oui | Liste des chemins de pages et/ou d'objets de groupes imbriqués (voir [Groupes imbriqués](#groupes-imbriqu-s) pour la structure imbriquée). |
| `icon` | string | Non | Nom d'icône Font Awesome affiché à côté du libellé du groupe. |
| `tag` | string | Non | Petit badge à côté du libellé (ex. : `"New"`, `"Beta"`). |
| `root` | string | Non | Chemin de page vers lequel le groupe pointe lorsque le libellé est cliqué (au lieu d'accéder à la première page enfant). |
| `hidden` | boolean | Non | Masquer le groupe de la barre latérale par défaut. Les pages restent accessibles par lien direct. |
| `public` | boolean | Non | Marquer le groupe comme accessible publiquement. Par défaut, hérite du paramètre de l'onglet parent. |
| `expanded` | boolean | Non | Ouvrir le groupe par défaut au premier chargement de la page. Ne s'applique qu'aux groupes imbriqués (les groupes de premier niveau affichent toujours leurs pages). |
### Pages
Pages de documentation individuelles, référencées par leur chemin de fichier (sans `.mdx`) :
```json
"pages": ["introduction", "guides/quickstart", "api/endpoints"]
```
Par défaut, le titre de la barre latérale est généré à partir du nom de fichier — les tirets deviennent des espaces et chaque mot est mis en majuscule. Par exemple, `"api/getting-started"` s'affiche comme « Getting Started ».
Pour définir un titre de barre latérale personnalisé, utilisez un objet à la place d'une chaîne de caractères :
```json
"pages": [
"guides/quickstart",
{ "page": "deploy/aws", "title": "AWS Route 53 & CloudFront" },
{ "page": "content/seo", "title": "SEO" },
{ "page": "api/users", "title": "List Users", "method": "GET" }
]
```
C'est utile pour les acronymes, les noms propres et les badges d'endpoints API.
| Champ | Type | Requis | Description |
| --- | --- | --- | --- |
| `page` | string | Oui | Chemin de fichier sans `.mdx` |
| `title` | string | Non | Titre personnalisé dans la barre latérale |
| `icon` | string | Non | Nom d'icône Font Awesome |
| `tag` | string | Non | Petit badge à côté du titre (ex. : « New », « Beta ») |
| `method` | string | Non | Badge de méthode HTTP : GET, POST, PUT, PATCH ou DELETE |
## Plusieurs onglets
Créez des sections séparées pour différents publics :
```json
{
"navigation": {
"tabs": [
{
"tab": "Guides",
"icon": "book",
"groups": [
{ "group": "Getting Started", "pages": ["intro", "quickstart"] }
]
},
{
"tab": "API Reference",
"icon": "code",
"groups": [{ "group": "Endpoints", "pages": ["api/auth", "api/users"] }]
}
]
}
}
```
## Liens d'onglets externes
Liez vers une documentation externe ou des ressources directement depuis les onglets :
```json
{
"navigation": {
"tabs": [
{ "tab": "Docs", "icon": "book", "groups": [...] },
{ "tab": "GitHub", "icon": "github", "href": "https://github.com/example/repo" }
]
}
}
```
Les onglets externes s'ouvrent dans un nouvel onglet du navigateur.
## Groupes imbriqués
Organisez une documentation complexe avec des structures imbriquées :
```json
{
"group": "SDKs",
"pages": [
"sdks/overview",
{
"group": "JavaScript",
"pages": ["sdks/js/install", "sdks/js/usage"]
},
{
"group": "Python",
"pages": ["sdks/python/install", "sdks/python/usage"]
}
]
}
```
## Et ensuite ?
Liez votre dépôt pour des builds automatiques
Organisez votre documentation pour passer à l'échelle