Tag HTML <menu>
A tag HTML <menu> é um elemento válido do Living Standard que representa uma barra de ferramentas ou lista de comandos. Veja como difere do <ul>, com exemplos.
A tag <menu> representa uma lista não ordenada de itens, assim como <ul>, mas com um significado semântico mais específico: ela descreve uma barra de ferramentas ou uma lista de comandos interativos que o utilizador pode executar. Cada item é escrito como um elemento <li>.
O elemento <menu> não está obsoleto. É um elemento atual e válido no HTML Living Standard. Os navegadores o renderizam da mesma forma que renderizam um <ul> — como uma lista em bloco com marcadores — e possui o mesmo modelo de conteúdo. A diferença é puramente semântica: use <menu> quando a lista for um conjunto de comandos ou controles (por exemplo, uma linha de botões de barra de ferramentas), e use <ul> para listas de conteúdo comuns.
O que foi removido do padrão é o recurso de menu de contexto: os atributos type="context", type="toolbar", type="popup" e label, juntamente com o elemento complementar <menuitem>. Esses recursos não existem mais em nenhum navegador moderno. O próprio elemento <menu> permanece válido — apenas esses atributos extras e o <menuitem> foram removidos. Para criar um menu de contexto personalizado hoje, use CSS e JavaScript.
Quando usar <menu>
- Use
<ul>para listas de conteúdo gerais — links de navegação, listas de recursos, etapas ou qualquer conteúdo com marcadores comum. Para navegação do site, envolva essa lista em um elemento<nav>. - Recorra ao
<menu>apenas quando a intenção semântica for uma barra de ferramentas ou uma lista de comandos, como um grupo de botões de ação (Recortar, Copiar, Colar) que atuam no documento ou seleção atual.
Como as tecnologias assistivas ainda não expõem <menu> de forma diferente de <ul>, o benefício prático hoje é a legibilidade da sua marcação para outros desenvolvedores. Para acessibilidade, atribua um aria-label descritivo a uma barra de ferramentas de comandos.
Sintaxe
A tag <menu> vem em pares. O conteúdo é escrito entre as tags de abertura (<menu>) e fechamento (</menu>).
Exemplo da tag HTML <menu> com elementos <li>:
Exemplo da Tag HTML <menu>
Por padrão, os navegadores renderizam <menu> exatamente como um <ul> — como uma lista com marcadores. Os estilos abaixo simplesmente removem os marcadores e adicionam espaçamento.
<!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>Exemplo de uma barra de ferramentas acessível com <menu>:
Este é o caso para o qual <menu> foi projetado: uma lista de comandos. Os botões são elementos <button> reais (portanto, são focáveis pelo teclado e anunciados como botões), e a barra de ferramentas possui um aria-label para que os utilizadores de leitores de ecrã saibam o que o grupo faz.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: flex;
gap: 10px;
list-style: none;
padding: 10px;
margin: 0;
background: #f0f0f0;
border: 1px solid #ccc;
}
menu button {
padding: 8px 12px;
background: #1c87c9;
color: #fff;
border: none;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<menu aria-label="Text formatting">
<li><button type="button" onclick="alert('Bold')">Bold</button></li>
<li><button type="button" onclick="alert('Italic')">Italic</button></li>
<li><button type="button" onclick="alert('Underline')">Underline</button></li>
</menu>
</body>
</html>A diferença entre as tags <menu> e <ul>
Os elementos <menu> e <ul> comportam-se de forma idêntica no navegador: ambos renderizam uma lista não ordenada e ambos contêm itens <li>. A única diferença é a intenção semântica. <menu> indica que a lista é uma barra de ferramentas ou um conjunto de comandos, enquanto <ul> é para listas de conteúdo comuns. Em caso de dúvida, use <ul> — é o elemento mais geral e universalmente compreendido.
Atributos
O elemento <menu> não possui atributos específicos do elemento. Os atributos mais antigos type (com os valores context, toolbar e popup), label e o elemento complementar <menuitem> foram removidos do padrão e não funcionam mais nos navegadores.
A tag <menu> suporta os Atributos Globais e os Atributos de Evento. Para uma barra de ferramentas de comandos, adicione um aria-label (um atributo global) para descrever o grupo de comandos.