HTMLMenuElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLMenuElement extends HTMLElement

Beschreibung

Die Schnittstelle HTMLMenuElement steht für jedes <menu>-Element im Dokument. Laut aktuellem HTML-Standard ist <menu> eine semantische Alternative zu <ul>. Das Element ist eine ungeordnete Liste aus <li>-Einträgen, die meist interaktive Befehle enthalten, zum Beispiel die Schaltflächen einer Werkzeugleiste. Browser stellen <menu> wie <ul> dar und die Barrierefreiheits-Schnittstellen melden es in der Regel als Liste (list).

Über die von HTMLElement geerbten Eigenschaften und Methoden hinaus bietet die Schnittstelle nur eine eigene Eigenschaft: compact. Sie ist veraltet und spiegelt das gleichnamige HTML-Attribut als Boolean wider. Früher gab es auch type und label für Kontext- und Popup-Menüs. Diese Eigenschaften wurden zusammen mit dem Elementtyp <menuitem> aus dem Standard entfernt.

In der Praxis erzeugt man ein HTMLMenuElement mit document.createElement('menu') oder holt es über querySelector(). Danach bearbeitet man es wie jedes andere Listenelement. Einen eigenen Konstruktor (new HTMLMenuElement()) kann man nicht direkt aufrufen, denn er löst einen TypeError aus.

Parameter

Name	Typ	Default	Beschreibung
$compact	boolean	false	Veraltet. Spiegelt das Attribut `compact` wider, das früher eine kompaktere Darstellung anfordern sollte. Aktuelle Browser ignorieren es bei der Darstellung. Verwende stattdessen CSS.

Rückgabewert

Typ

HTMLMenuElement

Beschreibung

Eine Instanz entsteht über document.createElement('menu') oder durch Abfrage eines vorhandenen <menu>-Elements im DOM.

Beispiele

Menü-Element erzeugen und Typ prüfen

const menu = document.createElement('menu');
console.log(menu instanceof HTMLMenuElement);
console.log(menu instanceof HTMLElement);
console.log(menu.tagName);

true true MENU

Werkzeugleiste dynamisch aufbauen

const actions = [
  { label: 'Kopieren', run: () => console.log('Kopiert') },
  { label: 'Einfügen', run: () => console.log('Eingefügt') },
  { label: 'Löschen', run: () => console.log('Gelöscht') }
];

const toolbar = document.createElement('menu');
toolbar.setAttribute('aria-label', 'Bearbeiten');

for (const { label, run } of actions) {
  const li = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = label;
  button.addEventListener('click', run);
  li.append(button);
  toolbar.append(li);
}

document.body.append(toolbar);
console.log(toolbar.children.length);

3

Vorhandenes Menü auslesen und veraltete Eigenschaft compact

// HTML: <menu id="tools" compact><li><button>Speichern</button></li></menu>
const tools = document.querySelector('#tools');

console.log(tools.compact);
tools.compact = false; // entfernt das Attribut
console.log(tools.hasAttribute('compact'));

const labels = [...tools.querySelectorAll('button')].map((b) => b.textContent);
console.log(labels);

true false ["Speichern"]

// Wichtig · Fallstricke

Kein Kontextmenü mehr: Die früher geplanten Eigenschaften type ("context"/"toolbar") und label sowie das Element <menuitem> und das Attribut contextmenu wurden aus dem Standard entfernt. Nur Firefox hat sie eine Zeit lang unterstützt. Verlasse dich nicht darauf.
Die Eigenschaft compact ist veraltet und hat in aktuellen Browsern keine sichtbare Wirkung. Steuere Abstände und Darstellung per CSS.
Barrierefreiheit: <menu> bekommt nicht automatisch die ARIA-Rolle menu. Wenn du ein echtes Anwendungsmenü mit Pfeiltasten-Navigation brauchst, setze role="menu"/role="menuitem" und die nötige Tastatursteuerung selbst um. Sonst reicht die Listensemantik.
new HTMLMenuElement() löst einen TypeError aus (Illegal constructor). Verwende document.createElement('menu').
Browser-Unterstützung: Die Schnittstelle ist in allen modernen Browsern verfügbar (Baseline).

Siehe auch

CSSPseudoElement HTMLMeterElement HTMLMetaElement HTMLFontElement HTMLHeadElement