Dropdown Navigation Plugin

Zum Plugin

Das DmfDropdownNavigation Plugin ersetzt die Standard-Navigationsleiste in Shopware 6 durch eine barrierefreie Dropdown-Navigation. Mit vollständiger Tastaturunterstützung und anpassbaren Farben bietet es eine verbesserte Benutzererfahrung.

Inhalt dieser Seite:

• Voraussetzungen
• Installation
• Features
• Konfiguration
  • Hervorhebung der ersten Kategorie
• Barrierefreiheit
  • Tastaturnavigation
  • ARIA-Attribute
• Verwendung
  • Standard-Konfiguration
  • Farbschema anpassen
  • Beispiel-Farbkonfigurationen
• Technische Details
  • CSS Custom Properties
  • JavaScript-Funktionen
• Troubleshooting
  • Navigation wird nicht angezeigt
  • Farben werden nicht übernommen
  • Tastaturnavigation funktioniert nicht

---

Voraussetzungen

• Shopware 6.7.0 oder höher
• PHP 8.2 oder höher

Installation

composer require dmf/plugin-dropdown-navigation
bin/console plugin:install --activate DmfDropdownNavigation
bin/console cache:clear

---

Features

• Barrierefreie Navigation: Vollständige Tastaturnavigation (WCAG 2.1 konform)
• Dropdown-Menüs: Übersichtliche Unterkategorien-Darstellung
• Farbkonfiguration: Alle Farben über das Admin-Panel anpassbar
• Hervorgehobene Kategorie: Erste Kategorie kann visuell hervorgehoben werden
• Responsive: Optimiert für alle Bildschirmgrößen

---

Konfiguration

Pfad: Einstellungen → System → Plugins → Dropdown Navigation → Konfiguration

Option	Typ	Standard	Beschreibung
highlightFirstCategory	Select	lighten	Hervorhebung der ersten Kategorie
navBgColor	Colorpicker	#0B1845	Hintergrundfarbe der Navigationsleiste
navLinkColor	Colorpicker	#FFFFFF	Textfarbe der Links
navLinkBgHover	Colorpicker	#215AFF	Hintergrundfarbe beim Hover
navLinkHoverColor	Colorpicker	#FFFFFF	Textfarbe beim Hover

Hervorhebung der ersten Kategorie

Wert	Beschreibung
lighten	Erste Kategorie wird heller dargestellt
darken	Erste Kategorie wird dunkler dargestellt
noHighlight	Keine Hervorhebung

---

Barrierefreiheit

Das Plugin wurde mit Fokus auf Barrierefreiheit entwickelt und erfüllt die WCAG 2.1 Richtlinien.

Tastaturnavigation

Taste	Aktion
Tab	Zum nächsten Navigationselement wechseln
Shift + Tab	Zum vorherigen Element wechseln
Enter / Space	Dropdown öffnen / Link aktivieren
Escape	Dropdown schließen
Pfeiltasten	Navigation innerhalb des Dropdowns

ARIA-Attribute

Die Navigation verwendet semantische ARIA-Attribute für Screenreader:

• aria-haspopup="true" für Elemente mit Untermenü
• aria-expanded zeigt den Dropdown-Status an
• aria-current="page" markiert die aktuelle Seite
• role="menubar" und role="menu" für die Menüstruktur

---

Verwendung

Standard-Konfiguration

Nach der Installation erscheint die Dropdown-Navigation automatisch anstelle der Standard-Navigation. Die Standardfarben (dunkelblauer Hintergrund, weiße Schrift) können über die Plugin-Konfiguration angepasst werden.

Farbschema anpassen

1. Öffne Einstellungen → System → Plugins
2. Klicke auf das Zahnrad bei Dropdown Navigation
3. Passe die Farben an dein Shop-Design an:
   • Hintergrundfarbe: Sollte zum Header passen
   • Textfarbe: Muss ausreichenden Kontrast bieten (WCAG AA: 4.5:1)
   • Hover-Farben: Visuelles Feedback für Interaktion

Beispiel-Farbkonfigurationen

Dunkles Theme (Standard):

Hintergrund:     #0B1845
Textfarbe:       #FFFFFF
Hover-Hintergrund: #215AFF
Hover-Textfarbe: #FFFFFF

Helles Theme:

Hintergrund:     #F8F9FA
Textfarbe:       #212529
Hover-Hintergrund: #E9ECEF
Hover-Textfarbe: #000000

---

Technische Details

CSS Custom Properties

Das Plugin verwendet CSS Custom Properties, die über die Konfiguration gesetzt werden:

:root {
    --dmf-nav-bg-color: #0B1845;
    --dmf-nav-link-color: #FFFFFF;
    --dmf-nav-link-bg-hover: #215AFF;
    --dmf-nav-link-hover-color: #FFFFFF;
}

JavaScript-Funktionen

Die Navigation verwendet vanilla JavaScript für:

• Dropdown-Öffnen/Schließen
• Tastaturnavigation
• Touch-Events für mobile Geräte
• Focus-Management

---

Troubleshooting

Navigation wird nicht angezeigt

1. Prüfe, ob das Plugin aktiviert ist
2. Leere den Cache: bin/console cache:clear
3. Kompiliere das Theme neu: bin/console theme:compile

Farben werden nicht übernommen

1. Speichere die Konfiguration erneut
2. Leere den Cache
3. Prüfe die Browser-Entwicklertools auf CSS-Konflikte

Tastaturnavigation funktioniert nicht

1. Stelle sicher, dass kein anderes JavaScript die Events blockiert
2. Prüfe die Browser-Konsole auf Fehler