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.

Componentes que seguem o contrato

Todos os componentes abaixo usam navigation-mode="native" por padrão e aceitam navigation-mode="event" para integração com SPA:

Componente	Elemento navegável	Observação
br-link	<a> próprio	Mantém isSpaLinkBehavior e brSpaNavigate somente como aliases depreciados.
br-item	<a> próprio	Também pode renderizar botão quando não há href.
br-breadcrumb	Links dos itens e Home	navigation-mode é configurado no componente pai.
br-menu-link	<a> próprio	O destino é sempre href; url é apenas alias/slot legado de conteúdo.
br-menu-item	br-item interno	Itens expansíveis continuam sendo controles de menu.
br-menu-social	<a> ou botão	Só usa o modo SPA quando possui href.
br-header, br-header-link, br-header-function	Links internos ou br-item	Ações sem href continuam sendo botões.
br-header-logo	<a> quando possui href	Sem destino, permanece não navegável.
br-sign-in	<a> ou botão	href define o modo link.
br-footer-item	br-item interno	Encaminha navigation-mode para o item.
br-footer-logo, br-footer-social	<a> quando possuem href	Destinos externos e target diferente de _self permanecem nativos.
br-cookiebar-link	<a>	Mantém href real no host.

Componentes compostos encaminham a propriedade e o evento do elemento navegável. O consumidor deve escutar brNavigate no componente usado na marcação; o payload mantém event e href em todos os casos.

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.
• O contrato de cada componente também aparece na seção Migração de Navegação da sua documentação específica.