Menüs

Allgemein

Menüs bündeln Navigationseinträge einer Website. Eine Website kann mehrere Menüs besitzen, zum Beispiel Hauptnavigation, Footer-Menü oder ein spezielles Shop-Menü. Menüeinträge können auf interne Seiten, externe URLs, Textabschnitte oder den Warenkorb verweisen.

Im Manager

Menüs werden im simplebis-manager unter Webseiten gepflegt. Dort eine Website öffnen und den Bereich Menüs verwenden. Jedes Menü erhält einen eindeutigen Key. Dieser Key darf Kleinbuchstaben, Zahlen, Unterstriche und Bindestriche enthalten.

Einträge

Ein Menüeintrag kann ein interner Link, externer Link, Text oder Warenkorb-Link sein. Interne Links werden aus den Seiten der aktuellen Website gewählt. Wenn eine Seite Routenparameter wie :slug oder [slug] nutzt, können die benötigten Werte im Menüeintrag gepflegt werden. Zusätzlich können Query-Parameter, CSS-Klassen, deaktivierte Einträge und Untereinträge gepflegt werden.

Sichtbarkeit

Menüeinträge können nach Login-Status und Kundengruppen eingeschränkt werden. Dadurch lassen sich Einträge nur für angemeldete Besucher, Gäste oder bestimmte Kundengruppen anzeigen. Verschachtelte Einträge werden nur ausgegeben, wenn sie nach den Bedingungen sichtbar sind.

Verwendung im Builder

Komponenten können eine Eigenschaft vom Typ Menü besitzen. Im Builder wird dann das gewünschte Menü ausgewählt. Die Komponente entscheidet anschließend, wie die Einträge dargestellt werden, zum Beispiel als Header-Navigation, Footer-Liste oder mobiles Menü.

Verwendung im Code

In Code-Seiten und serverseitigen Code-Komponenten sollte ein Menü über die eingebaute Runtime-Komponente Menu gerendert werden. Dafür wird keine lokale Datei importiert. Stattdessen wird api.renderComponent("Menu", props) verwendet.

Die wichtigste Eigenschaft ist menuKey. Der Wert muss dem Key entsprechen, der unter Webseiten > Website öffnen > Menüs gepflegt wurde, zum Beispiel main, footer oder shop. Optional können className und ariaLabel übergeben werden. Die eingebaute Menu-Komponente löst das Menü aus der aktuellen Website auf und berücksichtigt dabei sichtbare Einträge, interne Links, externe Links, Untereinträge, Warenkorb-Links und Sichtbarkeitsbedingungen.

Beispiel für eine Code-Seite, die ein Menü direkt rendert:

const React = require("react");

exports.default = async function NavigationPage({ api }) {
  return React.createElement(
    "main",
    { className: "page page--navigation" },
    React.createElement("h1", null, "Navigation"),
    await api.renderComponent("Menu", {
      menuKey: "main",
      className: "main-navigation",
      ariaLabel: "Hauptnavigation",
    }),
  );
};

Beispiel für eine wiederverwendbare Header-Komponente mit konfigurierbarem Menü-Key:

const React = require("react");

exports.default = async function WebsiteHeader({ props, api }) {
  const menuKey = props?.menuKey || "main";

  return React.createElement(
    "header",
    { className: "site-header" },
    React.createElement("a", { className: "site-logo", href: api.buildUrl("/") }, props?.title || "Start"),
    await api.renderComponent("Menu", {
      menuKey,
      className: "site-header__menu",
      ariaLabel: "Website-Navigation",
    }),
  );
};

Wenn eine Komponente eine Builder-Eigenschaft vom Typ Menü besitzt, kann statt menuKey auch das ausgewählte Menüobjekt an menu übergeben werden:

const React = require("react");

exports.default = async function FooterNavigation({ props, api }) {
  return React.createElement(
    "footer",
    { className: "site-footer" },
    await api.renderComponent("Menu", {
      menu: props?.menu,
      className: "site-footer__menu",
      ariaLabel: "Footer-Navigation",
    }),
  );
};

Nach Änderungen am Menü empfiehlt sich eine Prüfung aller Code-Seiten und Code-Komponenten, die diesen Menü-Key oder diese Menü-Eigenschaft verwenden.