Introdução

O componente Anchor é um wrapper de hiperlink estilizado (<a>) usado para roteamento interno suave do site e navegação web externa segura. Ele gerencia automaticamente os padrões de segurança de acessibilidade (como anexar tags de segurança de destino para links externos) e coordena as paletas de cores.

Este componente está totalmente integrado como um bloco link dentro do Page Builder, permitindo que redatores de conteúdo e administradores de CMS construam, organizem e estilizem links de texto, links de ícone ou chamadas à ação diretamente.

Uso

Essas configurações representam exatamente como os itens de bloco do page-builder são construídos.

1. Link de navegação simples (variante sublinhada)

Um hiperlink textual padrão com o estilo de indicador de sublinhado padrão. Ideal para links de texto inline, rodapés e listas de navegação secundárias genéricas.

{
  "blockType": "link",
  "href": "/docs",
  "variant": "underline",
  "colorPalette": "blue",
  "children": [
    {
      "blockType": "text",
      "content": "Go to Documentation"
    }
  ]
}

2. Link de ação sem estilo (tipo plain)

Renderiza um link com a cor de texto padrão e remove o estilo de sublinhado padrão, preservando o estilo de layout para menus personalizados, itens de cabeçalho ou barras laterais.

{
  "blockType": "link",
  "href": "/blog",
  "variant": "plain",
  "colorPalette": "slate",
  "children": [
    {
      "blockType": "text",
      "content": "Read our Blog"
    }
  ]
}

3. Link externo seguro em aba (acento roxo)

Abre sites externos com segurança em uma nova aba do navegador. O mecanismo subjacente injeta automaticamente atributos de segurança obrigatórios para proteger o escopo do navegador do usuário.

{
  "blockType": "link",
  "href": "https://github.com",
  "target": "_blank",
  "colorPalette": "purple",
  "children": [
    {
      "blockType": "text",
      "content": "Open GitHub Profile ↗"
    }
  ]
}

Propriedades

Notas para desenvolvedores e acessibilidade

• Tratamento seguro de destino: Ao navegar com target="_blank", o componente anexa automaticamente rel="noopener noreferrer". Isso garante segurança absoluta contra scripts de redirecionamento maliciosos executados nos escopos da janela pai (window.opener).
• Links de roteador interativos: Nos bastidores, se asChild estiver habilitado, os estilos da âncora e as propriedades de destino seguro são mesclados automaticamente diretamente sobre componentes de roteador personalizados (por exemplo, estruturas <Link> do framework) sem renderizar divisores <a> de wrapper desnecessários.
• Acesso por teclado: Como isso é renderizado como um link HTML nativo, a navegação completa pela tecla Tab, os contornos de hover e o acionamento de cliques pela tecla Enter operam nativamente em todos os clientes sem JS adicional do lado do cliente.