HTML <menuitem>-Tag
Das HTML <menuitem>-Tag ist veraltet und aus allen Browsern entfernt. Erfahren Sie seine Geschichte und moderne Kontextmenü-Alternativen.
Das HTML-Tag <menuitem> ist veraltet und wurde aus allen großen Browsern entfernt — es hat keine Wirkung mehr, wenn Sie es auf einer Seite verwenden. Benutzen Sie es nicht. Dieses Kapitel erklärt, wozu es gedacht war, warum es entfernt wurde und welche modernen, vollständig unterstützten Methoden es zum Erstellen von Menüs gibt.
Als es spezifiziert wurde, repräsentierte <menuitem> einen einzelnen Befehl oder Menüeintrag, den ein Benutzer aus einem Popup-Menü aufrufen konnte, das mit dem Tag <menu> definiert wurde — typischerweise ein benutzerdefiniertes Rechtsklick-Kontextmenü oder ein Menü, das an eine Menüschaltfläche angehängt war.
Warum es entfernt wurde
<menuitem> und das zugehörige Attribut contextmenu für <menu type="context"> wurden nur in Firefox implementiert, in einigen Builds hinter einem Flag verborgen, und wurden nie in Chrome, Safari oder Edge eingeführt. Da kein anderer Browser es übernahm, war das Feature browserübergreifend nicht verlässlich nutzbar. Firefox entfernte schließlich seine Implementierung, und das Element wurde aus dem HTML Living Standard gestrichen. Da keinerlei Browser-Unterstützung mehr vorhanden ist, hat <menuitem> jetzt rein historische Bedeutung.
Syntax (veraltet — nicht funktionsfähig)
Das folgende Markup zeigt, wie <menuitem> früher geschrieben wurde: als verschachteltes Element innerhalb eines <menu>-Elements. Dieser Code hat in keinem aktuellen Browser eine Wirkung — er wird nur gezeigt, damit Sie ihn in alten Dokumenten erkennen können.
<!-- Legacy, non-functional. Do NOT use in new projects. -->
<menu type="context" id="popup">
<menuitem label="Ordered list"></menuitem>
<menuitem label="Unordered list"></menuitem>
<menuitem label="Menu"></menuitem>
</menu>Moderner Ersatz: ein benutzerdefiniertes Kontextmenü
Um heute ein Rechtsklick-Menü zu erstellen, hören Sie auf das Ereignis contextmenu, verhindern Sie das Standard-Menü des Browsers und zeigen Sie Ihr eigenes positioniertes <ul> (oder <div>) an. Verwenden Sie die WAI-ARIA-Menürollen für Barrierefreiheit: role="menu" am Container, role="menuitem" an jedem Eintrag, plus aria-checked für Umschalter und aria-disabled für nicht verfügbare Befehle.
<!DOCTYPE html>
<html>
<head>
<title>Custom context menu</title>
<style>
#menu {
position: absolute;
display: none;
margin: 0;
padding: 4px 0;
list-style: none;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font: 14px sans-serif;
}
#menu li {
padding: 6px 16px;
cursor: pointer;
}
#menu li:hover {
background: #0d6efd;
color: #fff;
}
#menu li[aria-disabled="true"] {
color: #999;
cursor: default;
}
</style>
</head>
<body>
<p>Right-click anywhere on this page.</p>
<ul id="menu" role="menu">
<li role="menuitem">Ordered list</li>
<li role="menuitem">Unordered list</li>
<li role="menuitemcheckbox" aria-checked="false">Show line numbers</li>
<li role="menuitem" aria-disabled="true">Print (unavailable)</li>
</ul>
<script>
const menu = document.getElementById("menu");
document.addEventListener("contextmenu", (e) => {
e.preventDefault();
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
menu.style.display = "block";
});
document.addEventListener("click", () => {
menu.style.display = "none";
});
menu.addEventListener("click", (e) => {
const item = e.target.closest('[role="menuitemcheckbox"]');
if (item) {
const checked = item.getAttribute("aria-checked") === "true";
item.setAttribute("aria-checked", String(!checked));
}
});
</script>
</body>
</html>Dieses Muster funktioniert in jedem modernen Browser und liegt vollständig unter Ihrer Kontrolle für Styling und Tastaturbehandlung.
Weitere moderne Optionen
<menu>-Element. Das Tag<menu>ist noch gültiges HTML, aber seine Bedeutung hat sich verengt: Es repräsentiert jetzt eine Symbolleiste (eine semantische Liste von Befehlen), die sich ähnlich wie<ul>verhält. Es erstellt keine nativen Kontextmenüs mehr.<details>und<summary>. Für ein einfaches Klick-zum-Öffnen-Aufklappfeld oder ein leichtes Dropdown ohne JavaScript verwenden Sie<details>mit einem<summary>-Label.
Attribute (alle veraltet)
| Attribut | Wert | Beschreibung |
|---|---|---|
| checked | checked | Legt fest, dass der Befehl / Menüeintrag beim Laden der Seite aktiviert sein muss (nur für type = "radio" und type = "checkbox"). |
| default | default | Markiert den Befehl/Menüeintrag als Standardbefehl. |
| disabled | disabled | Legt fest, dass der Befehl/Menüeintrag deaktiviert sein muss. |
| icon | icon | Definiert ein Symbol für den Menü-/Befehlseintrag. |
| label | text | Legt fest, dass der Befehl / Menüeintrag für den Benutzer angezeigt wird. Das Attribut ist erforderlich. |
| radiogroup | groupname | Definiert den Namen der gruppierten Befehle, die umgeschaltet werden, wenn der Befehl/Menüeintrag umgeschaltet wird. Wird nur für type = "radio" verwendet. |
| type | checkbox, command, radio | Definiert den Typ des Befehls/Menüeintrags. Der Standardwert ist command. |
Hinweis: Jedes der oben aufgeführten Attribute ist veraltet und wird von Browsern ignoriert, da das Element selbst nicht unterstützt wird. Die Tabelle dient nur als Referenz. Beim Portieren von altem Code ersetzen Sie diese Attribute durch ARIA-Entsprechungen in Ihrem benutzerdefinierten Menü:
checked/type="checkbox"/type="radio"→role="menuitemcheckbox"oderrole="menuitemradio"mitaria-checked.disabled→aria-disabled="true".label→ der sichtbare Textinhalt Ihres Menüeintrags.icon,default,radiogroup→ verwalten Sie diese selbst mit CSS und JavaScript.
Obwohl es nie eine Wirkung hatte, wurde <menuitem> als Unterstützung der Globalen Attribute und der Ereignis-Attribute dokumentiert.