> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Menu Builder (BETA)

> Erstelle und verwalte individuelle Menüstrukturen völlig frei und unabhängig von der Standard-Kategoriehierarchie.

## Disclaimer ( BETA)

Der Menu-Builder ist ein mächtiges Werkzeug, das sich aktuell noch in der Entwicklungsphase befindet.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/y2FbTUkMeGPaci03/images/niu-plus-menue-builder-disclaimer.jpg?fit=max&auto=format&n=y2FbTUkMeGPaci03&q=85&s=0e4394f8fe97752178b33eabd9d4c614" alt="Menu Builder Disclaimer" width="2070" height="310" data-path="images/niu-plus-menue-builder-disclaimer.jpg" />
  </Frame>
</div>

<Warning>
  **Open BETA Status**

  Dieser Menu-Builder befindet sich in der **Open BETA**. Wir laden dich herzlich dazu ein, das Feature in einer **Testumgebung** zu testen und uns Feedback zu geben.

  Bitte beachte, dass wir noch keine Garantie auf vollständige Funktionsfähigkeit geben können. Die Nutzung in produktiven Systemen unterliegt der eigenen Verantwortung.
</Warning>

### Aktivierung

Um den Menu-Builder zu nutzen, musst du den Hinweis bestätigen und das Feature aktiv einschalten.

**Ich habe den Hinweis verstanden und aktiviere den Menubuilder auf eigene Gefahr in einer Testumgebung:** Aktiviere diesen Schalter, um die Funktionen des Builders freizuschalten.

***

## Menü Struktur

Hier kannst du deinen Navigationsbaum per Drag-and-Drop (in der Regel bei solchen Buildern üblich) und über die Aktions-Buttons zusammenstellen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/y2FbTUkMeGPaci03/images/niu-plus-menue-builder-struktur-1.jpg?fit=max&auto=format&n=y2FbTUkMeGPaci03&q=85&s=c8243b6c659aefdd2b04f39fa2fd2ed1" alt="Menu Builder Struktur 1" width="2070" height="834" data-path="images/niu-plus-menue-builder-struktur-1.jpg" />
  </Frame>
</div>

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/y2FbTUkMeGPaci03/images/niu-plus-menue-builder-struktur-2.jpg?fit=max&auto=format&n=y2FbTUkMeGPaci03&q=85&s=3b10cd0c65ee83f4afeecaaea26d9d06" alt="Menu Builder Struktur 2" width="2072" height="106" data-path="images/niu-plus-menue-builder-struktur-2.jpg" />
  </Frame>
</div>

### Menüpunkte verwalten

In der Übersicht siehst du deine aktuelle Menüstruktur als Baumdiagramm. Du kannst Hierarchien bilden (Hauptpunkte und Unterpunkte).

* **Bearbeiten (Stift-Icon):** Klicke auf den Stift neben einem Eintrag, um dessen Namen, Ziel oder Eigenschaften zu ändern.
* **Ausgewählte Punkte löschen (Mülleimer):** Klicke auf den roten Button, um alle aktuell angehakten Menüpunkte unwiderruflich zu entfernen.

### Aktionen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/y2FbTUkMeGPaci03/images/niu-plus-menue-builder-aktionen.jpg?fit=max&auto=format&n=y2FbTUkMeGPaci03&q=85&s=4c91cdaa72328567c907d1999187038e" alt="Menu Builder Aktionen" width="1152" height="1733" data-path="images/niu-plus-menue-builder-aktionen.jpg" />
  </Frame>
</div>

Unterhalb der Struktur findest du die Hauptaktionen:

* **Menüpunkt hinzufügen:** Klicke auf den grünen Button, um einen neuen Menüpunkt hinzuzufügen. Es öffnet sich das Formular "Neuer Menüpunkt" mit folgenden Feldern:

**LinkTyp:** Wähle den Typ des Menüpunkts. Verfügbare Optionen: Seite, Kategorie, Link.

**Kategorie:** Wähle die Zielkategorie aus dem Dropdown (nur bei LinkTyp "Kategorie").

**Seite:** Wähle die Zielseite aus dem Dropdown (nur bei LinkTyp "Seite"). Verfügbare Seiten: Startseite, Mein Konto, Impressum, Versandinformationen, Sitemap.

**Unterseiten übernehmen?** Aktiviere diesen Schalter, um alle Unterseiten der gewählten Kategorie automatisch in das Menü zu übernehmen.

**Alternativtitel Deutsch / Englisch / Spanisch:** Trage hier einen abweichenden Anzeigetitel für den Menüpunkt in der jeweiligen Sprache ein. Bleibt das Feld leer, wird der Standardname verwendet.

**Zusätzliche CSS Klassen:** Füge dem Menüpunkt eigene CSS-Klassen hinzu (z. B. `alert alert-danger`), um ihn individuell zu stylen.

**Zusätzliches CSS:** Trage hier direktes Inline-CSS für den Menüpunkt ein (z. B. `border: 1px solid #e5e5e5;`).

**Zusätzliches HTML:** Füge eigenes HTML hinzu, das zusammen mit dem Menüpunkt gerendert wird (z. B. ein SVG-Icon `<svg>...</svg>`).

* **Ausgewählte Punkte löschen (Mülleimer):** Klicke auf den roten Button, um alle aktuell angehakten Menüpunkte unwiderruflich zu entfernen.

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />