Menu di Navigazione

I menu permettono ai redattori di gestire link ordinati senza modificare un template del sito. Un menu ha un nome stabile, come primary o footer, e un insieme separato di elementi per ogni menu tradotto.

Creare un menu

Crea e organizza i menu in Menus nell’admin di EmDash.

Usa lo stesso nome di menu in ogni lingua. Su un sito multilingue, apri un menu e usa il pannello Translations per creare e modificare le versioni nelle altre lingue. EmDash mantiene collegate le traduzioni dello stesso contenuto o termine di tassonomia, così getMenu() può usare l’etichetta e lo slug per la lingua richiesta.

Come vengono risolti i link del menu

Gli elementi di menu di contenuto e tassonomia memorizzano un riferimento anziché un URL completo. Quando un template chiama getMenu(), EmDash risolve quel riferimento usando i dati della collezione e della lingua correnti.

Ogni elemento restituito contiene anche la sua etichetta, il target opzionale, l’attributo title, le classi CSS e i children annidati. L’esempio di rendering qui sotto usa quei valori direttamente.

Renderizzare un menu

Chiama getMenu() in un componente Astro renderizzato lato server. Restituisce null quando il nome non esiste.

Il seguente layout renderizza un menu principale e un livello di elementi annidati:

---
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="Navigazione 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() sceglie prima la locale esplicita, poi la lingua della richiesta corrente, poi la lingua predefinita configurata. Se un menu o una voce referenziata manca in quella lingua, la ricerca segue la catena di fallback configurata.

Gli URL degli elementi del menu contengono il pattern URL della collezione o il percorso di tassonomia, ma non contengono il prefisso di lingua di Astro. L’helper menuHref() aggiunge quel prefisso ai link relativi alla radice e lascia i link esterni invariati.

L’esempio renderizza un livello figlio, che copre un tipico dropdown. Se i redattori possono creare una navigazione più profonda, sposta il markup dell’elemento in un componente ricorsivo che renderizza i children di ogni elemento con le stesse regole.

Usare i menu nelle aree widget

Un widget menu posiziona un menu esistente all’interno di un’area widget. Il widget legge il menu per la lingua della richiesta corrente. Usa il pattern di rendering diretto sopra quando il sito necessita di markup annidato personalizzato o gestione esplicita degli URL per lingua.

Interrogare i dati del menu direttamente

Usa getMenus() quando un template necessita delle definizioni di menu disponibili anziché degli elementi di un singolo menu. Il riferimento dell’API runtime documenta le firme delle query e i valori di ritorno.

Per modifiche programmatiche ai menu, autenticati con un token Bearer e aggiungi X-EmDash-Request: 1 a ogni richiesta che modifica lo stato. Vedi gli endpoint dei menu per i corpi delle richieste e le risposte.

Vedi Internazionalizzazione per la configurazione del routing linguistico e del fallback.