Header List

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-list é o subcomponente contêiner para listas horizontais de navegação ou utilidades. Deve ser inserido nos slots links ou functions do componente orquestrador <br-header>.

Visão Geral

O componente br-header-list é o subcomponente contêiner do GovBR-DS que organiza links de navegação ou botões funcionais em uma estrutura de lista horizontal acessível.

Para que serve

• Agrupamento semântico: Estrutura itens navegáveis ou funcionais em elementos de lista semânticos.
• Distribuição e espaçamento: Garante o alinhamento horizontal padronizado de itens no cabeçalho.

Papel na composição

Atua como elo intermediário entre o orquestrador br-header e os itens filhos individuais (br-header-link ou br-header-function).

Regra de uso e relacionamento

• Deve ser inserido nos slots links ou functions do orquestrador br-header.
• Serve de contêiner direto para subcomponentes br-header-link ou br-header-function.

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

listTitle

Atributo	list-title
Descrição	Título da lista.
Tipo	string
Valor padrão	null

Slots

Nome	Descrição
"default"	Slot para o conteúdo da lista de navegação no cabeçalho.

Eventos

Evento	Descrição	Depreciação	Propagação
headerListFocused	Evento disparado quando a lista recebe foco. O evento envia o ID do componente.	---	true
headerListUpdate	Evento disparado para indicar qual lista deve encolher primeiro. O evento envia o ID do componente pai e o nome da lista.	---	true

Métodos

closeList

Descrição	Fecha a lista.
Assinatura	closeList() => Promise<void>
Parâmetros	---

isListOpen

Descrição	Verifica se a lista está aberta.
Assinatura	isListOpen() => Promise<boolean>
Parâmetros	---

openList

Descrição	Abre a lista.
Assinatura	openList() => Promise<void>
Parâmetros	---

Dependências

Componente pai

• br-header

Depende de

• br-list
• br-button
• br-icon

Gráfico