WordPress Menü bearbeiten

Eine gute Navigation führt Nutzer ohne Umwege zu relevanten Inhalten, stärkt Orientierung und verringert Abbrüche. Entscheidend sind klare Bezeichnungen, eine flache und logisch priorisierte Struktur sowie zuverlässiges Verhalten auf allen Geräten. Planen Sie das Menü als Teil Ihrer Informationsarchitektur, nicht als reines Designelement. Prüfen Sie Bedienbarkeit mit Tastatur ebenso wie die mobile Darstellung und dokumentieren Sie Änderungen für ein konsistentes Ergebnis im Team. So bleibt Ihre Navigation stabil, ausbaufähig und für Nutzer wie Suchmaschinen nachvollziehbar.

So bearbeiten Sie das WordPress Menü

Jeder Schritt beschreibt den Ablauf im klassischen Bereich, im Site Editor mit Navigation Block und in Elementor. So setzen Sie Änderungen konsistent um und vermeiden doppelte Arbeit.

1. Menü öffnen und auswählen

Im klassischen Bereich öffnen Sie im Dashboard den Punkt Design und dann Menüs. Wählen Sie ein vorhandenes Menü oder erstellen Sie ein neues, vergeben Sie einen eindeutigen Namen und speichern Sie.

Im Site Editor öffnen Sie die Website Bearbeitung, wählen die Kopfzeile und fügen den Navigation Block ein oder wählen ein bestehendes Menü aus der Listenansicht.

In Elementor öffnen Sie den Theme Builder, laden die Header Vorlage und wählen im Nav Menu Widget als Quelle das WordPress Menü, das Sie im Dashboard pflegen.

2. WordPress Menüpunkte erstellen

Im klassischen Bereich wählen Sie in der linken Spalte die Registerkarte Seiten, markieren die gewünschten Seiten und fügen sie dem Menü hinzu. Danach passen Sie bei Bedarf das sichtbare Label an, damit Beschriftungen kurz und eindeutig sind.

Im Site Editor legen Sie Menüpunkte direkt im Navigation Block an oder importieren ein klassisches Menü und bearbeiten die Einträge in der Listenansicht. Beschriftungen können Sie inline anpassen.

In Elementor erstellen Sie Menüpunkte nicht im Widget, sondern im zugewiesenen WordPress Menü. Öffnen Sie das Menü im Dashboard, fügen Sie die Seiten hinzu und speichern Sie. Das Nav Menu Widget übernimmt die Struktur automatisch.

3. Menüpunkte anordnen

Im klassischen Bereich ordnen Sie die Reihenfolge per Ziehen und Ablegen. Platzieren Sie wichtige Seiten vorn und gruppieren Sie verwandte Themen.

Im Site Editor nutzen Sie die Listenansicht des Navigation Blocks. Ziehen Sie Einträge an die gewünschte Position und prüfen Sie die Reihenfolge in der Vorschau.

In Elementor steuern Sie die Reihenfolge indirekt über das WordPress Menü. Passen Sie die Reihenfolge im Dashboard an und aktualisieren Sie die Vorschau des Headers im Builder.

4. Unterpunkte einrichten

Im klassischen Bereich rücken Sie einen Eintrag leicht nach rechts ein. Dadurch entsteht ein Unterpunkt im Dropdown. Halten Sie die Tiefe klein. Zwei Ebenen sind in der Praxis gut beherrschbar.

Im Site Editor erzeugen Sie Unterpunkte durch Einrücken in der Listenansicht des Navigation Blocks. Prüfen Sie anschließend das Öffnen und Schließen in der Vorschau und testen Sie die Bedienbarkeit per Tastatur.

In Elementor erscheinen Unterpunkte automatisch, sobald im WordPress Menü eine verschachtelte Struktur vorliegt. Legen Sie den Breakpoint und das Verhalten des Toggles im Nav Menu Widget fest und testen Sie die Darstellung auf kleinen Geräten.

5. Menüeinträge löschen

Im klassischen Bereich klappen Sie den betreffenden Eintrag auf und entfernen ihn. Die zugrunde liegende Seite bleibt erhalten, nur der Link im Menü verschwindet.

Im Site Editor löschen Sie Einträge direkt im Navigation Block. Veröffentlichen Sie erst, wenn die Struktur stimmt, und prüfen Sie die Ausgabe im Frontend.

In Elementor entfernen Sie Menüeinträge im WordPress Menü des Dashboards. Das Widget aktualisiert sich anschließend. Leeren Sie gegebenenfalls Caches, damit die Änderung sichtbar wird.

6. Individuelle Links hinzufügen

Im klassischen Bereich nutzen Sie die Registerkarte Benutzerdefinierte Links. Tragen Sie die Zieladresse ein, zum Beispiel eine externe URL, einen Sprunganker mit Raute, eine Telefonnummer mit tel oder eine E Mail Adresse mit mailto. Vergeben Sie eine klare Beschriftung und speichern Sie.

Im Site Editor fügen Sie im Navigation Block ebenfalls individuelle Links hinzu und benennen die Beschriftung verständlich. Prüfen Sie, ob externe Ziele in einem neuen Tab geöffnet werden sollen.

In Elementor verknüpfen Sie das Widget mit dem WordPress Menü. Individuelle Links legen Sie daher im Menü des Dashboards an und prüfen anschließend im Header die Darstellung.

Struktur und Praxisregeln

Ordnen Sie zuerst die wichtigsten Seiten nach Nutzerzielen. Leistungen, Referenzen und Kontakt stehen oft oben. Vermeiden Sie doppelte Ziele, die denselben Inhalt erreichen. Halten Sie die Tiefe gering. Zwei Ebenen lassen sich in den meisten Projekten gut pflegen. Verwenden Sie klare, verständliche Labels ohne Fachjargon. Auf Shopseiten trennen Sie Kategorien und Servicepunkte wie Versand, Zahlung und Retoure. Auf Wissensseiten ordnen Sie Rubriken so, dass Leser von Einstiegsinhalten in vertiefende Bereiche geführt werden. Denken Sie Navigation, interne Verlinkung und Sitemap zusammen. So entsteht ein eindeutiges Orientierungssystem.

Barrierefreiheit im Menü

Um den Grundlagen der Barrierefreiheit im Menü zu genügen, muss jede Menüfunktion vollständig per Tastatur erreichbar und bedienbar sein, inklusive aller Untermenüs. Die Tab Taste führt logisch durch alle Bereiche, Untermenüs lassen sich mit Enter oder Leertaste öffnen, der sichtbare Fokus markiert den aktuellen Interaktionspunkt eindeutig.

Nur wenn Fokus, Zustände und Rückmeldungen konsistent sind, finden Nutzer ohne Maus verlässlich den Weg. Der aktuell aufgerufene Menüpunkt wird üblicherweise visuell hervorgehoben, dafür existiert keine spezielle CSS Pseudoklasse. Üblich ist eine eigene Klasse wie current oder das Attribut aria current gleich page. Untermenüs benötigen einen klaren Zustand offen oder geschlossen, damit Bedienung und Screenreader Rückmeldung übereinstimmen. Sichtbare Fokuszustände und eine nachvollziehbare Tab Reihenfolge sichern die Zugänglichkeit und verringern Fehlbedienungen.

Setzen Sie die Grundlagen konsequent um und prüfen Sie sie selbst im Anschluss. Nutzen Sie ARIA Attribute gezielt, um Bedeutungen und Zustände zu vermitteln. Pflegen Sie sichtbare Labels und klare Beschriftungen, damit Ziele bereits im Menü verstanden werden. Ergänzen Sie Skip Links an prominenter Stelle, damit der Hauptinhalt ohne Umwege erreichbar ist. Begrenzen Sie die Navigation auf höchstens drei Ebenen und prüfen Sie die Reihenfolge mit Tab und Shift Tab, inklusive Öffnen und Schließen von Untermenüs. Führen Sie vor der Freigabe einen Gerätecheck durch, testen Sie sowohl Tastatur als auch Screenreader.

Mobilmenü

Richten Sie ein Mobilmenü ein, das schnell erfassbar ist, zuverlässig aufklappt und konsistent mit Ihrer Desktop-Navigation bleibt. Ziel sind klare Labels, kurze Wege und eine stabile Bedienung ohne Layoutsprünge.

Nutzer erwarten auf kleinen Displays eine reduzierte, eindeutig beschriftete Navigation. Ein sauber zugewiesenes Mobilmenü mit passendem Breakpoint und gut erkennbarem Toggle verbessert die Orientierung, senkt Fehlklicks und verhindert Widersprüche zwischen Desktop- und Mobilansicht. Konsistenz und Bedienbarkeit sind hier wichtiger als grafische Effekte.

Öffnen Sie das Backend und weisen Sie die mobile Menüposition zu. Viele Themes bieten dafür eine eigene Position in den Menü- oder Theme-Einstellungen. Entscheiden Sie, ob das Hauptmenü wiederverwendet wird oder ob Sie ein eigenes Mobilmenü anlegen. Halten Sie die Hauptpunkte schlank und beschränken Sie sich auf fünf bis sieben Einträge. Passen Sie die Beschriftungen an, damit sie auf kleinen Displays eindeutig bleiben. Legen Sie einen sinnvollen Breakpoint fest, an dem die Navigation zuverlässig auf das mobile Muster umschaltet, und testen Sie auf gängigen Geräten. Das Toggle-Element muss klar erkennbar sein und seinen Zustand eindeutig vermitteln. Wenn Desktop und Mobil zwei getrennte Menüs nutzen, ziehen Sie jede Änderung in beiden Menüs nach, damit Reihenfolge, Benennungen und Zielseiten übereinstimmen. Führen Sie einen Tastaturtest durch und achten Sie auf ausreichend große Klickflächen sowie genügend Abstand zwischen den Elementen.