Navbar, Menus e Navegação

No Bootstrap, a navbar foi projetada para ser extremamente flexível, permitindo desde um menu simples até estruturas completas com logo, busca, botões e dropdowns, totalmente adaptáveis a qualquer tamanho de tela.

---

Estrutura Básica da Navbar

A estrutura mínima de uma navbar é composta por:

• Um container

• Um título ou logo

• Um conjunto de links

Copy<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" 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="#">Contato</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

---

Navbar Responsiva com Menu Colapsável

Quando vista em telas pequenas, a navbar pode se transformar automaticamente em um botão de menu (hambúrguer) usando o sistema de colapso.

Copy<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">MeuSite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="menuNavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Início</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Portfólio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sobre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contato</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Buscar">
        <button class="btn btn-outline-light" type="submit">Buscar</button>
      </form>
    </div>
  </div>
</nav>

Nesta estrutura, o menu se adapta:

• Desktop → Links aparecem normalmente.

• Mobile → Links ficam escondidos e são exibidos quando clica no botão de hambúrguer.

---

Adicionando Dropdowns na Navbar

Dropdowns são menus suspensos, ideais para agrupar links relacionados.

Copy<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    Produtos
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Template 1</a></li>
    <li><a class="dropdown-item" href="#">Template 2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Ver todos</a></li>
  </ul>
</li>

O dropdown pode ser colocado dentro de qualquer <ul class="navbar-nav">.

---

Navbar com Itens à Direita e Itens à Esquerda

Use utilitários como me-auto ou ms-auto para controlar o alinhamento.

CopyhtmlCopiarEditar<ul class="navbar-nav me-auto">
  <li class="nav-item">
    <a class="nav-link" href="#">Início</a>
  </li>
</ul>

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </li>
</ul>

me-auto → empurra os itens seguintes para a direita.
ms-auto → empurra os itens anteriores para a esquerda.

---

Cores e Temas

O Bootstrap possui duas opções nativas de tema: claro e escuro, além da possibilidade de usar qualquer cor de fundo.

Exemplos:

Copy<nav class="navbar navbar-dark bg-dark">...</nav>
<nav class="navbar navbar-light bg-light">...</nav>
<nav class="navbar navbar-dark bg-primary">...</nav>

---

Navbar Fixa no Topo ou no Rodapé

• Fixa no topo:

Copy<nav class="navbar fixed-top navbar-dark bg-dark">...</nav>

• Fixa no rodapé:

Copy<nav class="navbar fixed-bottom navbar-dark bg-dark">...</nav>

• Navbar que desliza com a página (sticky):

Copy<nav class="navbar sticky-top navbar-dark bg-dark">...</nav>

---

Barra Simples sem Colapsável

Se você deseja uma barra de navegação simples, sem necessidade de colapso para mobile, pode remover os elementos de navbar-toggler e collapse e deixar apenas o conteúdo direto.

Copy<nav class="navbar navbar-expand">
  <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contato</a>
      </li>
    </ul>
  </div>
</nav>

---

Boas Práticas

• Sempre use o navbar-expand-* para definir a partir de que tamanho o menu deixa de ser colapsável. Ex.: navbar-expand-md, navbar-expand-lg.

• Use container dentro da navbar para limitar a largura e centralizar o conteúdo, ou container-fluid se desejar ocupar toda a largura.

• Organize a navegação agrupando itens relacionados usando dropdowns quando necessário.

---

O componente Navbar é altamente adaptável e pode ser utilizado tanto para sites simples quanto para sistemas mais complexos, sempre oferecendo uma experiência responsiva e consistente.