Pular para o conteúdo
Faculdade PhorteDesign System

Navbar

Em andamento

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
Última mudança
2026-10-01
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. Mega-menu por teclado
  3. Menu em tela pequena

Quando usar

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

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.

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.

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

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

  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

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
Topo da páginaBarra de utilidades à mostra e sombra leve.
RoladaA barra de utilidades recolhe (a barra sobe --altura-faixa: 40px no computador, 56px no celular) e a sombra fica mais forte.
Seção atualLink com aria-current="page", vermelho de interface e sublinhado de 2px.
Mega-menu abertoGatilho 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 abertoO painel ocupa a tela abaixo da barra; o botão vira "Fechar menu principal".

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Mega-menu aberto pelo tecladoO foco entra no primeiro link do painel; aberto pelo mouse, o foco fica onde estava.
Mouse sai do mega-menuO painel fecha depois de 140ms — tempo de atravessar o vão sem fechar.
Foco sai do mega-menuO painel fecha quando o foco deixa o gatilho e o painel, sem prender o Tab.
Enter na buscaLeva a /cursos?q=… com o termo e fecha a busca; com o campo vazio, não faz nada.
Troca de rotaFecha menus e busca.
Clique fora da busca abertaFecha 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áginaPara 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 celularTem os mesmos destinos do computador, inclusive "Suporte e Ajuda" e "Parcerias", que ele tinha perdido — conferido no teste da ficha.
Link para fora do siteDiz 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