Footer

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

colorMode

Atributo	color-mode
Descrição	Esquema de cor canônico. Quando informado, tem precedência sobre theme.
Tipo	"dark" | "light"
Valor padrão	---

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

layoutWidth

Atributo	layout-width
Descrição	Define a largura do container interno do rodapé. - contained: largura máxima limitada pela grade no breakpoint desktop (container-lg). - full: sempre ocupa 100% da largura disponível (container-fluid).
Tipo	"contained" | "full"
Valor padrão	'contained'

socialNetworkTitle

Atributo	social-network-title
Descrição	Texto de descrição das redes sociais.
Tipo	string
Valor padrão	''

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

Atributo	theme
Depreciação	Use colorMode.
Descrição
Tipo	"dark" | "light"
Valor padrão	'dark'

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

O footer da 1.x recebia categorias, redes sociais, parceiros e logo como dados. Na 2.x, essas áreas são compostas nos slots do footer e em seus subcomponentes.

Propriedades e composição

API 1.x	API 2.x	Ação na migração
containerFluid	layoutWidth	Renomeie.
inverted	theme	Use o tema canônico atual.
spaceBetweenCategories	—	Remova; controle a distribuição na composição.
text, categories, social, partners, logo	slots/subcomponentes	Mova cada estrutura para seu slot semântico.

Exemplo

1.x:

<br-footer :categories="categories" :social="social" inverted container-fluid></br-footer>

2.x:

<br-footer theme="dark" layout-width="fluid">
  <div slot="categories">Categorias</div>
  <div slot="social">Redes sociais</div>
</br-footer>

Slots

Nome	Descrição
"default"	Slot para o mapa do site, utilizando br-footer-category e br-footer-item.
"legal"	Slot para informações legais, utilizando br-footer-legal.
"logo"	Slot para o logo do rodapé, utilizando o componente br-logo.
"partner-logo"	Slot para logos de parceiros, utilizando br-logo.
"social-network"	Slot para as redes sociais, utilizando br-footer-social.

CSS Shadow Parts

Nome	Descrição
"container"	Wrapper principal do footer.
"partners"	Área de logos de parceiros.
"site-map"	Área do mapa do site.
"social"	Área de redes sociais.

Dependências

Subcomponentes

• br-footer-category
• br-footer-item
• br-footer-legal
• br-footer-logo
• br-footer-social

Depende de

• br-divider

Gráfico