Expand Menu
Was ist ein Expand Menu?
Ein Expand Menu ist ein Bedienelement, das zusätzliche Navigationspunkte oder Inhalte nach einer Nutzeraktion einblendet und wieder ausblendet. Der geschlossene Zustand spart Platz, während der geöffnete Zustand untergeordnete Optionen sichtbar macht. Typische Einsatzorte sind mobile Navigationen, Seitenleisten, Filter, Kontomenüs und mehrstufige Website-Menüs.
Ein Expand Menu, auf Deutsch aufklappbares Menü, ordnet Inhalte hierarchisch: Zunächst ist nur die übergeordnete Kategorie sichtbar. Nach einem Klick oder einer Tastatureingabe erscheinen die zugehörigen Unterpunkte. Dadurch bleibt die Oberfläche übersichtlich, obwohl viele Navigationsziele verfügbar sind.
Wie funktioniert ein Expand Menu?
Ein Expand Menu besteht mindestens aus einem Steuerelement und einem zugeordneten Inhaltsbereich. Das Steuerelement öffnet oder schließt den Bereich, ohne dass dafür zwingend eine neue Seite geladen werden muss. Die technische Umsetzung erfolgt häufig mit HTML, CSS und JavaScript. Für einfache Strukturen können auch die HTML-Elemente details und summary verwendet werden.
Eine vollständige Menüfunktion benötigt klar definierte Zustände. Nutzer müssen erkennen können, ob weitere Einträge verfügbar sind und ob der betreffende Bereich gerade geöffnet oder geschlossen ist.
Expand Menu und Barrierefreiheit
Ein sichtbares Pfeilsymbol allein macht ein Expand Menu noch nicht barrierefrei. Screenreader müssen den Zustand des Menüs auslesen können, und Tastaturnutzer müssen das Steuerelement erreichen und betätigen können. Ein echtes button-Element besitzt dafür bereits geeignetes Tastaturverhalten und ist einer klickbaren Grafik oder einem div mit JavaScript vorzuziehen.
Das Attribut aria-expanded beschreibt den aktuellen Zustand. aria-expanded="false" kennzeichnet einen geschlossenen Bereich, während aria-expanded="true" einen geöffneten Bereich signalisiert. Mit aria-controls lässt sich zusätzlich angeben, welches Element der Button steuert. Der Wert muss sich bei jeder Zustandsänderung aktualisieren.
aria-expanded müssen immer denselben Zustand anzeigen. Prüfe außerdem, ob sich das Menü mit Tabulatortaste, Eingabetaste und Leertaste bedienen lässt. SEO-Relevanz eines Expand Menu
Der verbreitete Denkfehler lautet, dass Suchmaschinen Links in einem geschlossenen Expand Menu grundsätzlich ignorieren. Maßgeblich ist jedoch die technische Einbindung. Befinden sich die Links als reguläre HTML-Elemente im Quellcode oder im gerenderten DOM, können Suchmaschinen sie gewöhnlich erfassen. Werden Links erst nach einer Nutzeraktion von einem Server abgerufen, hängt ihre Auffindbarkeit von der JavaScript-Verarbeitung und weiteren internen Verweisen ab.
Ein Expand Menu beeinflusst außerdem die interne Linkstruktur. Wichtige Kategorien sollten über echte a-Elemente mit einer erreichbaren URL verlinkt sein. Reine Klickhandler ohne href sind kein gleichwertiger Ersatz für einen internen Link. Eine technische Prüfung gehört deshalb zur Onpage-Optimierung, besonders bei umfangreichen E-Commerce- und B2B-Websites.
Abgrenzung zu ähnlichen Menüs
Der Unterschied zwischen einem Expand Menu und einem Dropdown-Menü liegt vor allem in der Interaktion und Darstellung. Ein Expand Menu verändert den verfügbaren Platz innerhalb des Layouts, weil der zusätzliche Bereich aufgeklappt wird. Ein Dropdown liegt häufig über anderen Seitenelementen und wird oft durch Klick, Tastaturfokus oder Mausbewegung eingeblendet.
| Element | Typische Funktion | Darstellung |
|---|---|---|
| Expand Menu | Unterpunkte einer Navigation öffnen | Erweitert einen bestehenden Bereich |
| Dropdown-Menü | Optionen oder Navigationsziele anzeigen | Liegt häufig über dem Seiteninhalt |
| Accordion | Inhaltsabschnitte ein- und ausblenden | Meist vertikal innerhalb einer Seite |
| Mega Menu | Viele Kategorien gleichzeitig darstellen | Großflächiges Navigationsfeld mit mehreren Spalten |
| Hamburger-Menü | Gesamte Navigation auf kleinen Displays öffnen | Wird über ein Symbol mit drei Linien aktiviert |
Expand Menu richtig umsetzen
Ein gutes Expand Menu zeigt bereits im geschlossenen Zustand, welche Kategorie sich dahinter befindet. Bezeichnungen wie „Produkte“, „Leistungen“ oder „Branchen“ sind verständlicher als abstrakte Symbole. Das Pfeilsymbol ergänzt die Beschriftung, ersetzt sie aber nicht. Bei Touch-Geräten sollte die gesamte beschriftete Schaltfläche bedienbar sein und nicht nur das kleine Symbol.
Mehrere verschachtelte Ebenen erhöhen den Bedienaufwand. Nutzer müssen dann mehrere Bereiche öffnen, bevor sie ein Ziel erreichen. Für umfangreiche Navigationen kann ein Mega Menu verständlicher sein. Bei kleineren Menüs genügt oft eine Ebene mit wenigen, eindeutig benannten Unterpunkten. Die passende Struktur sollte Teil der Usability-Optimierung sein.
aria-expanded weiterhin den Wert false enthält. Prüfe jede Aktion mit Maus, Touchscreen, Tastatur und Screenreader, damit Darstellung und Auszeichnung übereinstimmen. Nutzung des Expand Menu messen
Messbar ist ein Expand Menu zum Beispiel über Ereignisse für Öffnen, Schließen und Klicks auf Unterpunkte. Setze die Zahl der Öffnungen ins Verhältnis zu den Seitenaufrufen und prüfe anschließend, welche Navigationsziele tatsächlich gewählt werden. Viele Öffnungen ohne nachfolgende Klicks können auf unklare Bezeichnungen, unerwartete Unterpunkte oder eine schwer bedienbare Darstellung hinweisen.
Technische Tests sollten zusätzlich kontrollieren, ob alle Links erreichbar, im gerenderten HTML vorhanden und auf Mobilgeräten nutzbar sind. Ein SEO-Check für Technik und Metadaten liefert dafür eine erste Bestandsaufnahme. Bei einer grundlegenden Überarbeitung sollten Navigation, Informationsarchitektur und mobile Bedienung gemeinsam im Webdesign-Konzept geplant werden.
Häufige Fragen zum Expand Menu
Ist ein Expand Menu nur für mobile Websites geeignet?
Nein. Ein Expand Menu kann auch auf Desktop-Websites eingesetzt werden, etwa in Seitenleisten, Produktfiltern oder Kontobereichen. Auf kleinen Displays ist die platzsparende Darstellung jedoch besonders nützlich.
Kann Google geschlossene Menüpunkte indexieren?
Google kann verlinkte Seiten erfassen, wenn die Links im HTML oder im gerenderten DOM vorhanden und crawlbar sind. Inhalte, die erst nach einer Interaktion extern geladen werden, benötigen zusätzliche erreichbare Verlinkungen.
Soll ein Expand Menu beim Laden geöffnet sein?
Der Ausgangszustand richtet sich nach der Aufgabe der Seite. Zentrale Navigationspunkte dürfen sichtbar geöffnet sein, während ergänzende Bereiche geschlossen starten können. Der Zustand sollte auf allen vergleichbaren Seiten konsistent sein.
Darf sich ein Expand Menu beim Darüberfahren öffnen?
Eine reine Steuerung über Mausbewegungen schließt Touchscreen- und Tastaturnutzer aus. Besser ist eine Bedienung per Klick oder Tastatur, wobei eine zusätzliche Mausreaktion möglich bleibt.
Kann ein Expand Menu mehrere Ebenen enthalten?
Mehrere Ebenen sind technisch möglich, erhöhen aber die Klicktiefe und erschweren die Orientierung. Bei vielen Kategorien ist eine neu strukturierte Navigation oder ein Mega Menu häufig übersichtlicher.
Muss ein Expand Menu JavaScript verwenden?
JavaScript ist nicht zwingend erforderlich. Einfache aufklappbare Bereiche lassen sich mit den HTML-Elementen details und summary umsetzen. Komplexe Navigationen benötigen häufig JavaScript für Zustandssteuerung, Animationen und Fokusmanagement.
Wenn du Navigation, Technik und Nutzerführung deiner Website gemeinsam prüfen lassen möchtest, bietet ein Potenzialcheck eine sachliche Grundlage für die nächsten Schritte.
Sie haben noch Fragen?
