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
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Contextual
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Density
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' |
push
| Atributo | push |
| Descrição | Define se o menu deve usar comportamento push (sempre visível em telas maiores). 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é. |