Como criar um menu horizontal com React.js

Se você está tentando colocar três links lado a lado usando React, provavelmente tá enfrentando o clássico problema de alinhamento. Aqui vai uma dica rápida e prática.

Solução rápida

A forma mais simples é usar CSS. Você pode aplicar display: flex na container do seu menu:

// Componente React
function Menu() {
  return (
    <nav style={{ display: 'flex', gap: '10px' }}>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </nav>
  ). }

Dessa forma, os links ficam na mesma linha, com espaçamento ajustável. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta.

Por que funciona?

display: flex faz os elementos filhos ficarem na mesma linha por padrão. O gap ajuda a separar eles sem precisar de margens extras. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois.

Perguntas para a comunidade

• Vocês costumam usar estilos inline ou preferem classes e CSS Modules?
• Já tiveram problemas com alinhamento em menus responsivos?
• Alguma dica de boas práticas pra esse tipo de layout?

Vamos trocar ideia!

---

E aí, alguém tem uma abordagem diferente?