Copiar página como Markdown para IA
menu-item
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Propriedades
active
| Atributo | active |
|---|---|
| Descrição | Define se o item do menu está ativo/selecionado. Quando ativado, aplica estilos visuais para destacar o item como atual ou selecionado. |
| Tipo | boolean |
| Valor padrão | false |
displayMode
| Atributo | display-mode |
|---|---|
| Descrição | Define o modo de exibição do item, controlando os ícones de expansão. - accordion: exibe setas para cima/baixo (usado em menus de nível 0).- drill-down: exibe seta para a direita (usado em menus de níveis 1+).- none: não exibe ícones de expansão. |
| Tipo | "accordion" | "drill-down" | "none" |
| Valor padrão | 'none' |
divider
| Atributo | divider |
|---|---|
| Descrição | Define se o item deve exibir um divisor visual. Quando ativado, adiciona uma linha separadora para organizar visualmente os itens do menu. |
| Tipo | boolean |
| Valor padrão | false |
expanded
| Atributo | expanded |
|---|---|
| Descrição | Indica se o item está expandido para fins de acessibilidade (ARIA). Este estado é controlado externamente (por exemplo, por br-menu-list). Não altera o estado visual de "active". |
| Tipo | boolean |
| Valor padrão | false |
href
| Atributo | href |
|---|---|
| Descrição | URL de destino do link do item do menu. Utilize esta propriedade para definir o endereço para onde o usuário será direcionado ao clicar no item. |
| Tipo | string |
| Valor padrão | '#' |
icon
| Atributo | icon |
|---|---|
| Descrição | Ícone exibido no item do menu. Utilize esta propriedade para definir o ícone que será mostrado ao lado do conteúdo do item. |
| Tipo | string |
| Valor padrão | --- |
navigationMode
| Atributo | navigation-mode |
|---|---|
| Descrição | Controla como o componente integra a navegação mantendo href real no elemento navegável.- native (padrão): preserva o comportamento do navegador, conforme HTML/W3C.- event: emite brNavigate; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir.Cliques com modificadores, botão do meio ou target diferente de _self permanecem nativos. |
| Tipo | "event" | "native" |
| Valor padrão | 'native' |
target
| Atributo | target |
|---|---|
| Descrição | Define como o link será aberto. - _self: abre no mesmo contexto de navegação (padrão)- _blank: abre em nova aba ou janela- _parent: abre no contexto pai- _top: abre no contexto de nível superior |
| Tipo | "_blank" | "_parent" | "_self" | "_top" |
| Valor padrão | '_self' |
Slots
| Nome | Descrição |
|---|---|
"default" | Conteúdo textual principal exibido no item de menu. |
"icon" | Ícone personalizado. Quando preenchido, substitui o ícone definido por icon. |
Eventos
| Evento | Descrição | Depreciação | Propagação |
|---|---|---|---|
brNavigate | Evento cancelável emitido em navigation-mode="event" para cliques primários sem modificadores em links _self. Chame event.preventDefault() no listener para impedir a navegação nativa e entregar event.detail.href ao roteador da SPA. | --- | true |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"content" | Conteúdo textual do item de menu. |
"icon" | Ícone do item de menu. |
"link" | Elemento âncora do item de menu. |
"support" | Ícone de suporte (seta para baixo/direita). |
Dependências
Componente pai
Usado por
Depende de
Gráfico
Migração de Navegação
Antes, br-menu-item podia receber is-spa-link-behavior e o evento legado brSpaNavigate.
Agora, use navigation-mode="event" e escute brNavigate.
<!-- Antes -->
<br-menu-item href="/servicos" is-spa-link-behavior>Servicos</br-menu-item>
<!-- Agora -->
<br-menu-item href="/servicos" navigation-mode="event">Servicos</br-menu-item>
O default de target é _self. Itens expansivos continuam usando o comportamento de menu; itens navegáveis usam o mesmo contrato de br-link.
