Como Criar uma Navbar Moderna com Bootstrap 5 e Botão de 4 Quadradinhos (Grid Menu)

Se você está criando um site profissional e quer uma navegação elegante, responsiva e com personalidade, este tutorial é pra você!

Aqui, vamos te mostrar como construir uma navbar completa usando Bootstrap 5, com um detalhe visual que chama atenção: um botão mobile no estilo grid, com 4 quadradinhos brancos, moderno, fácil de identificar e perfeito para destacar seu design.

Você verá o código organizado, comentado e separado por arquivos, pronto para copiar e usar em seus projetos.

🎯 O que vamos criar:

Menu responsivo com Bootstrap 5
Fundo escuro, seguindo identidade visual
Links com efeito hover laranja
Botão mobile com ícone de 4 quadradinhos (custom grid)
CSS separado e bem estruturado

💻 1. HTML – Estrutura da Página

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navbar com Botão Grid</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- CSS externo -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- NAVBAR -->
  <nav class="navbar navbar-expand-lg">
    <div class="container">
      <!-- Logo -->
      <a class="navbar-brand fw-bold" href="#">JVV Agência</a>

      <!-- Botão Mobile -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
        <span class="grid-icon">
          <div></div><div></div><div></div><div></div>
        </span>
      </button>

      <!-- Menu responsivo -->
      <div class="collapse navbar-collapse" id="menu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Serviços</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projetos</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contato</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

🎨 2. CSS – Estilo Separado (style.css)

/* Fundo escuro do corpo */
body {
  background-color: #121212;
  color: white;
}

/* Navbar escura personalizada */
.navbar {
  background-color: #1c1c1c;
}

/* Links da navbar */
.navbar-brand,
.nav-link {
  color: #ffffff !important;
}

/* Hover laranja da identidade */
.nav-link:hover {
  color: #ff6a00 !important;
}

/* Ícone de 4 quadradinhos estilo "grid" */
.grid-icon {
  width: 24px;
  height: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

.grid-icon div {
  background-color: white;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Remove borda do botão mobile */
.navbar-toggler {
  border: none;
}

🧠 Por que usar esse tipo de botão?

O botão de 4 quadradinhos foge do visual comum do "hambúrguer". Ele:

Se destaca mais no fundo escuro
Traz modernidade para o projeto
É fácil de ver e clicar em dispositivos móveis
Valoriza a identidade da sua marca

✅ Conclusão

Com poucas linhas e uma estrutura bem organizada, você consegue montar uma navbar profissional e elegante. Esse estilo é perfeito para portfólios, sites institucionais, landing pages e sistemas internos, e ainda demonstra cuidado com o design responsivo.

Use este template como base para seus projetos, personalize os links, cores e responsividade conforme sua necessidade.

💬 Gostou desse tutorial? Salve, compartilhe e acompanhe nossos próximos artigos aqui no blog da JVV. Toda semana, um novo conteúdo para quem cria, vende e constrói no digital.