Header Logo

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-logo é o subcomponente de identidade visual do cabeçalho. Deve ser inserido nos slots logo ou signature do componente orquestrador <br-header>.

Visão Geral

O componente br-header-logo é o subcomponente do GovBR-DS responsável por renderizar a marca visual oficial ou a assinatura do órgão dentro do cabeçalho.

Para que serve

• Exibição de marca: Apresenta a imagem ou logotipo institucional no topo da página.
• Link de retorno: Permite associar um link à marca, direcionando a pessoa usuária à página inicial do portal ou sistema.

Papel na composição

Atua como elemento de identidade visual no cabeçalho. Não gerencia a estrutura do topo nem as ações utilitárias, papel reservado ao orquestrador br-header.

Regra de uso e relacionamento

• Deve ser utilizado posicionado preferencialmente no slot logo ou signature do componente orquestrador br-header.
• Não deve ser utilizado isoladamente fora do contexto de cabeçalho institucional.

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()

description

Atributo	description
Descrição	Texto alternativo/descritivo da logo.
Tipo	string
Valor padrão	'logo'

height

Atributo	height
Descrição	Altura da imagem.
Tipo	string
Valor padrão	null

href

Atributo	href
Descrição	URL de destino quando a logo for clicada. Se fornecido, a logo será envolvida em um link.
Tipo	string
Valor padrão	---

isCompact

Atributo	is-compact
Descrição	Alterna para versão compacta quando true.
Tipo	boolean
Valor padrão	false

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'

src

Atributo	src
Descrição	Url da logo padrão.
Tipo	string
Valor padrão	''

target

Atributo	target
Descrição	Target do link quando href é fornecido. Aceita _self, _blank, _parent ou _top. Valores inválidos usam _self.
Tipo	"_blank" | "_parent" | "_self" | "_top"
Valor padrão	'_self'

width

Atributo	width
Descrição	Largura da imagem.
Tipo	string
Valor padrão	null

Slots

Nome	Descrição
"default"	Slot para a logo personalizada exibida 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

CSS Shadow Parts

Nome	Descrição
"container"	Wrapper da logo do header.

Migração de Navegação

Antes, br-header-logo podia receber comportamento SPA legado.

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

<!-- Antes -->
<br-header-logo src="/logo.png" href="/" is-spa-link-behavior></br-header-logo>

<!-- Agora -->
<br-header-logo src="/logo.png" href="/" navigation-mode="event"></br-header-logo>

Sem href, a logo não é navegável.

Dependências

Componente pai

• br-header