Menus de Navigation

Les menus permettent aux éditeurs de gérer des liens ordonnés sans modifier un modèle de site. Un menu a un nom stable, comme primary ou footer, et un ensemble d’éléments distinct pour chaque menu traduit.

Créer un menu

Créez et organisez les menus dans Menus dans l’admin EmDash.

Utilisez le même nom de menu dans chaque langue. Sur un site multilingue, ouvrez un menu et utilisez son panneau Translations pour créer et modifier les versions dans les autres langues. EmDash garde les traductions du même contenu ou terme de taxonomie connectées, de sorte que getMenu() peut utiliser le libellé et le slug pour la langue demandée.

Comment les liens de menu sont résolus

Les éléments de menu de contenu et de taxonomie stockent une référence plutôt qu’une URL finie. Lorsqu’un modèle appelle getMenu(), EmDash résout cette référence en utilisant les données de la collection et de la langue actuelles.

Chaque élément renvoyé contient aussi son libellé, sa cible optionnelle, son attribut de titre, ses classes CSS et ses children imbriqués. L’exemple de rendu ci-dessous utilise ces valeurs directement.

Rendre un menu

Appelez getMenu() dans un composant Astro rendu côté serveur. Il renvoie null lorsque le nom n’existe pas.

Le layout suivant rend un menu principal et un niveau d’éléments imbriqués :

---
import { getMenu } from "emdash";
import { getRelativeLocaleUrl } from "astro:i18n";

const locale = Astro.currentLocale;
const menu = await getMenu("primary", { locale });

function menuHref(url: string) {
  return locale && url.startsWith("/")
    ? getRelativeLocaleUrl(locale, url)
    : url;
}
---

{menu && menu.items.length > 0 && (
  <nav aria-label="Navigation principale">
    <ul>
      {menu.items.map((item) => {
        const href = menuHref(item.url);

        return (
          <li class:list={item.cssClasses}>
            <a
              href={href}
              target={item.target}
              rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
              title={item.titleAttr}
              aria-current={Astro.url.pathname === href ? "page" : undefined}
            >
              {item.label}
            </a>

            {item.children.length > 0 && (
              <ul>
                {item.children.map((child) => {
                  const childHref = menuHref(child.url);

                  return (
                    <li class:list={child.cssClasses}>
                      <a
                        href={childHref}
                        target={child.target}
                        rel={child.target === "_blank" ? "noopener noreferrer" : undefined}
                        title={child.titleAttr}
                        aria-current={Astro.url.pathname === childHref ? "page" : undefined}
                      >
                        {child.label}
                      </a>
                    </li>
                  );
                })}
              </ul>
            )}
          </li>
        );
      })}
    </ul>
  </nav>
)}

getMenu() choisit d’abord la locale explicite, puis la langue de la requête actuelle, puis la langue par défaut configurée. Si un menu ou une entrée référencée est manquante dans cette langue, la recherche suit la chaîne de repli configurée.

Les URLs des éléments de menu contiennent le motif d’URL de la collection ou le chemin de taxonomie, mais elles ne contiennent pas le préfixe de langue d’Astro. Le helper menuHref() ajoute ce préfixe aux liens relatifs à la racine et laisse les liens externes inchangés.

L’exemple rend un niveau enfant, ce qui couvre un menu déroulant typique. Si les éditeurs peuvent créer une navigation plus profonde, déplacez le balisage de l’élément dans un composant récursif qui rend les children de chaque élément avec les mêmes règles.

Utiliser les menus dans les zones de widgets

Un widget de menu place un menu existant dans une zone de widgets. Le widget lit le menu pour la langue de la requête actuelle. Utilisez le patron de rendu direct ci-dessus lorsque le site a besoin d’un balisage imbriqué personnalisé ou d’une gestion explicite des URLs par langue.

Interroger les données de menu directement

Utilisez getMenus() lorsqu’un modèle a besoin des définitions de menu disponibles plutôt que des éléments d’un seul menu. La référence de l’API runtime documente les signatures de requête et les valeurs de retour.

Pour les modifications programmatiques de menus, authentifiez-vous avec un token Bearer et ajoutez X-EmDash-Request: 1 à chaque requête modifiant l’état. Voir les endpoints de menu pour les corps de requête et les réponses.

Voir Internationalisation pour la configuration du routage linguistique et du repli.