menu-social

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.

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	Ícone da rede social
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"	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

Dependências

Componente pai

• br-menu

Depende de

• br-icon

Gráfico

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.