HTML menu – Toolbar oder Werkzeugleiste

Gutenberg Menu als Beispiel für ein kontextsensitives Menü / Toolbar

Das menu-Element ist eine Alternative zu ul-Element und steht für eine Werkzeugleiste oder Toolbar mit Anweisungen oder Werkzeugen für den Benutzer. Auf der technischen Ebene besteht das menu-Element aus einer Reihe von Listenpunkten li.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

HTML menu

Ein menu-Element soll nicht wie die Elemente eines Navigationsmenüs (nav) auf andere Seiten führen, sondern den Benutzer durch Aufgaben führen, – ähnlich den kontext-sensitiven Menüs von Desktop-Anwendungen (wo kontext-sensitive Menüs mit der rechten Maustaste geöffnet werden)

Beispiel Kontextmenu
Typisches Kontextmenu, das dem Benutzer zeigt, welche Aktionen ihm aktuell zur Verfügung stehen.
<menu>
	<li><button onclick="load()">Neu laden</button></li>
	<li><button onclick="pass()">Weitergeben</button></li>
	<li><button onclick="join()">Mitmachen</button></li>
</menu>

Ohne CSS sieht ein HTML menu nicht anders eine ungeordnete Liste ul mit Listenpunkten li aus.

  • menu gehört zu den Wiedergängern unter den HTML-Elementen, die kommen und gehen. Raus aus HTML 4, wieder rein in HTML 5.1. Eine wackelige Sache, würde ich mal sagen, und das HTML menü weiterhin als experimentell bezeichnen.

    Auf der anderen Seite ist ein menu-Element eine schöne Ergänzung und Abgrenzung zum ul, das oft für Navigationsleisten verwendet wird: Weniger Kollisionen im CSS und eine Verbesserung der Struktur.