Plan	Preis	Features
Bronze	159 Euro / Jahr	Ermöglicht die Nutzung von Drops aus unserem Store und beinhaltet zahlreiche Free Drops.
Silber	599 Euro / Jahr	Alle Funktionen von Bronze + eigene Drops erstellen & nutzen
Gold	999 Euro / Jahr	Alle Funktionen von Silber + Drop Flatrate + bevorzugter Support

28.01.2026 Toolbox

So spielst du unterschiedliche Navigationsmenüs je Gerät im JTL-Shop aus

Passe die Navigation deines JTL-Shops gezielt an Smartphones, Tablets und Desktopgeräte an. Mit dem Flex Menu Drop steuerst du Aufbau und Sichtbarkeit der Menüpunkte je nach Endgerät - mit einem gemeinsamen Menü oder separaten Varianten.

Navigation flexibel nach Gerätetyp anpassen - Thumbnail

Toolbox: #002 · Typ: Aufbau · Fokus: Flex Menu

Problem

Ich möchte, dass sich meine JTL-Shop-Navigation an das Endgerät anpasst - z. B. ein reduziertes Menü auf dem Smartphone und eine umfangreiche Navigation auf dem Desktop.

Geräteübergreifendes Verhalten ist ein zentraler Bestandteil eines guten Nutzererlebnisses. Gerade bei umfangreichen Shops kann eine klassische Hauptnavigation auf mobilen Geräten schnell unübersichtlich werden: zu viele Menüpunkte, verschachtelte Ebenen oder zu kleine Klickflächen.

Die Herausforderung besteht darin, eine Navigation bereitzustellen, die sich sinnvoll an den verfügbaren Platz und das jeweilige Endgerät anpasst - ohne unterschiedliche Templates oder komplizierte Sonderlösungen pflegen zu müssen.

Lösung

Mit dem Flex Menu Drop kannst du eine flexible Hauptnavigation für deinen JTL-Shop erstellen, die sich automatisch an unterschiedliche Endgeräte anpasst.

Wie sich das Flex Menu grundsätzlich von der Standardnavigation im JTL-Shop unterscheidet und welche Vorteile es bietet, zeigen wir dir im passenden Grundlagen-Beitrag.

Schritt für Schritt

Entscheidung: ein Menü für alle Geräte oder getrennte Menüs für Mobil und Desktop
Flex Menu Drop(s) anlegen und die Menüstruktur bauen
Mobil vs. Desktop einstellen: Was soll sichtbar sein und wie soll sich das Menü verhalten?
Im Shop ausspielen und kurz auf Smartphone und Desktop testen; bei Bedarf nachjustieren

Ein Flex Menu für alle Größen

Das "Flex" im Namen ist dabei durchaus wörtlich zu nehmen: Die Navigation reagiert auf den verfügbaren Platz und passt ihr Verhalten dynamisch an. Je nach Konfiguration werden Menüpunkte ausgeblendet, in ein Burger-Menü verschoben oder Dropdowns deaktiviert.

Dieses Verhalten ist vollständig konfigurierbar. Du kannst unter anderem:

per Anzeigenpriorität steuern, welche Menüpunkte sichtbar bleiben und welche ins Burger-Menü wandern
einzelne Menüpunkte abhängig vom Gerätetyp gezielt ein- oder ausblenden
in den Designeinstellungen festlegen, auf welchen Geräten Dropdowns genutzt werden sollen
Darstellungsfilter für Menüpunkte einsetzen, um sehr präzise Anzeigebedingungen umzusetzen

So entsteht eine Navigation, die sich nicht nur optisch anpasst, sondern auch inhaltlich auf die jeweilige Nutzungssituation eingeht.

Verschiedene Flex Menus in einem Shop

In vielen Fällen reicht ein einziges Flex Menu aus. Es gibt jedoch Szenarien, in denen komplett unterschiedliche Navigationskonzepte sinnvoll sind - etwa ein sehr reduziertes Menü auf dem Smartphone und eine umfangreiche Struktur auf dem Desktop.

Auch das ist problemlos möglich: Du kannst mehrere, vollständig unterschiedliche Flex Menu Drops erstellen und diese mithilfe des Darstellungsfilters Gerättyp nur auf den jeweils passenden Geräten ausspielen. Das Prinzip lässt sich auf weitere Darstellungsfilter erweitern, zum Beispiel auf Kunden oder Kundengruppen.

Ein konkretes Praxisbeispiel dafür zeigen wir in Let's Drop #063 und #064, in denen genau dieses Setup in einem realen JTL-Shop umgesetzt wird.

Weitere Beispiele, Videos und die Dokumentation zum Drop sind unten im Ressourcen-Bereich verlinkt.

Funktioniert

in jedem JTL-Shop Template

Dropper & Drops funktionieren in jedem Template. Du kannst jedes Drop auch als Portlet im OPC nutzen.

Enthalten

in Dropper Gold & Ultimate

Nutze alle Drops in unseren Flatrates oder wähle gezielt, was du brauchst.

Ressourcen

Typ	Ressource
Toolbox	Grundlagen zum Flex Menu - Toolbox #001
Let's Drops	Gerätespezifische Flex Menüs im Einsatz - #063 · #064
Wiki	Darstellungsfilter im Detail - Wiki
Demo & Video	Flex Menu live im Einsatz - Demoshop · Webinar auf YouTube
Dokumentation	Test, Lizenz & Doku - Store · Doku · JTL-Extension Store

Letzte Beiträge

News Kategorien