Pular para o conteúdo
Faculdade PhorteDesign System

LinkDeNavegacao

Em andamento

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
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

1280px, em tamanho real

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Escura

Quando usar

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.

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.

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.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  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

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PadrãoCor do texto da barra.
HoverNa clara, --primary; na escura, claro a 90%.
AtualSublinhado de 2px e aria-current="page" — nunca só a cor.
FocoAnel de 2px (--ring na clara, --ring-inverse na escura).

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Endereço internoNavega 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 atualSó a atual diz aria-current e é sublinhada — testado na ficha.

Relacionados