HTML `<menu>`-Tag

Das <menu>-Tag definiert eine Liste von Befehlen oder Menüelementen. Historisch wurde es zum Erstellen von Kontextmenüs, Symbolleisten und zur Auflistung von Formularsteuerelementen verwendet.

Ein Kontextmenü bestand historisch aus einem <menu>-Element, das für jede auswählbare Option <menuitem>-Elemente sowie <hr>-Elemente enthielt, die den Menüinhalt mithilfe von Trennlinien in Abschnitte unterteilten. Diese Funktionen wurden jedoch aus der HTML-Spezifikation entfernt.

Ein Symbolleisten-Menü verwendet ein <menu>-Element. Sein Inhalt kann auf zwei Arten strukturiert werden:

Es kann eine ungeordnete Liste von Elementen enthalten, die durch das HTML <li>-Element dargestellt werden.
Es kann Flussinhalt enthalten, der die zugänglichen Optionen und Befehle beschreibt.

DANGER

Das <menu>-Tag gilt als veraltet, und das <menuitem>-Tag wurde vollständig aus der HTML-Spezifikation entfernt. Die Unterstützung für Kontextmenüs und Symbolleisten über diese Tags wurde in allen wichtigen Browsern weitgehend entfernt. Verwenden Sie für moderne Kontextmenüs CSS und JavaScript. Verwenden Sie für Standardlisten stattdessen das <ul>-Element.

Syntax

Das <menu>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<menu>) und dem schließenden (</menu>)-Tag geschrieben.

Beispiel für das HTML `<menu>`-Tag mit `<li>`-Elementen:

Beispiel für das HTML <menu>-Tag

Hinweis: Moderne Browser rendern <menu> standardmäßig nicht als Liste, daher werden display: block und list-style: none verwendet, um das Standard-Styling zurückzusetzen.

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      menu {
        display: block;
        list-style: none;
        padding: 0;
      }
      menu li {
        display: block;
        padding: 5px;
        border: 1px solid #ccc;
        margin-bottom: 2px;
      }
    </style>
  </head>
  <body>
    <menu>
      <li>ol - ordered list</li>
      <li>ul - unordered list</li>
      <li>menu - menu list</li>
    </menu>
  </body>
</html>

Try it Yourself »

Ergebnis

Beispiel für das HTML `<menu>`-Tag zum Erstellen eines Symbolleisten-Menüs:

HTML <menu>-Tag in modernen Browsern

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      menu {
        display: flex;
        gap: 10px;
        padding: 10px;
        background: #f0f0f0;
        border: 1px solid #ccc;
      }
      menu li {
        list-style: none;
        padding: 8px 12px;
        background: #1c87c9;
        color: #fff;
        cursor: pointer;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <menu>
      <li onclick="alert('Refresh')">Refresh</li>
      <li onclick="alert('Share')">Share</li>
      <li onclick="alert('Email')">Email</li>
    </menu>
  </body>
</html>

Try it Yourself »

Der Unterschied zwischen den `<menu>`- und `<ul>`-Tags

Diese beiden Elemente haben ein ähnliches Verhalten. Sowohl das <menu>- als auch das <ul>-Element werden verwendet, um ungeordnete Listen zu erstellen. Der Hauptunterschied besteht darin, dass das <menu>-Tag speziell für Befehle, Symbolleisten und Kontextmenüs entwickelt wurde, während das <ul>-Tag für allgemeine ungeordnete Listen verwendet wird.

Attribute

Attribut	Wert	Beschreibung
label	Text	Definiert ein sichtbares Label für das Menü.
type	popup, toolbar, context	Definiert die Art des Menüs. Hinweis: Das `type`-Attribut und seine Werte waren experimentell und wurden in HTML5.1 entfernt.

Das <menu>-Tag unterstützt auch die Globalen Attribute und die Ereignisattribute.

Praxis

Wofür ist das '<menu>' HTML-Tag gedacht, und auf welchen Browsern kann es verwendet werden?

Das '<menu>' Tag wird verwendet, um Inhalte strukturell zu organisieren, und wird von allen modernen Webbrowsern unterstützt.Das '<menu>' Tag wird verwendet, um eine ungeordnete Liste von Elementen zu definieren, und wird von allen modernen Webbrowsern unterstützt.Das '<menu>' Tag wird verwendet, um eine ungeordnete Liste von Elementen darzustellen, und wird nur von Firefox unterstützt.Das '<menu>' Tag wird verwendet, um eine Liste von Befehlen darzustellen, und wird nur von alten Firefox-Versionen unterstützt.

HTML <menu>-Tag ​

Syntax ​

Beispiel für das HTML <menu>-Tag mit <li>-Elementen: ​

Ergebnis ​

Beispiel für das HTML <menu>-Tag zum Erstellen eines Symbolleisten-Menüs: ​

Der Unterschied zwischen den <menu>- und <ul>-Tags ​

Attribute ​

Praxis ​