Navigation

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

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.

2. Poser vos liens dans l'en-tête

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 :

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/' }],
      },
    ],
  },
],

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.

<Menu label="Ce module">
  <MenuLink href="/examples/making-it-yours/colours/">Couleurs</MenuLink>
  <MenuLink href="/examples/making-it-yours/navigation/">Navigation</MenuLink>
</Menu>

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 :

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

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