Dia 9: Navegação responsiva

Um bom menu funciona em qualquer lugar. Aprenda a adaptar o cabeçalho do seu site para desktop, tablet e celular.

A experiência em cada tela

A navegação principal é o mapa do seu site. Em um desktop, temos muito espaço horizontal para exibir todos os links. Em um celular, o espaço é limitado e a interação é feita com o toque. Por isso, não podemos simplesmente "espremer" o menu do desktop no mobile. Precisamos repensar e adaptar a estrutura para cada contexto.

Os três estados da navegação

Para criar uma experiência consistente, geralmente projetamos a navegação para três "breakpoints" (pontos de quebra) principais:

Desktop (Telas > 1024px): A versão completa. Todos os links principais são visíveis em uma barra horizontal para acesso rápido.
Tablet (Telas ~768px): O ponto de transição. Muitas vezes, o texto de alguns botões é substituído por ícones, ou o menu de links já é agrupado sob um ícone "hambúrguer" (☰).
Mobile (Telas < 768px): O menu hambúrguer é essencial. Ao ser tocado, ele abre um menu lateral (drawer) ou uma sobreposição em tela cheia (overlay) com os links de navegação.

Mesmo cabeçalho se adaptando para 3 tamanhos de tela

Vídeo para criar menus adaptativos

Aprenda a usar o poder do Auto Layout e das Variantes no Figma para criar um único componente de menu que se adapta a todas as telas.

Criando um Header Navigation Responsivo com Variáveis no Figma (Canal Eduardo Amaral)

Seu desafio de hoje: o menu que se transforma

Usando o Figma, sua missão é projetar as **três versões** do cabeçalho que já implementamos em código para o nosso site de desafios.

Checklist do desafio:

Crie uma variante para Desktop (largura de 1440px), com todos os elementos visíveis horizontalmente.
Crie uma variante para Tablet (largura de 768px), onde o menu de links já foi substituído pelo ícone hambúrguer.
Crie uma variante para Mobile (largura de 375px), mostrando o cabeçalho compacto e, ao lado, uma simulação de como o menu lateral apareceria ao ser aberto.