Copiar página como Markdown para IA
Footer
Visão Geral
O componente br-footer é o orquestrador completo de rodapé institucional do GovBR-DS. Fornece o fechamento estrutural da página, centralizando links de navegação categorizados, canais de redes sociais, menção legal de licenciamento aberto e a marca do Governo Federal.
Para que serve
- Fechamento e navegação secundária: Agrupa em categorias os links úteis de apoio, mapas do site e serviços da entidade pública.
- Conformidade legal e transparência: Apresenta a nota de licenciamento de conteúdo (ex.: Creative Commons) e termos legais obrigatórios.
- Redes sociais institucionais: Exibe links oficiais de comunicação pública com a sociedade.
- Responsividade integrada: Converte categorias de links em painéis expansíveis (sanfona) automaticamente no modo mobile.
Quando utilizar
- Utilize quando:
- Finalizar a estrutura da página em portais e sistemas governamentais alinhados ao padrão GovBR-DS.
- Oferecer navegação complementar, canais sociais e declarações de direitos autorais.
- Evite e prefira outro componente quando:
- A interface for um diálogo modal ou painel isolado que não representa uma página completa do portal.
Composição e Subcomponentes
| Subcomponente | Papel | Regra de uso |
|---|---|---|
br-footer-category | Categoria de links. Agrupa links temáticos sob um título expansível. | Deve ser inserido no contêiner de categorias do br-footer. |
br-footer-item | Item de link. Link individual dentro de uma categoria de rodapé. | Deve ser utilizado dentro de um br-footer-category. |
br-footer-legal | Texto legal. Exibe termos de licenciamento aberto e direitos autorais. | Posicionado na base legal do br-footer. |
br-footer-logo | Logotipo. Exibe a logomarca do órgão ou do Governo Federal. | Posicionado na área designada de logotipo do br-footer. |
br-footer-social | Redes sociais. Reúne links e ícones para canais sociais oficiais. | Posicionado no slot ou área de mídias sociais do br-footer. |
br-footer | Orquestrador principal. Gerencia a distribuição visual em colunas/linhas e o comportamento sanfona em telas menores. | Deve ser declarado como elemento de rodapé ao final da página. |
Como os subcomponentes se relacionam
O br-footer atua como contêiner estrutural orquestrador. Ele organiza as categorias (br-footer-category) em colunas no desktop e alterna para comportamento de acordeão no mobile. Os itens (br-footer-item) herdam o contexto da categoria correspondente, enquanto as áreas de logotipo, redes sociais e notas legais completam o fechamento padronizado.
Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o Design System do GovBR.
Exemplo(s)
Desktop (100%)
Tablet - 768px
iPhone (iOS) - 390x844
Android - 360x800
Tela cheia
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 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
| 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 br-footer renderiza um landmark <footer>. A acessibilidade depende de
usar os subcomponentes com a semântica correta:
- Mapa do site no slot padrão com
br-footer-category(título de grupo) ebr-footer-item(links reais). - Redes sociais no slot
social-network; definasocial-network-titlepara dar um rótulo à região. - Logos de parceiros no slot
partner-logocomaltsignificativo (oualt=""quando forem puramente decorativos). - Informações legais no slot
legal.
Uso
- Todo item navegável é um
<a>com texto discernível — evite links só com ícone sem rótulo. - As categorias podem recolher em telas estreitas; o controle de recolher/
expandir é um
buttoncomaria-expanded, e o conteúdo recolhido não deve manter links focáveis (usehidden/inert). - Contraste: o tema escuro (
theme="dark") precisa manter texto e links legíveis sobre o fundo.
Movimento
O recolher/expandir das categorias respeita prefers-reduced-motion: reduce.
Dependências
Subcomponentes
Depende de
Gráfico
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>
