# Navbar

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

O cabeçalho do site: barra de utilidades (redes, links de outras unidades e o Portal), a barra principal com logotipo, links, os mega-menus Modalidades e Mais, a busca e o botão "Inscrever-se" — e, no celular, um menu que ocupa a tela. Fica fixo no topo e se recolhe ao rolar.

- Função: Navegação e estrutura
- Também chamado de: menu, cabeçalho, header, barra de navegação, mega-menu
- Mora em: `app/components/organisms/Navbar.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/Navbar](https://phorte-design-system.vercel.app/styleguide/peca/Navbar)
- Ficha no Storybook: [components-complex-navbar](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-navbar--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/Navbar/0](https://phorte-design-system.vercel.app/previa/Navbar/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 Navbar from '@/app/components/organisms/Navbar';

<Navbar />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/Navbar/0)
2. [Mega-menu por teclado](https://phorte-design-system.vercel.app/previa/Navbar/1)
3. [Menu em tela pequena](https://phorte-design-system.vercel.app/previa/Navbar/2)

Uma vez, no topo de toda página do site — o PageLayout já a inclui.

### Quando não usar

Para a trilha até a página atual, o Breadcrumb. Para um menu de ações de um item, o Dropdown. Numa página de campanha isolada, sem o site em volta, não use.

### Faça

- Use pelo PageLayout, que põe antes dela o link "Pular para o conteúdo".
- Edite os links nos arquivos de dados ao lado da peça (`navbarUtilityLinks`, `navbarMainLinks`, `navbarPortalLinks`, `navbarSocialLinks`): o computador e o celular leem dos mesmos (E70).
- Mude a altura pelas variáveis `--altura-faixa` e `--altura-barra` em `globals.css`: o espaçador, o deslocamento e o `scroll-padding-top` acompanham (E70).
- Use `isStaticPreview` só em vitrine: troca o `fixed` por `absolute`.

### Evite

- Uma segunda barra fixa no topo: as duas disputam o mesmo espaço e o conteúdo fica embaixo.
- Pôr `role="menu"` nos painéis: são blocos de links, não menu de aplicativo.

### Nota de uso

Navegação por teclado nos menus: setas, Home, End e Escape, com volta ao gatilho. Respeita `prefers-reduced-motion`. O painel é `role="group"` com `aria-labelledby`, e não `role="menu"` — é um bloco de links, e `menu` faria o leitor prometer um comportamento de aplicativo que não existe aqui. A raiz é `<header>` (landmark `banner`). A seção atual leva `aria-current="page"` e sublinhado de 2px — nunca só a cor. No celular, o painel é a própria `<nav>` "Menu principal", e a busca tem nome no botão e no campo.

### Anatomia

1. **Barra de utilidades** — Redes sociais, links de Cursos Livres e Graduação, as seções e o Portal; some ao rolar.
2. **Logotipo** — Link para o início da seção.
3. **Navegação principal** — `<nav>` "Navegação principal do site": Pós-Graduação e os gatilhos Modalidades e Mais.
4. **Mega-menu** — Painel de links (`role="group"`), aberto por clique, hover ou teclado.
5. **Busca** — Botão "Abrir busca" que mostra um campo "Buscar cursos".
6. **Inscrever-se** — Button com `href`, a chamada principal.
7. **Menu do celular** — A `<nav>` "Menu principal", em tela cheia abaixo da faixa, com a busca, as seções do topo e o "Mais" — das mesmas fontes do computador (E70).

### Estados

| Estado | O que muda |
| --- | --- |
| Topo da página | Barra de utilidades à mostra e sombra leve. |
| Rolada | A barra de utilidades recolhe (a barra sobe `--altura-faixa`: 40px no computador, 56px no celular) e a sombra fica mais forte. |
| Seção atual | Link com `aria-current="page"`, vermelho de interface e sublinhado de 2px. |
| Mega-menu aberto | Gatilho com `aria-expanded="true"` e o painel à mostra. |
| Busca aberta | "Abrir busca" vira "Fechar busca" e o campo aparece com o foco. |
| Menu do celular aberto | O painel ocupa a tela abaixo da barra; o botão vira "Fechar menu principal". |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Mega-menu aberto pelo teclado | O foco entra no primeiro link do painel; aberto pelo mouse, o foco fica onde estava. |
| Mouse sai do mega-menu | O painel fecha depois de 140ms — tempo de atravessar o vão sem fechar. |
| Foco sai do mega-menu | O painel fecha quando o foco deixa o gatilho e o painel, sem prender o Tab. |
| Enter na busca | Leva a `/cursos?q=…` com o termo e fecha a busca; com o campo vazio, não faz nada. |
| Troca de rota | Fecha menus e busca. |
| Clique fora da busca aberta | Fecha a busca — na cortina, na faixa de cima, onde for; clique no campo não fecha (E137). A cortina é só desenho: segura o clique para ele não seguir um link por baixo — testado na ficha. |
| Âncora dentro da página | Para abaixo da barra fixa: com a Navbar na página, o `html` ganha `scroll-padding-top: var(--altura-navbar)` (E70) — medido: 120px em 375, 124px em 1280. |
| Menu do celular | Tem os mesmos destinos do computador, inclusive "Suporte e Ajuda" e "Parcerias", que ele tinha perdido — conferido no teste da ficha. |
| Link para fora do site | Diz que abre em outra aba (E71): nos menus e no celular, o ícone e o texto; na faixa de cima, só o texto para o leitor, sem mudar o desenho dela. |

### Relacionados

- [LinkDeNavegacao](https://phorte-design-system.vercel.app/styleguide/md/LinkDeNavegacao.md) — O link da barra e da faixa, com a seção atual (E115).
- [PageLayout](https://phorte-design-system.vercel.app/styleguide/md/PageLayout.md) — O molde que já inclui a Navbar.
- [Breadcrumb](https://phorte-design-system.vercel.app/styleguide/md/Breadcrumb.md) — A trilha, abaixo da navegação.
- [Dropdown](https://phorte-design-system.vercel.app/styleguide/md/Dropdown.md) — Menu de ações, não de navegação.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `isStaticPreview` | `boolean` | `false` | não |  |

### Medidas

| Parte | Valor | Classe |
| --- | --- | --- |
| Links da barra de utilidades | texto de 14px; área de toque de 44px (medido) | `before:h-11 before:-translate-y-1/2` |
| Pós-Graduação, Modalidades e Mais | 44px de altura (medido) | `min-h-alvo-toque` |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--foreground` | #1A1A1A | `bg-ink`, `bg-ink/40`, `from-ink/12`, `text-ink`, `via-ink/5` |
| `--background` | #FAFAFA | `text-background`, `text-background/80`, `text-background/85` |
| `--muted-foreground` | #595959 | `bg-muted-foreground/20`, `border-muted-foreground/20`, `text-muted-foreground` |
| `--border` | #E5E5E5 | `border-border`, `border-border/80` |
| `--primary` | #D42B2B | `bg-primary`, `text-primary` |
| `--card` | #FFFFFF | `bg-card` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--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 | No computador: as quatro redes, os links da barra de utilidades, Portal, "Abrir busca", o logotipo, Pós-Graduação, Modalidades, Mais e "Inscrever-se" — medido em 1280px. |
| Enter / Espaço / ↓ | Num gatilho de mega-menu (Modalidades, Mais), abre o painel com o foco no primeiro link — medido. |
| ↓ / ↑ | Dentro do painel, anda entre os links, com volta — medido. |
| Home / End | Dentro do painel, vai ao primeiro ou ao último link — medido. |
| Esc | Fecha o painel e devolve o foco ao gatilho; na busca, fecha e devolve o foco a "Abrir busca" — medido. |
| Enter | Em "Abrir busca", abre o campo com o foco nele; no campo, busca. |
| Tab | No celular: "Abrir menu principal", o logotipo e "Buscar cursos". Com o menu aberto, o foco vai ao painel (ou ao campo, se aberto pela busca), e Esc fecha e devolve o foco ao botão que abriu ("Abrir menu principal" ou "Buscar cursos") — medido em 375px. O botão da barra principal, recolhido no topo da página, fica fora do Tab. |

### Leitor de tela

- A raiz é `<header>` (marco `banner`); há três `<nav>` com nomes diferentes: institucional, principal do site e, no celular, "Menu principal".
- Os painéis dos mega-menus são `role="group"` nomeados pelo gatilho, com links comuns — por isso cada link é uma parada de Tab.

### O que sustenta o estado

Usa os padrões: formulario, divulgacao, navegacao. Falta ouvir com leitor de tela: formulario, divulgacao, navegacao.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/Navbar.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-navbar--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

- `251416b` 2026-10-01 — E159: Testimonials — o vídeo toca dentro do cartão, YouTube e Vimeo
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/Navbar.tsx