Mega-Menue bauen

Ein Mega-Menue ist ein breites mehrspaltiges Dropdown fuer die Primaer-Navigation mit vielen gruppierten Eintraegen. Denk an das "Shop"-Dropdown eines grossen E-Commerce-Headers: 4 Spalten, jede mit einem Kategorie-Titel und 5–8 Links, plus einem Bild rechts.

Voraussetzung: Du hast den Menue-Editor mit mindestens einem Top-Level-Eintrag offen. Falls nicht, lies zuerst die Menue-Editor-Uebersicht.

Wann ein Mega-Menue sinnvoll ist

Nutz ein Mega-Menue, wenn ein einzelner Top-Level-Eintrag viele Children hat und du sie visuell gruppieren willst. Beispiele:

• E-Commerce: Shop → Kategorien, Marken, Kollektionen, Sale, jeweils mit 6–10 Eintraegen.
• Doku-Sites: Produkte → Feature-Gruppen, API, Guides, Downloads.
• Unternehmens-Sites: Ueber uns → Firma, Management, Karriere, News, Kontakt.

Hat dein Top-Level-Eintrag weniger als 6 Children und keine natuerliche Gruppierung, reicht ein normales Untermenue — nimm dann einen Page- oder Label-Eintrag mit verschachtelten Children.

Mega-Eintrag anlegen

1. Fuege im Struktur-Baum einen neuen Top-Level-Eintrag hinzu.
2. Setz im Properties-Panel Typ auf Mega.
3. Fuell Label aus (der Text in der Top-Bar).
4. Im Abschnitt Mega-Menue waehlst du die Spaltenanzahl (2 bis 6).
5. Speichern.

Der Mega-Typ zeigt einen Spaltenanzahl-Dropdown.

Spalten und Links anlegen

Innerhalb eines Mega-Eintrags sind Children der Ebene 1 die Spalten. Children der Ebene 2 sind die Links innerhalb dieser Spalten.

Mega-Eintrag: "Produkte"
├── Spalte 1: "Geraete"
│   ├── Link: "Smartphones"
│   ├── Link: "Tablets"
│   └── Link: "Wearables"
├── Spalte 2: "Software"
│   ├── Link: "Betriebssystem"
│   └── Link: "Apps"
└── Spalte 3: "Zubehoer"
    ├── Link: "Huellen"
    └── Link: "Ladegeraete"

So baust du das:

1. Waehl den Mega-Eintrag.
2. Klick auf Menüpunkt hinzufügen — das legt ein Child an (wird Spalte). Setz sein Label.
3. Mit der neuen Spalte ausgewaehlt wieder Menüpunkt hinzufügen — das legt ein Enkel-Element an (wird Link in der Spalte). Setz Typ auf Page oder Link, traeg das Ziel ein.
4. Fuer weitere Spalten und Links wiederholen.

Spalten sind direkte Children des Mega-Eintrags; Links sind Children der Spalten.

Bild hinzufuegen

Ein Mega-Eintrag kann optional ein Bild auf der rechten Seite des Dropdowns rendern — ideal fuer ein Kampagnen-Banner oder ein Produkt-Hero.

1. Waehl den Mega-Eintrag.
2. Scroll im Properties-Panel zu Bild.
3. Klick ins Bild-Feld. Der Media Manager oeffnet sich.
4. Waehl ein Bild und klick auf Speichern.

Das optionale Bild erscheint in der Live-Vorschau rechts neben den Spalten.

Spalten-Header stylen

Das Top-Level-Label jeder Spalte rendert als Header. Damit er anders als die Link-Zeilen aussieht, setz ein Icon, eine eigene CSS Class oder Custom CSS — alles im Properties-Panel der Spalte.

Spalten-Header nicht klickbar machen

Soll ein Spalten-Header nur ein Label ohne Navigation sein, setz seinen Typ auf Label. Der Header wird als reiner Text gerendert, nur die Kind-Links sind klickbar.

Vorschau

Klick in der Live-Vorschau den Mega-Eintrag an, um das Dropdown aufzuklappen. Wechsle den Breakpoint in der Top-Bar auf Mobile, um die Mobile-Variante zu pruefen — Mega-Menues kollabieren auf kleinen Screens meist in eine vertikale Liste.

Mega-Menues klappen bei Hover (Desktop) oder Tap (Mobile) auf.

Grenzen und Tipps

• Maximal 6 Spalten — mehr passt nicht auf uebliche Bildschirme und schadet der Lesbarkeit.
• 5–8 Links pro Spalte ist ideal. 10+ wirkt dicht.
• Bilder sind optional — nutz sie nur, wenn das Bild echten Mehrwert bringt; sonst sind mehr Spalten besser.
• Mobile faellt auf ein vertikales Accordion zurueck — vor dem Veroeffentlichen testen.

Siehe auch

• Menue-Eintraege bearbeiten — die fuenf Typen, Icons, Badges, Sichtbarkeit.
• Menue-Editor — Uebersicht
• Media Manager — Bilder fuers Mega-Menue verwalten.