Menu Item

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.

Subcomponente de Composição

O br-menu-item representa uma opção interativa de rota ou gatilho para submenu. Deve ser utilizado dentro de um <br-menu-list> no contexto de um <br-menu>.

Visão Geral

O componente br-menu-item é o subcomponente interativo do GovBR-DS que representa uma opção de navegação ou gatilho para submenu na árvore de menu.

Para que serve

• Opção de rota ou submenu: Funciona como link direto para uma página ou como nó que abre um próximo nível hierárquico.
• Estados visuais de navegação: Reflete estados ativo, focado, hover e selecionado.

Papel na composição

Atua como item interativo central da navegação.

Regra de uso e relacionamento

• Deve ser utilizado exclusivamente dentro de um br-menu-list.
• Quando contiver subníveis, comunica-se com o orquestrador br-menu para ativar a transição entre telas.

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. Valores inválidos usam none.
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	Identificador legado do ícone exibido no item do menu. Nomes simples conhecidos são resolvidos pelo registro SVG local; para classes CSS, SVGs ou bibliotecas externas, prefira o slot icon.
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. Valores inválidos usam native.
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 Valores inválidos usam _self.
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).

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.

Dependências

Componente pai

• br-menu

Usado por

• br-menu-list

Depende de

• br-link
• br-icon

Gráfico