SIDEBAR MENÜ by Tonino Gerns

SIDEBAR MENÜ ist ein Builder-Element für YOOtheme Pro 4 und 5 auf Joomla 5 und 6. Du ziehst es in eine Zeile, wählst eines deiner bestehenden Joomla-Menüs und bekommst eine mehrstufige Seitennavigation. Die Menüpunkte kommen über Joomlas eigenes mod_menu, Icons und Untertitel aus dem Menü-Editor des YOOtheme-Customizers, der aktive Pfad wird automatisch markiert. 34 Einstellungen stehen bereit, dazu ein Feld für eigenes CSS. Stylesheet und Skript laden nur auf Seiten, auf denen das Element steht.

Menüquelle und Ebenen

Du wählst das Menü aus einer Liste aller angelegten Joomla-Menüs. Standardmäßig richtet sich die Ausgabe nach dem aktuellen Menüpunkt, alternativ legst du ein Basis-Element fest, damit immer derselbe Zweig erscheint. Start- und End-Ebene lassen sich zwischen 1 und 10 setzen, eine leere End-Ebene zeigt alle Ebenen. Menüpunkte vom Typ Überschrift werden zu Gruppentiteln, Trennlinien zu einem Element mit role="separator".

Darstellung: drei Stile, Farben, Maße

Akzentlinie setzt einen farbigen Balken links neben den aktiven Punkt, Soft Pills hinterlegt ihn als abgerundete Fläche, Typo & Marker arbeitet mit Schriftgewicht und kurzem Strich. Vier Farbfelder decken Hintergrund, Akzent, Text und aktiven Text ab, letzteren getrennt, damit er auch auf hellem Panel lesbar bleibt. Dazu Eckenradius bis 40 Pixel, Schlagschatten in fünf UIkit-3-Stufen und eine Breite zwischen 180 und 480 Pixeln. Optional füllt die Sidebar die volle Zeilenhöhe, oben, mittig oder unten ausgerichtet.

Icon-Leiste und Off-Canvas

Am Desktop klappt die Sidebar auf eine Icon-Leiste zwischen 48 und 120 Pixeln zusammen. Sie kann eingeklappt starten, sich bei Maus-Hover oder Tastatur-Fokus vorübergehend öffnen oder pro Icon einen UIkit-Tooltip mit dem Menütitel links oder rechts zeigen. Den gewählten Zustand merkt sich das Element im localStorage, also ohne Cookie und ohne zusätzliche Consent-Abfrage. Unterhalb eines Breakpoints deiner Wahl wird die Sidebar zu einem Off-Canvas-Panel mit Hamburger- und Schließen-Button.

Untermenüs steuern

Entweder klappt der übergeordnete Link das Untermenü selbst auf, oder er navigiert normal und ein eigenes Umschalter-Icon übernimmt das Öffnen. Ausklapp- und Einklapp-Icon wählst du aus der UIkit-Icon-Bibliothek, dazu eine Animation: keine, Rotieren um 180 Grad oder Überblenden. Beim Seitenaufruf ist der aktive Pfad, alles oder nichts geöffnet, wahlweise auch mehrere Zweige gleichzeitig.

Barrierefreiheit nach BFSG

Navigation ist der erste Punkt, den eine Prüfung nach Barrierefreiheitsstärkungsgesetz (BFSG) und EN 301 549 anfasst. An diesen Stellen ist die Sidebar nach WCAG 2.1 AA gebaut: Sie liegt in einem nav-Landmark mit eigenem Namen, der aktive Punkt trägt aria-current="page", jeder Umschalter meldet aria-expanded und verweist per aria-controls auf die Liste, die er öffnet. Umschalter mit eigenem Icon sind echte Buttons mit ARIA-Label samt Menütitel. Der Fokusring ist über focus-visible sichtbar.