So entwirfst du ein Megamenü

Wann du ein Megamenü einsetzt, wie du Spalten für einen Pflanzenkatalog anordnest und warum Mobile ein anderes Tier ist (Akkordeon, kein einklappendes Menü).

Ein Megamenü ist das mehrspaltige Dropdown, das aufgeht, wenn ein Kunde über einen Top-Level-Navigationspunkt hovert (oder ihn antippt). Gut gemacht, kannst du damit eine Struktur aus 30 Produktkategorien unter 5 Hauptmenüpunkten zeigen, ohne jemanden zu überwältigen. Schlecht gemacht, wird es zu einer Textwand, die niemand parsen kann, oder — schlimmer — zu einem Desktop-Only-Feature, das auf Mobile bricht.

💡 Der häufigste Fehler: ein Megamenü für Desktop entwerfen und Mobile vergessen. Auf Mobile ist ein Megamenü ein Akkordeon — andere Regeln, anderes Verhalten. Hast du nur die Desktop-Version gebaut, kriegt mehr als die Hälfte deines Traffics eine kaputte Navigation.

Wann du ein Megamenü einsetzt (und wann nicht)

Nicht jeder Pflanzenshop braucht eines. Die Schwelle:

  • Setze ein Megamenü ein, wenn mindestens eine deiner Top-Level-Kategorien 6 oder mehr Unterkategorien hat, die du Kunden aus der Navigation heraus zeigen willst — und wenn diese Unterkategorien sinnvolle Nachfrage darstellen, nicht einfach jede Variante, die du führst.

  • Bleib bei einem einfachen Dropdown, wenn jede Kategorie 5 oder weniger Unterpunkte hat. Ein 4-Punkte-Flyout ist schneller zu scannen als ein 4-Punkte-Megamenü — es bringt nichts, es schwerer aussehen zu lassen, als es ist.

  • Verzichte ganz auf Dropdowns, wenn du nur Top-Level-Kategorien hast. Ein flaches Menü reicht für einen fokussierten Nischenshop (z. B. nur Sukkulenten).

Die meisten Pflanzenshops mit der Basisset-Kategoriestruktur (Zimmerpflanzen, Außenpflanzen, Geschenke, Vorteilspakete, Sale) überschreiten die 6-Unterkategorien-Schwelle innerhalb von Zimmerpflanzen und Außenpflanzen — diese beiden Top-Level-Punkte bekommen die Megamenü-Behandlung, der Rest bleibt einfach.

Anatomie eines funktionierenden Megamenüs

Ein Desktop-Megamenü hat ein paar Standardzonen:

  • Spalten mit Links — typischerweise 3 oder 4 Spalten, jede mit einer Überschrift und 4–8 Links darunter. Maximal 4 Spalten. Mehr, und du zwingst den Kunden, seitwärts zu scannen, was langsamer ist als von oben nach unten.

  • Optional: Featured Slot rechts — ein Banner-Bild mit einer einzelnen Aktion (eine Kampagnenkategorie, ein Neuzugänge-Teaser, eine saisonale Sammlung). Ein Slot, ein Bild, ein CTA. Mehr, und es konkurriert mit den Navigationslinks.

  • Überschriften innerhalb der Spalten — die sind auch klickbar. Die Überschrift "Zimmerpflanzen" oben in der Zimmerpflanzen-Spalte sollte zur Zimmerpflanzen-Sammlungsseite selbst führen. Kunden, die die volle Sammlung wollen, sollten nicht gezwungen werden, eine Unterkategorie zu wählen.

Ein Vier-Spalten-Beispiel für einen Pflanzenshop

Hier ist ein funktionierendes Layout für den Top-Level-Punkt Zimmerpflanzen, ausgehend von einem Shop mit etwa 14 Pflanzen-Unterkategorien. Vier Spalten, ein Featured Slot:

Spalte 1: Shoppen nach Typ

  • Alle Zimmerpflanzen

  • Pflegeleichte Pflanzen

  • Luftreinigende Pflanzen

  • Hängepflanzen

  • Große Statement-Pflanzen

  • Mini-Pflanzen

Spalte 2: Shoppen nach Licht

  • Hell, direkte Sonne

  • Hell, indirektes Licht

  • Mittleres Licht

  • Wenig Licht / nordseitige Räume

Spalte 3: Shoppen nach Art

  • Monstera

  • Calathea

  • Philodendron

  • Ficus

  • Palmen

  • Alle Arten ansehen

Spalte 4: Shoppen nach Raum oder Thema

  • Haustierfreundlich

  • Badezimmerpflanzen

  • Büropflanzen

  • Schlafzimmerpflanzen

Featured Slot (rechts): Banner-Bild — derzeit rotierend zu Frühjahrsneuheiten, ein CTA "Entdecke, was neu ist".

Das sind 22 Navigationseinträge unter einem Top-Level-Punkt, so organisiert, dass ein Kunde, der weiß, was er will, es in zwei Sekunden findet (Calathea), ein Kunde, der erkundet, drei verschiedene Türen hat (nach Typ, nach Licht, nach Raum), und ein Kunde, der offen für Vorschläge ist, das saisonale Banner sieht.

Der rechte Bild-Slot ist optional. Nutze ihn, wenn:

  • Du einen klaren saisonalen oder Kampagnen-Push hast, der davon profitiert, während der Navigation gesehen zu werden, nicht nur auf der Homepage.

  • Du dich verpflichten kannst, ihn frisch zu halten — ein Weihnachtsbanner, das im Februar noch im Megamenü hängt, ist ein lauteres Tot-Shop-Signal als gar kein Banner.

Lass ihn weg, wenn dein Shop klein genug ist, dass die Navigationsspalten schon spärlich wirken. Ein leerer Featured Slot ist schlimmer als kein Slot.

Mobile ist ein Akkordeon, kein Megamenü

Auf Mobile wird das Megamenü zu einem vertikalen Akkordeon innerhalb des Hamburger-Drawers. Die Spalten verschwinden; alles stapelt sich. Regeln:

  • Top-Level: 5–7 Punkte, gleich wie Desktop. Der Hamburger ändert nichts daran, welche Kategorien wichtig sind.

  • Maximal 1 Ebene tief vor Scroll. Top-Level → Unterkategorien-Liste → Sammlungsseite. Versuch nicht, die 4-Spalten-Struktur des Desktops mit verschachtelten Akkordeons in Akkordeons zu spiegeln; Nutzer verlieren sich.

  • Tippen zum Aufklappen, Tippen zum Navigieren. Der Top-Level-Punkt selbst sollte als Link tippbar sein (zur Sammlungsseite führend) UND einen Chevron haben, um die Unterliste aufzuklappen. Nutze ein separates Chevron-Icon — lass die ganze Zeile keine Doppelarbeit machen, Kunden können nicht erkennen, was passieren wird.

  • Halte Überschriften kurz. "Shoppen nach Licht" geht auf Desktop; auf Mobile reicht "Nach Licht". Bildschirmplatz zählt.

Das Mobile-Akkordeon kann — und sollte — manchmal schmaler sein als das Desktop-Megamenü. Ein Mobile-Nutzer liest keine 22 Unterkategorie-Links innerhalb eines eingeklappten Top-Level-Punkts. Er scannt. Hast du 22 Desktop-Einträge, überlege, auf Mobile nur 8–10 davon zu zeigen und den Rest über die Sammlungsseite zu verlinken. Das Megamenü ist Desktops Chance, den Katalog zu lehren; Mobile ist für den Kunden, der schon weiß, wohin er geht.

Hover vs. Klick auf Desktop

Ältere Megamenüs öffnen sich beim Hover. Neuere öffnen sich beim Klick. Das Barrierefreiheits-Argument ist entschieden: Klick gewinnt.

  • Hover-Menüs sind eine Barriere für Tastaturnutzer und assistive Technik. Klick-Menüs zeigen denselben Inhalt mit korrekten ARIA-Rollen.

  • Hover-Menüs triggern versehentlich, wenn ein Kunde etwas in der Nähe der Navigation liest — störend und leicht fehl-klickbar.

  • Klick-Menüs geben dir einen sauberen "offen"-Zustand mit Backdrop und eine klare Schließen-Aktion.

Die meisten modernen Shopify- und WooCommerce-Themes defaulten auf Klick. Ist deins nur Hover, ist der Wechsel zu Klick selten eine kontroverse Änderung bei Kunden — aber eine sinnvolle Verbesserung für die 5–10% deiner Besucher, die Tastaturnavigation, Screenreader oder hover-unfreundliche Geräte wie Touchscreen-auf-Desktop nutzen.

Content-Disziplin im Megamenü

Ein paar Regeln, an denen Wiederverkäufer scheitern:

  • Wiederhole den Eltern nicht in den Kindern. Lautet die Spaltenüberschrift "Shoppen nach Art", sollte der Link darunter "Monstera" heißen, nicht "Monstera-Pflanzen". Der Eltern impliziert es schon.

  • Gruppiere nach Kundenlogik, nicht nach Kataloglogik. "Shoppen nach Licht" ist ein mentales Modell des Kunden. "Tropisches Laub Typ B" ist ein Lieferantenmodell. Lies Kategoriestruktur, warum diese Unterscheidung wichtig ist.

  • Decke 4 Spalten, 8 Links pro Spalte. 32 Links pro Top-Level-Punkt ist die absolute Obergrenze. Darüber hört der Kunde auf zu scannen und gibt auf.

  • Nutze das Megamenü nicht als Content-Marketing-Fläche. "Lies unsere Pflegeleitfäden" kann ins Hauptmenü (Inspirations-Punkt), aber nicht als Spalte in Zimmerpflanzen — der Kunde shoppt, liest nicht.

Was du morgen tun kannst

Audite deine aktuellen Top-Level-Punkte: zähle die Unterkategorien, die du unter jedem zeigen würdest. Überall, wo du 6 überschreitest, plane ein Megamenü. Skizziere für jedes die 3–4 Spaltengruppierungen auf Papier, bevor du deine Theme-Einstellungen öffnest — "nach Typ", "nach Licht", "nach Raum", "nach Art" sind die vier häufigsten Gruppierungen für Pflanzenshops; wähle die, die zu deinem Sortiment passen. Bau es dann in Shopify (Online Store → Navigation, mit einem Theme, das Megamenüs unterstützt, oder einer App wie Meteor / Buddha) oder WooCommerce (die meisten Premium-Themes haben native Megamenü-Unterstützung, ansonsten das Max-Mega-Menu-Plugin). Teste danach das Mobile-Akkordeon auf einem echten Telefon — nicht der Desktop-Vorschau — und kürze die Mobile-Unterliste auf das, was in einen Bildschirm Scroll passt. Geh dann weiter zu Filter und Produktattribute aufsetzen, denn die Unterkategorien, die du gerade im Megamenü gezeigt hast, sind auch die Spec-Werte, die deine Filter antreiben.