HTML menu – Toolbar oder Werkzeugleiste

Ursprünglich war das HTML menu-Element für Werkzeugleisten und Kontextmenüs vorgesehen, wurde jedoch als obsolet betrachtet. Aktuell wird <menu> als semantische Alternative zu <ul> beschrieben, wobei Browser es ähnlich wie <ul> behandeln und in der Barrierefreiheit ähnlich dargestellt wird. Heute wird das menu-Element eher als überflüssig eingestuft.

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

HTML menu

Ein menu-Element sollte 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 HTML menu – Kontextmenu
Typisches Menü, das dem Benutzer zeigt, welche Aktionen ihm aktuell zur Verfügung stehen.
<menu>
	<li>Neu laden</li>
	<li>Weitergeben</li>
	<li>Mitmachen</li>
</menu>
  • Neu laden
  • Weitergeben
  • Mitmachen
  • 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 menu 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.

    <nav>
    	<menu>
    		<li>Neu laden</li>
    		<li>Weitergeben</li>
    		<li>Mitmachen</li>
    	</menu>
    </nav>	
    
    nav menu li {
    	border-block: 1px solid silver;
    	border-left: 1px solid silver;
    	padding: 6px;
    	font: menu;
    	cursor: context-menu;
    }
    
    nav menu li:last-child {
    	border-right: 1px solid silver;
    }
    

    menu type: context, toolbar, list

    Eine Reihe von Optionen für das menu-Element war geplant, aber wurde nie umgesetzt, und gilt heute als deprecated (veraltet).

    Was bleibt ist die CSS-Eigenschaft font: menu, mit der die Inhalte der list-Elemente in einer kleineren Schrift gesetzt werden.

    CSS cursor: context-menu verleiht den menu-Elementen ein Menü-Symbol beim Hovern.

    Suchen auf mediaevent.de