Header 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-header-link representa um link de navegação institucional no cabeçalho. Deve ser utilizado dentro de um <br-header-list> no slot links do <br-header>.

Visão Geral

O componente br-header-link é o subcomponente de navegação do GovBR-DS que representa um atalho ou hiperlink de navegação institucional no cabeçalho.

Para que serve

• Navegação institucional: Oferece acesso direto a páginas de serviços, portais correlatos ou áreas centrais do órgão.
• Integração SPA: Suporta navegação web padrão via atributo href ou integração com roteadores SPA via eventos de navegação.

Papel na composição

Atua como item folha de navegação dentro do cabeçalho.

Regra de uso e relacionamento

• Deve ser utilizado dentro de um br-header-list posicionado no slot links do br-header.
• Não deve ser utilizado de forma avulsa fora do ecossistema de cabeçalho.

Propriedades

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId().
Tipo	string
Valor padrão	generateUniqueId()

href

Atributo	href
Descrição	URL do link.
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 o alvo do link quando href está presente. Pode ser: - _blank para abrir em uma nova aba, - _self para abrir na mesma aba, - _parent para abrir na aba pai, - _top para abrir na aba superior.
Tipo	"_blank" | "_parent" | "_self" | "_top"
Valor padrão	'_self'

Slots

Nome	Descrição
"default"	Slot para o conteúdo do link exibido no cabeçalho.

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

Migração de Navegação

Antes, br-header-link encaminhava is-spa-link-behavior para o item interno.

Agora, use navigation-mode="event" junto com href.

<!-- Antes -->
<br-header-link href="/orgaos" is-spa-link-behavior>Orgaos</br-header-link>

<!-- Agora -->
<br-header-link href="/orgaos" navigation-mode="event">Orgaos</br-header-link>

O evento emitido é brNavigate.

Dependências

Componente pai

• br-header

Depende de

• br-item

Gráfico