Zum Inhalt

Flyout Navigation

Das Plugin „Flyout Navigation" ersetzt die klassische Shopware-Hauptnavigation durch eine moderne, mehrstufige Flyout-Navigation. Inklusive konfigurierbarer Trigger (Hover/Klick), Vollbreite- und Kompakt-Modus, Sticky Header, benutzerdefinierter Topbar, Mobile-Optimierung und einer umfangreichen Auswahl an Kategorie-Zusatzfeldern.

Hauptfunktionen

  • Mehrstufige Flyout-Navigation mit konfigurierbarer Ebenen-Tiefe (global oder pro Kategorie).
  • Vollbreite- oder Kompakt-Modus für das Dropdown.
  • Hover- oder Klick-Trigger – separat für Hauptmenü und Unterebenen.
  • Öffnungsrichtung steuerbar (links/rechts) pro Kategorie oder global ab dem 1.–5. Hauptmenüpunkt – mit automatischem Knick, wenn das Dropdown sonst aus dem Viewport laufen würde.
  • Sticky Header mit optionalem alternativen Logo und Topbar-Ausblendung.
  • Benutzerdefinierte Topbar mit bis zu 3 USP-/Kontakt-Items (URL, E-Mail, Telefon), Icon, Farbe und Ausrichtung.
  • „Alle Kategorien"-Menü für den Desktop, optional mit Burger-Icon.
  • Kategorie-Zusatzfelder: Dropdown deaktivieren, eigene Ebenen-Anzahl, Icon, Badge, aus Navigation ausblenden, Flyout-Bild und mehr.
  • Tastatur-Bedienung (ESC, Pfeiltasten) und korrekt gepflegte ARIA-Attribute – Baustein für BFSG-/WCAG-Konformität.
  • Schließen beim Scrollen, damit der Flyout nicht über dem Inhalt „klebt".

Voraussetzungen

  • Shopware 6 (>= 6.7.0 < 6.8.0)
  • Aktiviertes Storefront

Schnellstart

  1. Plugin im Shopware Admin unter Erweiterungen → Meine Erweiterungen hochladen und installieren.
  2. Plugin aktivieren.
  3. Storefront-Bundle aktualisieren / Theme kompilieren.
  4. Unter Erweiterungen → Meine Erweiterungen → Flyout Navigation → Konfigurieren den gewünschten Verkaufskanal auswählen und „Flyout Navigation für diesen Verkaufskanal aktivieren" einschalten.
  5. Weitere Einstellungen (Trigger, Vollbreite, Sticky Header, Topbar, Farben, …) bei Bedarf anpassen.

Eine Übersicht aller Konfigurationsfelder findest du in den Plugin-Einstellungen.

Dokumentation

Support

Bei Fragen oder Problemen wenden Sie sich bitte an: Web Labels Webdesign GmbH