# Navigation
> Quarante pages où un lecteur se déplace — un menu qui se replie, des liens dans l'en-tête, et une rangée de liens dans la page.
Leçon 2 sur 3.
Un site de dix pages n'a pas besoin de navigation : le menu montre tout et le
lecteur voit où il est. À quarante, ce même menu lui demande de faire défiler
ce qui ne le concerne pas.
Cette leçon active trois choses, dans l'ordre où vous les voudrez.
## 1. Replier le menu
```js
foldedSidebar: true,
```
Les catégories se replient, et la branche de la page lue s'ouvre d'elle-même —
le lecteur atterrit là où il est, pas en haut d'une liste. Une catégorie qui
est aussi une page garde sa page en première entrée : la poignée d'un repli ne
peut pas être un lien, elle deviendrait sinon inatteignable.
Rien ne se replie sur un téléphone qui ne se repliait pas déjà : sur un écran étroit, le menu
entier se replie au-dessus du contenu, quoi que dise ce réglage.
## 2. Poser vos liens dans l'en-tête
```js
headerLinks: [
{ label: 'Blog', href: '/blog/' },
{ label: 'Dépôt', href: 'https://example.com/repo' },
],
```
Une cible part de la racine d'une version — `/blog/` — ou est une adresse
complète. Une cible relative est refusée, parce qu'elle voudrait dire autre
chose sur chaque page.
Une entrée portant `columns` ouvre un **panneau** au lieu de mener quelque part :
```js
headerLinks: [
{
label: 'Apprendre',
columns: [
{
title: 'Commencer ici',
items: [
{ label: 'Installer', href: '/guide/install/' },
{ label: 'Première page', href: '/guide/first-page/' },
],
},
{
title: 'Aller plus loin',
items: [{ label: 'Composants', href: '/components/' }],
},
],
},
],
```
Le panneau et le menu de la documentation se déclarent séparément et disent des choses différentes
: l'en-tête porte ce qu'un visiteur cherche en premier, le menu porte les pages dans leur ordre.
Un site peut avoir l'un, l'autre, ou les deux.
`href` et `columns` ensemble sont refusés — une entrée mène quelque part ou
ouvre un panneau.
## 3. Une rangée de liens dans la page
Certaines pages ont besoin de leur propre plan : une page d'atterrissage,
l'ouverture d'un module. `Menu` en pose une là où la page en a besoin, et c'est
la seule navigation qui vit dans votre texte plutôt que dans la configuration.
```mdx
```
Passé une poignée d'entrées, `MenuGroup` les range sous un titre — le lecteur
cesse de lire une liste plate et en lit deux courtes :
```mdx
```
Sur un écran étroit, la rangée se replie derrière son libellé — le même repli
que l'en-tête, et pas plus de script que lui.
## Sur un téléphone
L'en-tête
Versions, vos liens et le champ de recherche passent dans un menu hamburger.
Le menu
Replié au-dessus du contenu, fermé, pour que la page commence à la page.
Un menu de page
La rangée devient un seul bouton, qui s'ouvre sur place.
Essayez honnêtement : rétrécissez la fenêtre jusqu'à ce que la mise en page
change. Chaque repli ici est un élément `details` natif — il fonctionne
JavaScript désactivé, et le clavier l'ouvre comme n'importe quel autre.
## Vérifiez par vous-même
Votre entrée de panneau porte à la fois `href` et `columns`. Que se passe-t-il ?
La génération s'arrête et le dit. Une entrée qui mène quelque part **et** ouvre
un panneau devrait choisir au moment du clic, et le lecteur ne saurait jamais
ce qu'il obtient.
Lequel des trois demande au lecteur de charger un script ?
Aucun.
La page du guide
Chaque champ, ce qu'il fait sur écran large, et ce qu'il fait sur écran étroit.