NavLink
NavLink é o link que preenche um Navbar ou outra lista compacta de rotas. Escolha-o para um destino; escolha Button quando o controle executa trabalho em vez de levar a pessoa a algum lugar.
Exemplos
Destino atual
Defina active somente para a rota exibida. Ele dá ao link o tratamento selecionado e mantém
aria-current="page" alinhado ao que a pessoa vê.
Link composto do framework
Use asChild quando o router precisar ser dono da âncora. NavLink então fornece suas classes e a
semântica de página atual sem substituir routing, prefetching ou o comportamento de
modifier-click.
Quando usar
Use NavLink para um conjunto curto e persistente de destinos de página, especialmente dentro de Navbar.
Prefira outro componente quando:
- O seletor de rotas precisa de marca, ações e estrutura de página — use Navbar; NavLink preenche seu slot de navegação.
- Os destinos são visualizações pares na página atual — use Tabs.
- O controle inicia ou confirma trabalho — use Button.
Acessibilidade
- Por padrão, NavLink renderiza uma
<a>nativa. Dê a ela umhrefreal e um nome que identifique o destino. activeadicionaaria-current="page". Defina-o em um link da página atual, não em um destino futuro ou pendente.- Seu indicador de foco aparece em
:focus-visible; não o remova. - Com
asChild, forneça exatamente um elemento de link válido. Esse filho mantém a responsabilidade porhref, comportamento de teclado e nome acessível.
API e código
| Nome | Tipo | Obrigatória | Descrição |
|---|---|---|---|
active | boolean | — | Marks the destination as the current page. |
asChild | boolean | — | Render the single child element instead of an `<a>`, preserving its routing behavior. |
children | ReactNode | — | Link content. Must be exactly one element when `asChild` is enabled. |
Use uma âncora para cada destino e declare diretamente a página atual:
<a class="lyra-navlink lyra-navlink--active" href="/overview" aria-current="page">Visão geral</a>
<a class="lyra-navlink" href="/projects">Projetos</a><lyra:nav-link> Gerado do lyra-ds/blade v0.10.0.
| Prop | Padrão | Obrigatória | Valores de exemplo |
|---|---|---|---|
active | false | — | — |
<lyra:nav-link href="/projects" active>Projects</lyra:nav-link>