Ir para o conteúdo principal
WBC - GovBR-DS
Copiar página como Markdown para IA

Menu Link

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-link renderiza um hiperlink textual padronizado de menu. Deve ser utilizado dentro de um <br-menu-item> ou seções do <br-menu>.

Visão Geral​

O componente br-menu-link é o subcomponente do GovBR-DS que renderiza um hiperlink textual acessível dentro da estrutura de menu.

Para que serve​

  • Navegação direta: Oferece link textual para destinos internos ou externos.
  • Estilo GovBR-DS: Aplica a tipografia e cores padronizadas de links de menu.

Papel na composição​

Atua como elemento folha de navegação.

Regra de uso e relacionamento​

  • Utilizado dentro de br-menu-item ou seções de apoio do br-menu.

Propriedades​

customId​

Atributocustom-id
DescriçãoIdentificador único do componente.
Quando omitido, um valor é gerado automaticamente.

> Padrão: valor único gerado por generateUniqueId().
Tipostring
Valor padrãogenerateUniqueId()

href​

Atributohref
DescriçãoURL do link. (obrigatório)
Tipostring
Valor padrão---

label​

Atributolabel
DescriçãoTexto canônico do link. Quando informado, tem precedência sobre titulo.
Tipostring
Valor padrão---
Atributonavigation-mode
DescriçãoControla 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​

Atributotarget
DescriçãoDestino do link.
Tipo"_blank" | "_parent" | "_self" | "_top"
Valor padrão'_self'

titulo Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.​

Atributotitulo
DepreciaçãoUse label.
DescriçãoTítulo do link (obrigatório)
Tipostring
Valor padrão---

Slots​

NomeDescrição
"icon"Slot para ícone personalizado do link.
"url"Slot para o texto exibido no link.

Eventos​

EventoDescriçãoDepreciaçãoPropagação
brLinkClick Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.Evento emitido quando o link externo é clicado.Use brMenuLinkClick.true
brMenuLinkClickEvento canônico emitido quando o link externo é clicado.---true
brNavigateEvento 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​

NomeDescrição
"link"Elemento âncora do link.

Migração de Navegação​

Antes, br-menu-link usava url para o destino do link.

Agora, use href.

<!-- Antes -->
<br-menu-link url="/externo" titulo="Link externo"></br-menu-link>

<!-- Agora -->
<br-menu-link href="/externo" titulo="Link externo" navigation-mode="event"></br-menu-link>

O slot chamado url continua sendo apenas um slot de conteúdo visual legado. Ele não define mais o destino do link.

O contrato é igual ao dos demais links: native é o padrão; event emite brNavigate e só bloqueia a navegação quando o evento é cancelado. Modificadores, clique do meio e target diferente de _self permanecem nativos.

Dependências​

Componente pai​

Depende de​

Gráfico​

Comece aquiComponentesQuickstartsSobre o projetoRepositório GitLabVersõesDiscordGovBR-DSFAQWikiRedefinir cookies