Navigationsmenüs

Menüs ermöglichen es Redakteuren, geordnete Links zu verwalten, ohne eine Website-Vorlage zu ändern. Ein Menü hat einen stabilen Namen wie primary oder footer und einen separaten Satz von Einträgen für jedes übersetzte Menü.

Ein Menü erstellen

Erstellen und ordnen Sie Menüs unter Menus im EmDash-Admin.

Verwenden Sie denselben Menünamen in jeder Sprache. Öffnen Sie auf einer mehrsprachigen Website ein Menü und verwenden Sie das Translations-Panel, um die anderen Sprachversionen zu erstellen und zu bearbeiten. EmDash hält die Übersetzungen desselben Inhalts oder Taxonomiebegriffs verbunden, sodass getMenu() das Label und den Slug für die angeforderte Sprache verwenden kann.

Wie Menü-Links aufgelöst werden

Inhalts- und Taxonomie-Menüeinträge speichern eine Referenz anstelle einer fertigen URL. Wenn eine Vorlage getMenu() aufruft, löst EmDash diese Referenz mithilfe der aktuellen Sammlungs- und Sprachdaten auf.

Jeder zurückgegebene Eintrag enthält auch sein Label, optionales Ziel, Titel-Attribut, CSS-Klassen und verschachtelte children. Das Rendering-Beispiel unten verwendet diese Werte direkt.

Ein Menü rendern

Rufen Sie getMenu() in einer serverseitig gerenderten Astro-Komponente auf. Es gibt null zurück, wenn der Name nicht existiert.

Das folgende Layout rendert ein Hauptmenü und eine Ebene verschachtelter Einträge:

---
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="Hauptnavigation">
    <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() wählt zuerst die explizite locale, dann die aktuelle Anfrage-Sprache und dann die konfigurierte Standardsprache. Wenn ein Menü oder ein referenzierter Eintrag in dieser Sprache fehlt, folgt die Suche der konfigurierten Fallback-Kette.

Menüeintrag-URLs enthalten das Sammlungs-URL-Muster oder den Taxonomie-Pfad, aber sie enthalten nicht Astros Sprachpräfix. Der menuHref()-Helfer fügt dieses Präfix zu wurzelrelativen Links hinzu und lässt externe Links unverändert.

Das Beispiel rendert eine Kind-Ebene, was ein typisches Dropdown abdeckt. Wenn Redakteure tiefere Navigation erstellen können, verschieben Sie das Eintrags-Markup in eine rekursive Komponente, die die children jedes Eintrags mit denselben Regeln rendert.

Menüs in Widget-Bereichen verwenden

Ein Menü-Widget platziert ein bestehendes Menü innerhalb eines Widget-Bereichs. Das Widget liest das Menü für die aktuelle Anfrage-Sprache. Verwenden Sie das obige direkte Rendering-Muster, wenn die Website benutzerdefiniertes verschachteltes Markup oder explizite Sprachsprach-URL-Behandlung benötigt.

Menüdaten direkt abfragen

Verwenden Sie getMenus(), wenn eine Vorlage die verfügbaren Menüdefinitionen anstelle der Einträge eines Menüs benötigt. Die Runtime-API-Referenz dokumentiert die Abfragesignaturen und Rückgabewerte.

Für programmatische Menüänderungen authentifizieren Sie sich mit einem Bearer-Token und fügen Sie X-EmDash-Request: 1 zu jeder zustandsändernden Anfrage hinzu. Siehe die Menü-Endpunkte für Anfragekörper und Antworten.

Siehe Internationalisierung für Sprachrouting und Fallback-Konfiguration.