Dein Warenkorb ist leer

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.

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 Drops auch als Portlets 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