Header

Visão Geral

Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplos

Básico

Carregando exemplo

Código fonte editável

Formatar código

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Propriedades

caption

Atributo	caption
Descrição	Texto exibido como título do cabeçalho.
Tipo	string
Valor padrão	null

captionUrl

Atributo	caption-url
Descrição	URL associada ao título do cabeçalho.
Tipo	string
Valor padrão	null

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId.
Tipo	string
Valor padrão	Helpers.generateUniqueId()

density

Atributo	density
Descrição	Define a densidade visual do componente. - small: Baixa densidade (componente maior, mais espaçamento e altura). - medium: Densidade intermediária, padrão recomendado para a maioria dos casos. - large: Alta densidade (componente menor, menos espaçamento e altura). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density.
Tipo	"large" | "medium" | "small"
Valor padrão	'medium'

isCompact

Atributo	is-compact
Descrição	Ativa o modo compacto do cabeçalho.
Tipo	boolean
Valor padrão	false

isSticky

Atributo	is-sticky
Descrição	Fixa o cabeçalho no topo durante a rolagem.
Tipo	boolean
Valor padrão	false

shrinkFirst

Atributo	shrink-first
Descrição	Define qual lista encolhe primeiro quando o espaço é limitado.
Tipo	"functions" | "links"
Valor padrão	'functions'

signature

Atributo	signature
Descrição	Texto da assinatura exibida ao lado da logo.
Tipo	string
Valor padrão	null

subcaption

Atributo	subcaption
Descrição	Texto exibido como subtítulo do cabeçalho.
Tipo	string
Valor padrão	null

subcaptionUrl

Atributo	subcaption-url
Descrição	URL associada ao subtítulo do cabeçalho.
Tipo	string
Valor padrão	null

Slots

Nome	Descrição
"access"	Slot para o botão de acesso ou autenticação.
"caption"	Slot para o título do cabeçalho.
"functions"	Slot para botões de ação no cabeçalho.
"links"	Slot para links de navegação principais.
"logo"	Slot para a logo do cabeçalho.
"menu-trigger"	Slot para o botão que abre o menu.
"search"	Slot para o campo de busca.
"signature"	Slot para a assinatura visual da organização.
"subcaption"	Slot para o subtítulo do cabeçalho.

Eventos

Evento	Descrição	Propagação
headerCompactChange	Evento disparado quando o cabeçalho entra ou sai do modo compacto. O evento contém os detalhes do estado compacto e o ID do componente pai.	true
headerWidthChange	Evento disparado para indicar qual lista deve encolher primeiro. O evento contém os detalhes do ID do componente pai e o nome da lista.	true

Métodos

resetHeaderList

Assinatura	resetHeaderList() => Promise<void>
Descrição	Reinicializa o estado das listas do cabeçalho, disparando o evento de redimensionamento. Pode ser chamado externamente para forçar a atualização das listas.
Parâmetros	---

CSS Shadow Parts

Nome	Descrição
"bottom-left"	Área inferior esquerda (menu + título).
"bottom-right"	Área inferior direita (busca expandida).
"bottom"	Área inferior do header.
"header"	Elemento header principal.
"top-left"	Área superior esquerda (logo + assinatura).
"top-right"	Área superior direita (links + funções + busca + acesso).
"top"	Área superior do header.

Dependências

Subcomponentes

• br-header-function
• br-header-link
• br-header-list
• br-header-logo

Depende de

• br-divider
• br-button
• br-icon

Gráfico

Migração: Vue 1.x → Stencil 2.x

Propriedades

🟦 Propriedades renomeadas

Propriedade Vue	Propriedade Stencil	Descrição	Tipo	Padrão
compact	is-compact	Indica se deve ser exibido em modo compacto.	boolean	false
density	density	Indica a densidade.	"large" | "medium" | "small"	'medium'
subtitle	subcaption	Indica o texto exibido como subtítulo.	string	null
title-link-url	caption-url	Indica a URL associada ao título.	string	null
title	caption	Indica o texto exibido como título.	string	null

🟥 Propriedades removidas

Propriedade	Descrição	Tipo	Padrão
action-search	Propriedade removida.	---	---
has-menu	Propriedade removida.	---	---
has-search	Propriedade removida.	---	---
has-title-link	Propriedade removida.	---	---
image	Propriedade removida.	---	---
label-search	Propriedade removida.	---	---
name-input-search	Propriedade removida.	---	---
placeholder-search	Propriedade removida.	---	---
value-input-search	Propriedade removida.	---	---