Navegacao dos componentes

Os componentes navegáveis seguem o mesmo contrato: por padrão, comportam-se como links HTML comuns. Isso preserva acessibilidade, SEO, copiar link, abrir em nova aba, histórico do navegador e comportamento esperado por tecnologias assistivas.

Padrão nativo

O modo padrão é navigation-mode="native". Quando existe destino, o componente renderiza uma âncora real e deixa o navegador decidir a navegação.

<br-link href="/servicos">Serviços</br-link>

Integração com SPAs

SPAs podem assumir a navegação usando navigation-mode="event".

<br-link href="/servicos" navigation-mode="event">Servicos</br-link>

document.addEventListener('brNavigate', (event) => {
  event.preventDefault();
  router.navigate(event.detail.href);
});

O evento brNavigate é cancelável. Com preventDefault(), o componente bloqueia a navegação nativa. Sem cancelamento, o navegador segue normalmente.

Modos

Modo	Comportamento
native	Padrão. Mantém a navegação do navegador e não exige código da aplicação.
event	Emite brNavigate para integração com roteadores SPA. Só bloqueia o reload quando o evento é cancelado.

Regras

• Todo componente que representa navegação deve manter um href real.
• navigation-mode aceita native e event, com default native.
• brNavigate é cancelável, composto e propagado.
• O componente não chama window.history.pushState nem conhece o roteador da aplicação.
• Cliques modificados, clique do meio e target diferente de _self permanecem nativos.
• target="_blank" usa rel="noopener noreferrer" quando a âncora é renderizada pelo componente.
• Estados desabilitados não navegam nem emitem brNavigate.