Footer Social

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-footer-social agrupa links e ícones para as redes sociais oficiais no rodapé. Deve ser posicionado no slot ou área de mídias sociais do componente orquestrador <br-footer>.

Visão Geral

O componente br-footer-social é o subcomponente do GovBR-DS que agrupa e renderiza atalhos e ícones para os canais oficiais de redes sociais da organização pública.

Para que serve

• Canais oficiais: Facilita o acesso do cidadão às mídias sociais e de comunicação do órgão.
• Acessibilidade nos atalhos: Fornece rótulos acessíveis e abertura segura de links externos.

Papel na composição

Atua como bloco de engajamento social no rodapé.

Regra de uso e relacionamento

• Deve ser inserido na área ou slot destinado a redes sociais do br-footer.

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

description

Atributo	description
Descrição	Descrição do ícone da rede social
Tipo	string
Valor padrão	---

href

Atributo	href
Descrição	URL da rede social
Tipo	string
Valor padrão	---

icon

Atributo	icon
Descrição	Identificador da rede social. Os ícones oficiais mais comuns são renderizados pelo registro SVG local; use o slot icon para uma fonte diferente ou uma classe Font Awesome personalizada.
Tipo	string
Valor padrão	---

navigationMode

Atributo	navigation-mode
Descrição	Controla como o componente integra a navegação mantendo href real no elemento navegável. - native (padrão): preserva o comportamento do navegador, conforme HTML/W3C. - event: emite brNavigate; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir. Cliques com modificadores, botão do meio ou target diferente de _self permanecem nativos.
Tipo	"event" | "native"
Valor padrão	'native'

target

Atributo	target
Descrição	Target do link quando href é fornecido.
Tipo	"_blank" | "_parent" | "_self" | "_top"
Valor padrão	'_self'

Slots

Nome	Descrição
"icon"	Ícone personalizado. Quando preenchido, substitui o ícone definido por icon.

Eventos

Evento	Descrição	Depreciação	Propagação
brNavigate	Evento cancelável emitido em navigation-mode="event" para cliques primários sem modificadores em links _self. Chame event.preventDefault() no listener para impedir a navegação nativa e entregar event.detail.href ao roteador da SPA.	---	true

Migração de Navegação

Antes, br-footer-social podia usar comportamento SPA legado.

Agora, use navigation-mode="event" com href para destinos internos.

<!-- Antes -->
<br-footer-social href="/instagram" icon="instagram" description="Instagram" is-spa-link-behavior></br-footer-social>

<!-- Agora -->
<br-footer-social href="/instagram" icon="instagram" description="Instagram" navigation-mode="event"></br-footer-social>

Links externos e target="_blank" devem permanecer no modo native.

Dependências

Componente pai

• br-footer

Depende de

• br-icon

Gráfico