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.

Visão Geral

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

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

Propriedades

accordion

Atributo	accordion
Descrição	Indica se a lista possui o comportamento de accordion. O valor da propriedade define o grupo, ou seja, o accordion é aplicado a todas as listas que possuem o mesmo valor para esta propriedade.
Tipo	string
Valor padrão	null

collapse

Atributo	collapse
Descrição	Indica se a lista possui o comportamento de collapse.
Tipo	boolean
Valor padrão	false

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

density

Atributo	density
Descrição	Modificador de densidade da lista.
Tipo	"large" | "medium" | "small"
Valor padrão	null

divider

Atributo	divider
Descrição	Indica se a lista possui divisores (divider) entre os itens.
Tipo	boolean
Valor padrão	false

header

Atributo	header
Descrição	Define o texto do cabeçalho da lista. Quando definido, também é usado como aria-label do elemento role="list", fornecendo um nome acessível que leitores de tela anunciam ao entrar na lista.
Tipo	string
Valor padrão	null

hideHeaderDivider

Atributo	hide-header-divider
Descrição	Indica que o divider para o título da lista estará oculto.
Tipo	boolean
Valor padrão	false

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

Atributo	is-horizontal
Depreciação	Use orientation.
Descrição	Indica se a lista será horizontal. Por padrão, a lista é vertical.
Tipo	boolean
Valor padrão	false

listRole

Atributo	list-role
Descrição	Semântica do host quando o conteúdo não representa itens de lista.
Tipo	"group" | "list"
Valor padrão	'list'

orientation

Atributo	orientation
Descrição	Orientação canônica. Quando informada, tem precedência sobre isHorizontal.
Tipo	"horizontal" | "vertical"
Valor padrão	---

Slots

Nome	Descrição
"default"	Slot para os itens da lista.
"header"	Slot para ações ou conteúdo do cabeçalho da lista.

CSS Shadow Parts

Nome	Descrição
"container"	Wrapper principal da lista.

Dependências

Usado por

• br-breadcrumb
• br-footer-category
• br-header-list
• br-pagination
• br-skip-link
• br-upload

Depende de

• br-collapse

Gráfico

Migração de <br-list> (1.x → 2.x)

A lista da 2.x usa nomes que descrevem sua estrutura e delega comportamento de recolhimento aos recursos atuais de composição.

Propriedades

API 1.x	API 2.x	Ação na migração
dataToggle / dataUnique	collapse/accordion atuais	Reestruture o comportamento usando os componentes atuais.
density	density	Mantenha.
hideTitleDivider	hideHeaderDivider	Renomeie a propriedade.
horizontal	orientation	Use orientation="horizontal" ou vertical".
spaceBetween	—	Remova; ajuste a distribuição na composição/layout.
title	header	Renomeie a propriedade.

Exemplo

1.x:

<br-list title="Serviços" horizontal hide-title-divider></br-list>

2.x:

<br-list header="Serviços" orientation="horizontal" hide-header-divider></br-list>