Menu

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

Design System

Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Comportamento de Acionamento Automático

O menu monitora eventos de clique globais no documento. Qualquer elemento que possua o atributo data-toggle="menu" e cujo data-target coincida com o ID ou customId do menu (ou seja omitido) irá alternar automaticamente o estado do menu (isOpen).

Exemplo(s)

Padrão

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

Contextual

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Expandir controles e código

Propriedades

breakpoints

Atributo	breakpoints
Descrição	Classes CSS para definir breakpoints responsivos do menu. Utilize esta propriedade para controlar a largura do menu em diferentes tamanhos de tela. Por padrão não aplica colunas; quando contextual e sem valor definido, usa col-sm-4 col-lg-3.
Tipo	string
Valor padrão	''

contextual

Atributo	contextual
Descrição	Define se o menu deve usar comportamento contextual (aparece na parte inferior). Quando ativado, o menu é posicionado na parte inferior da tela em dispositivos móveis.
Tipo	boolean
Valor padrão	false

contextualLabel

Atributo	contextual-label
Descrição	Rótulo do botão trigger do menu contextual. Exibido apenas em modo contextual e em telas menores (mobile).
Tipo	string
Valor padrão	'Menu Contextual'

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId().
Tipo	string
Valor padrão	generateUniqueId()

density

Atributo	density
Descrição	Define a densidade dos itens do menu, alterando o espaçamento interno. - small (densidade alta): itens mais compactos - medium (padrão): equilíbrio entre economia de espaço e separação - large (densidade baixa): maior espaçamento (recomendado em touch)
Tipo	"large" | "medium" | "small"
Valor padrão	'medium'

fixed

Atributo	fixed
Descrição	Mantém o menu como uma barra lateral fixa quando estiver aberto. O menu continua podendo ser ocultado alterando isOpen ou chamando close(). A largura padrão é 20rem, limitada à viewport, e pode ser sobrescrita pela variável CSS --menu-fixed-width.
Tipo	boolean
Valor padrão	false

isOpen

Atributo	is-open
Descrição	Define se o painel do menu está aberto/visível. Em modo push, esta propriedade permite controle externo da visibilidade. O nome permanece porque o método público open() já ocupa a propriedade open no host.
Tipo	boolean
Valor padrão	false

push

Atributo	push
Descrição	Define se o menu deve usar comportamento push. Quando ativado, o menu permanece fixo na lateral e empurra o conteúdo principal.
Tipo	boolean
Valor padrão	false

socialTitle

Atributo	social-title
Descrição	Título da seção de redes sociais exibida no rodapé do menu. Utilize esta propriedade para personalizar o texto que aparece acima dos ícones sociais.
Tipo	string
Valor padrão	'Redes Sociais'

Migração de <br-menu> (1.x → 2.x)

Na 1.x, o menu recebia grande parte da árvore de navegação em objetos pela propriedade list. Na 2.x, o menu é um contêiner e a árvore deve ser declarada com br-menu-list e br-menu-item.

Propriedades e composição

API 1.x	API 2.x	Ação na migração
dataBreakpoints	breakpoints	Renomeie e revise o formato.
density, contextualLabel, socialTitle	mesmos nomes	Mantenha quando usados.
isContextual	contextual	Renomeie.
isPush	push	Renomeie.
list	br-menu-list / br-menu-item	Troque o objeto de dados por composição de elementos.
logoHeader, links, social, info	slots/subcomponentes	Distribua cada parte na área semântica correspondente.
showMenu	isOpen	Renomeie e controle o estado aberto.

Para aplicações SPA, configure navigation-mode nos itens e trate brNavigate no nível da aplicação.

Exemplo

1.x:

<br-menu :list="items" :is-push="true"></br-menu>

2.x:

<br-menu push>
  <br-menu-list>
    <br-menu-item href="/inicio">Início</br-menu-item>
    <br-menu-item href="/servicos">Serviços</br-menu-item>
  </br-menu-list>
</br-menu>

Slots

Nome	Descrição
"default"	Slot para o conteúdo principal do menu (menu-list, menu-group e menu-item).
"header"	Slot para o cabeçalho do menu, exibido apenas em modo não contextual e não push.
"info"	Slot para informações adicionais no rodapé.
"link"	Slot para links externos no rodapé (use br-menu-link).
"logo"	Slot para logotipos de parceiros no rodapé.
"social"	Slot para ícones de redes sociais no rodapé.

Estado aberto e associação com header

isOpen é a fonte de verdade pública do menu. Interação, open(), close() e toggle() atualizam essa propriedade e emitem brMenuOpenChange uma vez, com detail.open e detail.sourceId. Escrita com o mesmo valor não emite evento.

Ao usar um trigger no br-header, defina data-target com o id ou customId do menu. Isso isola páginas com vários headers e menus e mantém aria-expanded sincronizado somente no trigger associado.

<br-header>
  <button slot="menu-trigger" data-toggle="menu" data-target="#menu-principal" aria-expanded="false">
    Menu
  </button>
</br-header>
<br-menu id="menu-principal"></br-menu>

Fluxo, camada e modalidade

O menu sobreposto usa um <dialog> modal e a top layer quando showModal() está disponível. O painel e a máscara compartilham o mesmo contexto: máscara na subcamada local 0 e painel na 1. Sem suporte nativo, o conjunto permanece fixed na camada de navegação temporária 3.

Os modos push, fixed e contextual não entram na top layer e mantêm o comportamento local ou persistente. No fallback CSS, mantenha apenas um bloqueador legado ativo por vez.

Eventos

Evento	Descrição	Depreciação	Propagação
brMenuOpenChange	Evento canônico emitido quando o menu abre ou fecha. detail.open contém o estado concluído e detail.sourceId identifica a instância pelo id ou customId.	---	true
brMenuStateChange Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.	Evento emitido quando o menu abre ou fecha.	Use brMenuOpenChange.	true

Métodos

close

Descrição	Fecha o painel do menu. Pode ser chamado externamente: menuEl.close().
Assinatura	close() => Promise<void>
Parâmetros	---

open

Descrição	Abre o painel do menu. Pode ser chamado externamente: menuEl.open().
Assinatura	open() => Promise<void>
Parâmetros	---

toggle

Descrição	Alterna o estado do painel do menu (abre se fechado, fecha se aberto). Pode ser chamado externamente: menuEl.toggle().
Assinatura	toggle() => Promise<void>
Parâmetros	---

CSS Shadow Parts

Nome	Descrição
"back-btn"	Botão de voltar do menu de navegação drill-down.
"body"	Parte principal onde ficam os links e grupos de navegação.
"container"	Parte para o container externo que envolve o menu inteiro.
"footer"	Parte para o contêiner principal do rodapé do menu, agrupando logos, links, redes sociais e informações.
"info"	Parte para informações adicionais, como licença ou direitos autorais.
"link"	Parte para links úteis ou navegação secundária no rodapé.
"logo"	Parte para a área de logotipos de parceiros no rodapé.
"panel"	Parte para o painel de navegação do menu (o menu propriamente dito).
"social"	Parte para ícones de redes sociais no rodapé.
"trigger"	Botão de acionamento do menu (hambúrguer ou contextual).

Dependências

Subcomponentes

• br-menu-group
• br-menu-header
• br-menu-info
• br-menu-item
• br-menu-link
• br-menu-list
• br-menu-logo
• br-menu-social

Depende de

• br-scrim
• br-button
• br-icon

Gráfico