Menu 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-menu-social reúne atalhos para os canais de redes sociais institucionais no menu. Posiciona-se preferencialmente na base ou rodapé do componente orquestrador <br-menu>.

Visão Geral

O componente br-menu-social é o subcomponente do GovBR-DS que reúne atalhos para os canais de redes sociais institucionais no interior do menu.

Para que serve

• Acesso rápido a mídias: Permite que o cidadão acesse perfis institucionais a partir da gaveta de navegação.

Papel na composição

Atua como bloco de engajamento social no menu.

Regra de uso e relacionamento

• Posiciona-se preferencialmente na base ou rodapé interno do br-menu.

Propriedades

ariaLabel

Atributo	aria-label
Descrição	Define o rótulo acessível usado por tecnologias assistivas.
Tipo	string
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()

href

Atributo	href
Descrição	URL do link. (obrigatório)
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. Valores inválidos usam native.
Tipo	"event" | "native"
Valor padrão	'native'

target

Atributo	target
Descrição	Target do link quando href é fornecido. Aceita _self, _blank, _parent ou _top. Valores inválidos usam _self.
Tipo	"_blank" | "_parent" | "_self" | "_top"
Valor padrão	'_self'

Slots

Nome	Descrição
"icon"	Slot para ícone personalizado da rede social.

Eventos

Evento	Descrição	Depreciação	Propagação
brMenuSocialClick	Evento canônico emitido quando o link de rede social é clicado.	---	true
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
brSocialClick Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.	Evento emitido quando o link de rede social é clicado.	Use brMenuSocialClick.	true

Migração de Navegação

Antes, br-menu-social usava url e podia renderizar uma estrutura interativa inválida.

Agora, use href. Quando href existe, o componente renderiza uma âncora real; sem href, renderiza um botão.

<!-- Antes -->
<br-menu-social url="/facebook" icon="facebook-f" aria-label="Facebook"></br-menu-social>

<!-- Agora -->
<br-menu-social
  href="/facebook"
  icon="facebook-f"
  aria-label="Facebook"
  navigation-mode="event"
></br-menu-social>

Use navigation-mode="event" somente para destinos internos controlados pelo roteador da SPA.

Dependências

Componente pai

• br-menu

Depende de

• br-icon

Gráfico