Copiar página como Markdown para IA
Footer
Visão Geral
O br-footer é o rodapé da página: logotipo, mapa do site, redes sociais, parceiros e informações legais.
Como montar
| Área | Onde colocar |
|---|---|
| Informações legais | br-footer-legal no slot legal |
| Logotipo | br-footer-logo no slot logo |
| Mapa do site | br-footer-category com br-footer-item, no conteúdo do footer |
| Parceiros | br-footer-logo partner no slot partner-logo |
| Redes sociais | br-footer-social no slot social-network |
<br-footer social-network-title="Redes sociais">
<br-footer-logo slot="logo" src="/logo.svg" description="Nome do órgão" href="/"></br-footer-logo>
<br-footer-category label="Serviços">
<br-footer-item href="/servicos/emitir">Emitir documento</br-footer-item>
<br-footer-item href="/servicos/consultar">Consultar processo</br-footer-item>
</br-footer-category>
<br-footer-social slot="social-network" icon="instagram" description="Instagram" href="https://instagram.com/orgao" target="_blank"></br-footer-social>
<br-footer-legal slot="legal">Texto destinado a exibir informações sobre o licenciamento.</br-footer-legal>
</br-footer>
Em telas pequenas, as categorias viram seções que abrem e fecham. O tema padrão é escuro; use theme="light" para o claro.
Consulte as diretrizes de design do GovBR.
Carregando preview…
HTML
Controles do componente
Console: logs, eventos e erros
Angular (Somente leitura)
React (Somente leitura)
Vue (Somente leitura)
Acessibilidade
Recolher controles e código
Desfazer alteração
Refazer alteração
Comparar alterações
Formatar código
Resetar código para o estado inicial
Propriedades
colorMode
| Atributo | color-mode |
|---|---|
| Descrição | Esquema de cor padrão. 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
| Atributo | theme |
|---|---|
| Depreciação | Use colorMode. |
| Descrição | Indica o tema do rodapé. |
| Tipo | "dark" | "light" |
| Valor padrão | 'dark' |
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. |
Acessibilidade
O footer é marcado como rodapé da página (<footer>).
- Use
br-footer-itempara links do mapa do site: cada um é um link com texto. - Defina
social-network-titlepara nomear a área de redes sociais. - Em logos, descreva a imagem em
description. Em logos de parceiros apenas decorativos, deixe a descrição vazia. - Nas telas pequenas, o título de cada categoria é um botão que informa se está aberto; os links de uma categoria fechada não recebem foco.
- No tema escuro, confira o contraste de textos e links.
A abertura das categorias respeita a preferência do sistema por menos movimento.
Dependências
Subcomponentes
Depende de
Gráfico
Migração de <br-footer> (1.x → 2.x)
Na 1.x, o conteúdo era passado como dados. Na 2.x, cada área usa um slot e um subcomponente.
| 1.x | 2.x | O que fazer |
|---|---|---|
categories | br-footer-category e br-footer-item | Declare dentro do footer. |
containerFluid | layout-width="full" | Renomeie. |
inverted | theme | Use theme="dark" ou theme="light". |
logo | br-footer-logo no slot logo | |
partners | br-footer-logo partner no slot partner-logo | Um elemento por parceiro. |
social | br-footer-social no slot social-network | Um elemento por rede. |
spaceBetweenCategories | — | Remova. |
text | br-footer-legal no slot legal |
1.x:
<br-footer :categories="categories" :social="social" container-fluid></br-footer>
2.x:
<br-footer layout-width="full">
<br-footer-category label="Serviços">
<br-footer-item href="/servicos">Todos os serviços</br-footer-item>
</br-footer-category>
<br-footer-social slot="social-network" icon="youtube" description="YouTube" href="https://youtube.com/orgao"></br-footer-social>
</br-footer>
