Vertical Sidebar Navigation

Vertical Sidebar Navigation verwandelt den WordPress-Navigations-Block per Block-Stil in eine vertikale, hierarchische Sidebar. Diese Anleitung führt durch Installation, Anwendung im Editor und Anpassung über CSS-Variablen.

Was das Plugin macht

Vertical Sidebar Navigation ergänzt den WordPress-Navigations-Block um zwei zusätzliche Block-Stile: „Vertical Sidebar” und „Vertical Sidebar (Accordion)”. Wird einer davon auf einen Navigations-Block angewendet, entsteht daraus eine vertikale, hierarchische Sidebar. Angelehnt am Navigationsbereich des make.wordpress.org/training/handbook oder der Navigation in luethi.info.

Das Plugin bringt keine eigene Menüverwaltung mit. Das Menü wird weiterhin mit dem normalen Navigations-Block gebaut; das Plugin liefert nur Darstellung und Verhalten. Es gibt keinen eigenen Block und keine zusätzlichen Schalter im Editor, nur den auswählbaren Stil.

Die beiden Stile sehen identisch aus und unterscheiden sich nur im Verhalten: Im Accordion-Modus bleibt pro Ebene nur ein Untermenü offen, im Standard-Modus dürfen mehrere gleichzeitig offen sein.

Voraussetzungen

• WordPress 6.5 oder neuer
• PHP 7.4 oder neuer
• Ein Block-Theme (FSE), z. B. Twenty Twenty-Three, -Four, -Five oder ein anderes Block-Theme. Klassische Themes werden bewusst nicht unterstützt; auf ihnen verweigert das Plugin die Aktivierung.

Installation

Das Plugin wird über das GitHub-Repository bezogen: github.com/rfluethi/vertical-sidebar-navigation.

1. Im Repository den Bereich „Releases” öffnen (rechts in der Seitenleiste oder über den gleichnamigen Reiter).
2. Beim obersten, also neuesten Release unter „Assets” die ZIP-Datei des Plugins herunterladen.
3. Im WordPress-Admin unter Plugins → Installieren → Plugin hochladen die heruntergeladene ZIP auswählen, installieren und aktivieren.

Block-Stil anwenden

1. Den Site-Editor oder den Template-Part öffnen, in dem die Navigation liegt.
2. Den Navigations-Block auswählen.
3. Im rechten Bedienfeld unter Stile stehen jetzt „Vertical Sidebar” und „Vertical Sidebar (Accordion)” bereit.
4. Den gewünschten Stil wählen. Der Block übernimmt sofort die vertikale Darstellung.
5. Wichtig: Im Tab Einstellungen die Untermenü-Sichtbarkeit festlegen (siehe nächster Abschnitt).

Klicken oder Mauszeigerkontakt: der entscheidende Schalter

Damit Untermenüs interaktiv auf- und zuklappen, muss am Navigations-Block die Untermenü-Sichtbarkeit auf „Klicken” stehen (in älteren WordPress-Versionen: Schalter „Untermenüs bei Klick öffnen”).

• „Klicken”: Eltern-Einträge werden zu Buttons, mehrere Untermenüs bleiben gleichzeitig offen. Der Preis ist reines WordPress-Standardverhalten: Ein Eltern-Button navigiert nicht mehr; hat ein Elternpunkt eine eigene Seite, ist diese aus dem Menü nicht direkt erreichbar.
• „Bei Mauszeigerkontakt”: Eltern bleiben echte Links (Seite erreichbar), aber per Klick klappt nichts auf. Sichtbar ist nur der automatisch geöffnete Pfad zur aktuellen Seite.

Faustregel: Elternpunkte mit eigener Inhaltsseite passen zu „Bei Mauszeigerkontakt”, reine Überschriften zu „Klicken”. Sind beide gewünscht, wird die Elternseite zusätzlich als erster Unterpunkt verlinkt („Übersicht”).

Hinweis zur Editor-Vorschau: Im Editor ist die Navigation absichtlich nicht interaktiv: Untermenüs öffnen nicht auf Klick, der Auto-Open-Pfad und der Mobile-Burger erscheinen nicht. Die volle Interaktivität zeigt sich erst im veröffentlichten Frontend.

Überschrift ohne eigene Seite (Eltern-Eintrag als Button)

Manchmal soll ein Elternpunkt nur eine Gruppe von Unterseiten überschreiben, ohne selbst eine eigene Seite zu sein. Dafür gibt es in WordPress keinen eigenen „Button-Menüpunkt”. Ob ein Elternpunkt als Button oder als Link erscheint, steuert allein die Untermenü-Sichtbarkeit (siehe oben). Steht sie auf „Klicken”, wird jeder Elternpunkt mit Unterpunkten automatisch zu einem echten, tastaturbedienbaren Button.

So entsteht eine solche Überschrift:

1. Am Navigations-Block die Untermenü-Sichtbarkeit auf „Klicken” stellen (gilt für den ganzen Block).
2. Den Überschrift-Eintrag als „Individueller Link” hinzufügen: auf + klicken, „Individueller Link” wählen, den Text eingeben (z. B. „Dokumentation”) und als URL # setzen.
3. Die echten Seiten über die Listenansicht als Unterpunkte unter den Eintrag ziehen.
4. Speichern. Im Frontend ist die Überschrift ein echter <button>: per Maus, Leertaste und Enter bedienbar und mit aria-expanded für Screenreader. Die URL # wird ignoriert, weil ein Button-Toggle nicht navigiert, es entsteht also kein toter Link.

Das ist zugleich der barrierefreie Weg: Ein Aufklapp-Element soll ein Button sein, kein Link. Soll in derselben Navigation ein Elternpunkt doch eine eigene Seite behalten, wird diese zusätzlich als erster Unterpunkt verlinkt („Übersicht”), da „Klicken” für den ganzen Block gilt.

Layout: Navigation als Spalte

Das Plugin liefert nur den Stil, nicht das umgebende Layout. Damit die Navigation als Spalte links neben dem Inhalt steht, wird im Theme ein Spalten-Block benötigt.

Im Site-Editor das gewünschte Template öffnen und einen Spalten-Block mit zwei Spalten einfügen. Die linke Spalte schmal halten (etwa 260 px) und dort den Navigations-Block mit dem Stil „Vertical Sidebar” platzieren; in die rechte, breitere Spalte kommt der eigentliche Seiteninhalt. So steht die Sidebar dauerhaft links neben dem Inhalt.

Farben und Anpassung

Text- und Hintergrundfarbe kommen direkt vom Navigations-Block und werden wie bei jedem Block unter Farben gesetzt. Das Plugin überschreibt sie nicht.

Hover- und Aktiv-Farbe sowie Abstände werden über --vsn-*-CSS-Variablen gesteuert, am einfachsten über Site-Editor → Stile → Optionen (⋮) → Zusätzliches CSS:

:is(.is-style-vsn-sidebar, .is-style-vsn-sidebar-accordion) {
  --vsn-color-text-hover: var(--wp--preset--color--accent); /* Hover */
  --vsn-color-active: var(--wp--preset--color--accent);     /* aktive Seite farbig (optional) */
  --vsn-active-border-color: var(--wp--preset--color--accent); /* Aktiv-Balken */
}

Statt der Theme-Palette gehen auch Hex-Werte wie #c0651d. Die doppelte :is()-Nennung deckt beide Stile (Standard und Accordion) ab.

Übersicht der Variablen

Aktive Seite

Die aktuelle Seite wird theme-unabhängig markiert: Sie behält die Blockfarbe, bekommt aber Fettschrift plus einen schmalen Balken links, in der Textfarbe (currentcolor), damit er auf jeder Palette gleich klar wirkt. Soll sie zusätzlich farbig hervorgehoben werden, wird --vsn-color-active auf eine kontrastreiche Palettenfarbe gesetzt. Den Balken ganz abschalten: --vsn-active-border-width: 0.

Mobile Ansicht

Unterhalb von 782px klappt die Navigation zu einem Burger-Button zusammen, der das Menü an Ort und Stelle nach unten ausklappt, ohne Overlay und ohne gesperrtes Scrollen. Der Breakpoint ist im Plugin festgelegt und nicht über eine Variable einstellbar.

Troubleshooting

Aktualisieren und Deinstallieren

Updates laufen wie bei jedem WordPress-Plugin, also über eine neuere ZIP aus den GitHub-Releases. Das Plugin speichert keine Daten in der Datenbank. Die Deinstallation über Plugins → Deaktivieren → Löschen ist also vollständig sauber, und es gehen keine Einstellungen verloren (es gibt keine, alles ist Theme-seitig).

Vertical Sidebar Navigation wird von Rico F. Lüthi entwickelt (luethi.info); der vollständige Quellcode steht im GitHub-Repository bereit.

Artikel

Aufräumen, das aus dem Ruder lief

Frühjahrsputz im Theme: Wie aus einer chaotischen function.php und jahrelangem Ärger mit der WordPress-Navigation das bewusst minimalistische Plugin Vertical Sidebar Navigation entstand.