<menu>

С помощью <menu> на странице можно создать меню со списком кнопок и других интерактивных элементов. Чаще всего тег используют для вёрстки панели инструментов (тулбара).

Чтобы преобразовать какой-то список элементов в меню, просто оберните его в тег <menu>.

Для примера создадим меню из аккаунта пользователя. Для этого сделаем каждый пункт кнопкой, обернём в тег <li> и вложим в тег <menu>:

        
          
          <menu>  <li>    <button onclick="signIn()">Войти</button>  </li>  <li>    <button onclick="signUp()">Зарегистрироваться</button>  </li></menu>
          <menu>
  <li>
    <button onclick="signIn()">Войти</button>
  </li>
  <li>
    <button onclick="signUp()">Зарегистрироваться</button>
  </li>
</menu>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Тег <menu>, как и <ul>, объединяет неупорядоченный список элементов. Разница только в содержимом: внутри <menu> должны быть только интерактивные элементы. Чаще всего это кнопки, по клику на которые вызываются функции. Таким образом, пользователь совершает действие или выполняет команду. В спецификации HTML тег <menu> объясняется как альтернатива тегу <ul>, на данный момент разницы в обработке этих двух тегов браузерами нет.

Также от тега <menu> отличается <nav> . Тег <nav> группирует элементы навигации по сайту, внутри него помещаются ссылки для перехода к соответствующим разделам. <menu> группирует действия, которые обычно относятся к одному объекту. Один из примеров — контекстное меню. Когда мы кликаем правой клавишей на выделенный текст, видим меню из команд, которые можно выполнить («скопировать», «вырезать», «вставить» и другие).

Тег <menu> парный, его всегда нужно закрывать. Кроме того, тег не должен быть пустым. В качестве элемента списка меню может быть только <li>, внутри которого уже можете использовать нужные вам элементы.
<menu> поддерживает только глобальные атрибуты, то есть те, которые задают любому HTML-элементу.

💡 По умолчанию список, созданный с помощью тега <menu>, получает роль list. Если хотите создать именно тулбар для группировки интерактивных элементов (контролов), используйте <div> с ролью toolbar.