Menu
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.
Exemplos
Push
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Contextual
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Density
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
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. |
| 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' |
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' |
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. |
| 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' |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para o conteúdo principal do menu (menu-list e menu-item). |
"header" | Slot para o cabeçalho do menu, exibido apenas em modo não contextual. |
"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é. |
Métodos
close
| Assinatura | close() => Promise<void> |
| Descrição | Fecha o painel do menu. Pode ser chamado externamente: menuEl.close(). |
| Parâmetros | --- |
open
| Assinatura | open() => Promise<void> |
| Descrição | Abre o painel do menu. Pode ser chamado externamente: menuEl.open(). |
| Parâmetros | --- |
toggle
| Assinatura | toggle() => Promise<void> |
| Descrição | Alterna o estado do painel do menu (abre se fechado, fecha se aberto). Pode ser chamado externamente: menuEl.toggle(). |
| 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). |