HTML-тег `<menu>`

Тег <menu> задаёт список команд или пунктов меню. Раньше его связывали с контекстными меню и панелями инструментов.

Исторически внутри могли быть <menuitem> и <hr> как разделители; эти возможности убраны из спецификации.

Панель инструментов на базе <menu> может содержать:

ненумерованный список элементов <li>;
потоковое содержимое с доступными командами.

DANGER

Тег <menu> считается устаревшим, <menuitem> удалён из стандарта. Для контекстных меню используйте CSS и JavaScript; для обычных списков — <ul>.

Синтаксис

Парный тег.

Пример с `<li>`

Пример <menu>

Современные браузеры не показывают <menu> как список по умолчанию; ниже сброс стилей.

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>

Результат

Панель инструментов

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>

Разница между `<menu>` и `<ul>`

Оба задают ненумерованные списки; <menu> изначально ориентирован на команды и панели, <ul> — на обычный контент.

Атрибуты

Атрибут	Значение	Описание
label	текст	Подпись меню.
type	popup, toolbar, context	Тип меню (экспериментально, в HTML5.1 убрано).

Также глобальные атрибуты и атрибуты событий.

Practice

Каково назначение тега <menu> и где он поддерживался?

Только для структурирования любого контента во всех браузерах.Как обычный ненумерованный список во всех современных браузерах.Как ненумерованный список с ограниченной поддержкой (исторически Firefox).Как список команд; в старых версиях Firefox была заметная поддержка.

HTML-тег <menu> ​

Синтаксис ​

Пример с <li> ​

Результат ​

Панель инструментов ​

Разница между <menu> и <ul> ​

Атрибуты ​

Practice ​