# LinkDeNavegacao

> Componentes / Navegação e estrutura · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

O link de uma barra de navegação — a principal, clara, ou a faixa escura de cima —, que diz qual é a seção atual: `aria-current="page"` para quem ouve e sublinhado para quem vê. É o link da Navbar, tirado de dentro dela.

- Função: Navegação e estrutura
- Também chamado de: nav link, link de menu, item da barra, link ativo, aba de navegação
- Mora em: `app/components/atoms/LinkDeNavegacao.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/LinkDeNavegacao](https://phorte-design-system.vercel.app/styleguide/peca/LinkDeNavegacao)
- Ficha no Storybook: [components-base-linkdenavegacao](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-base-linkdenavegacao--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/LinkDeNavegacao/0](https://phorte-design-system.vercel.app/previa/LinkDeNavegacao/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import { LinkDeNavegacao } from '@/app/components/atoms/LinkDeNavegacao';

<LinkDeNavegacao href={…}>…</LinkDeNavegacao>
```

O `…` marca as props obrigatórias — ver *Propriedades*.

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/LinkDeNavegacao/0)
2. [Escura](https://phorte-design-system.vercel.app/previa/LinkDeNavegacao/1)

Numa barra de navegação entre seções do site, em que uma delas é a atual: a barra principal e a faixa de cima da Navbar.

### Quando não usar

Dentro de um texto: o Link. Com cara de botão ("Inscreva-se"): o Button com `href`. Para trocar conteúdo na mesma página: as Abas. Para a trilha de páginas: o Breadcrumb.

### Faça

- Passe `atual` só na seção em que a pessoa está.
- Use `superficie="escura"` sobre fundo escuro, e a clara (padrão) sobre a barra branca.
- Ponha os links dentro de um `<nav>` com nome ("Navegação principal do site").

### Evite

- Marcar a atual só pela cor: o sublinhado é o que distingue para quem não vê o vermelho.
- Mais de um `atual` na mesma barra.
- Ícone de nova aba na faixa: ela é compacta; o aviso vai para o leitor de tela.

### Anatomia

1. **Link clara** — 16px, semibold, `--ink`; atual em `--primary` com sublinhado de 2px afastado 8px; 44px de alvo.
2. **Link escura** — 14px, medium, claro a 70% (atual a 100%, sublinhado de 2px afastado 4px); a área de toque de 44px é um pseudo-elemento, e a faixa segue com 40px.

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | Cor do texto da barra. |
| Hover | Na clara, `--primary`; na escura, claro a 90%. |
| Atual | Sublinhado de 2px e `aria-current="page"` — nunca só a cor. |
| Foco | Anel de 2px (`--ring` na clara, `--ring-inverse` na escura). |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Endereço interno | Navega pelo roteador do Next, sem recarregar a página. |
| Com `novaAba` | Abre em outra aba, com `rel="noopener noreferrer"`, e o nome diz "(abre em nova aba)" — testado na ficha. |
| Seção atual | Só a atual diz `aria-current` e é sublinhada — testado na ficha. |

### Relacionados

- [Navbar](https://phorte-design-system.vercel.app/styleguide/md/Navbar.md) — Onde ele mora: barra principal e faixa de cima.
- [Link](https://phorte-design-system.vercel.app/styleguide/md/Link.md) — O link dentro do texto.
- [Breadcrumb](https://phorte-design-system.vercel.app/styleguide/md/Breadcrumb.md) — A trilha até a página atual.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `superficie` | `'clara' \| 'escura'` | `'clara'` | não | Variante do `cva`. |
| `atual` | `boolean` | `false` | não | É a seção em que a pessoa está: `aria-current="page"` e o sublinhado. |
| `href` | `string` | — | sim |  |
| `novaAba` | `boolean` | `false` | não | Abre em outra aba: `target`, `rel` e "(abre em nova aba)" para quem ouve. Sem ícone, de propósito — a barra é compacta; o link de texto com ícone é o `Link` com `novaAba`. |

Aceita também: `Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>`.

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--background` | #FAFAFA | `text-background`, `text-background/70`, `text-background/90` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--primary` | #D42B2B | `text-primary` |
| `--ring` | var(--footer-red)), decisão da revisão 2. Se outra peça precisar
   * dele como superfície, o nome vira de papel (ex.: --surface-brand-strong). */
  --footer-red: #7D1B1B | `ring-ring` |
| `--ring-inverse` | #FAFAFA | `ring-ring-inverse` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Passa pelos links da barra, na ordem. |
| Enter | Segue o link. |

### Leitor de tela

- O leitor diz "página atual" na seção em que a pessoa está.
- A área de toque tem 44px nas duas superfícies; na faixa, por pseudo-elemento, sem mudar o desenho.

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/atoms/LinkDeNavegacao.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-base-linkdenavegacao--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `0298af8` 2026-09-30 — E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/atoms/LinkDeNavegacao.tsx