Como Criar Menus de Navegação com Bootstrap 5: Exemplos Práticos e Prontos para Usar

João Victor
João Victor
Publicado em 16 de maio de 2025
90
Como Criar Menus de Navegação com Bootstrap 5: Exemplos Práticos e Prontos para Usar

Como Criar Menus de Navegação com Bootstrap 5: Exemplos Práticos e Prontos para Usar

Uma das primeiras necessidades ao criar um site moderno é ter um menu de navegação funcional, bonito e responsivo. O Bootstrap 5 oferece diversos componentes para isso — desde nav simples até navbars completas com dropdowns.

Neste artigo, você vai ver exemplos de diferentes tipos de navegação, com códigos comentados e prontos para copiar e colar no seu projeto.

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

  <div class="container py-5">
    <h1 class="mb-4">Exemplos de Navegação com Bootstrap 5</h1>

    <!-- 1. Navegação horizontal simples -->
    <h3>1. Navegação Horizontal Simples</h3>
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Início</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sobre</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Serviços</a>
      </li>
    </ul>
    <hr>

    <!-- 2. Navegação vertical -->
    <h3>2. Navegação Vertical</h3>
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" href="#">Painel</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Usuários</a>
      </li>
    </ul>
    <hr>

    <!-- 3. Navbar responsiva padrão -->
    <h3>3. Navbar Responsiva</h3>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">MinhaMarca</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar1">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contato</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <hr>

    <!-- 4. Navbar com dropdown -->
    <h3>4. Navbar com Dropdown</h3>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Exemplo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar2">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar2">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mais</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Opção 1</a></li>
                <li><a class="dropdown-item" href="#">Opção 2</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <hr>

  </div>

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

Criar menus de navegação modernos e responsivos é uma das tarefas mais comuns, e também mais importantes, no desenvolvimento web. Com o Bootstrap 5, você não precisa reinventar a roda: a biblioteca já oferece componentes prontos, testados e personalizáveis para entregar uma ótima experiência ao usuário, em qualquer dispositivo.

Neste artigo, você viu exemplos práticos de como criar desde uma nav simples horizontal ou vertical, até navbars completas com responsividade e dropdowns. Com essas bases, você já pode aplicar em seus projetos reais e, aos poucos, adaptar ao seu layout e identidade visual.

Fique de olho aqui no blog, porque nos próximos artigos vamos explorar mais componentes úteis do Bootstrap e boas práticas para quem quer dominar o front-end moderno!