Bootstrap: Barra de Navegação, Menus Suspensos e Offcanvas

Q: P: navbar-expand-lg recolhe abaixo de lg , mas quero que recolha mais cedo, abaixo de md . O que devo fazer?

R: Basta mudar o breakpoint para um menor: navbar-expand-md significa que expande horizontalmente em md e acima, e recolhe abaixo de md. Valores disponíveis: sm / md / lg / xl / xxl. Se omitir navbar-expand-*, ela estará sempre recolhida.

Q: P: Por que não consigo clicar no dropdown da navbar no mobile?

R: Certifique-se de que o gatilho do dropdown é uma tag ou contendo data-bs-toggle="dropdown", e de que o bundle JS do Bootstrap esteja incluído no final da página.

Q: P: A navbar pode ser fixada no topo?

R: Sim. Adicione a classe fixed-top para fixá-la no topo da viewport; você precisará então adicionar padding-top ao body para compensar a altura. Há também a opção sticky-top: ela rola normalmente e só fixa quando sai da viewport.

Q: P: A quais pontos devo me atentar quanto à Acessibilidade (A11y) da navbar?

R: Pontos-chave: (1) Use uma tag com um aria-label descrevendo a finalidade da navegação; (2) Use aria-controls no botão hambúrguer apontando para o ID do painel recolhível; (3) Adicione aria-current="page" ao link da página atual; (4) Use o estado aria-expanded no gatilho do dropdown. Os componentes JS do Bootstrap tratam automaticamente a maioria dos atributos ARIA.

Última atualização: 2026-08-26

1. Introdução ao Curso

(1) Pré-requisitos

Dominar o sistema de grade de 12 colunas e o uso responsivo de colunas (da Lição 7)
Estar familiarizado com offset-* e o controle de gutter

(2) 🎯 O que você vai aprender

Dominar a estrutura básica da navbar (navbar > container > navbar-nav)
Aprender a implementar o recolhimento responsivo usando navbar-expand-*
Dominar o uso do componente Dropdown (menu suspenso)
Dominar a configuração e o controle direcional do componente Offcanvas
Ser capaz de criar independentemente uma navbar responsiva completa para um site corporativo

(3) Pontos de Dor

O site da empresa de Bob precisa exibir uma navegação horizontal completa no desktop e recolher em um menu hambúrguer no mobile. Implementar uma navbar responsiva com HTML/CSS/JS puro exige muito código para lidar com layout, eventos e breakpoints.

(4) Solução

Usando o navbar-expand-* do Bootstrap junto com um botão hambúrguer, isso pode ser feito em cerca de 10 linhas de código. O componente navbar do Bootstrap integra recolhimento responsivo, menus suspensos e painéis off-canvas, permitindo que um único codebase se adapte a mobile e desktop.

(5) Benefícios

Usando a navbar do Bootstrap, Bob concluiu toda a navegação responsiva com apenas algumas linhas de código—ela expande horizontalmente no desktop e recolhe em um menu hambúrguer no mobile, com suporte a dropdown integrado.

HTML

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">Marca</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Início</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Recursos</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Preços</a></li>
      </ul>
    </div>
  </div>
</nav>

▶ Experimente

(1) Componentes Principais

Componente	Classe	Finalidade
Contêiner da Navbar	`navbar`	Declara a navbar e fornece layout flex
Breakpoint de Expansão	`navbar-expand-lg`	Expande horizontalmente em `lg` e acima, recolhe abaixo
Marca	`navbar-brand`	Logotipo / Nome do site
Botão Hambúrguer	`navbar-toggler`	Exibido no mobile, aciona o recolhimento ao clicar
Painel Recolhível	`collapse navbar-collapse`	O painel de menu controlado pelo botão hambúrguer
Lista de Navegação	`navbar-nav`	Lista de links de navegação (flex)
Item de Link	`nav-item` / `nav-link`	Um único link de navegação

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Site da Alice</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navDark">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navDark">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projetos</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contato</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <nav class="navbar navbar-expand-lg bg-primary navbar-dark mt-2">
    <div class="container">
      <a class="navbar-brand" href="#">Marca</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLight">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navLight">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>Redimensione o navegador para ver a navbar recolher em telas menores.</p>
  </div>

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

▶ Experimente

HTML

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="https://via.placeholder.com/30x30" alt="Logo" class="d-inline-block align-text-top me-2">
      Bootstrap
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navExt">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navExt">
      <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="#">Documentos</a></li>
      </ul>
      <form class="d-flex mx-2" role="search">
        <input class="form-control me-2" type="search" placeholder="Buscar">
        <button class="btn btn-outline-light" type="submit">Buscar</button>
      </form>
      <a href="#" class="btn btn-success">Cadastrar</a>
    </div>
  </div>
</nav>

▶ Experimente

4. Menus Suspensos (Dropdowns)

HTML

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    Menu Suspenso
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Ação</a></li>
    <li><a class="dropdown-item" href="#">Outra ação</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Link separado</a></li>
  </ul>
</li>

▶ Experimente

Elemento	Classe	Descrição
Gatilho	`dropdown-toggle`	Um botão dropdown com indicador de seta
Contêiner do Menu	`dropdown-menu`	O painel dropdown
Item de Menu	`dropdown-item`	Uma única opção
Divisor	`dropdown-divider`	Separa grupos de menu
Item Desabilitado	`dropdown-item disabled`	Cinza e não clicável

HTML

<div class="btn-group dropup">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Suspenso</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
  </ul>
</div>

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Conta</h6></li>
  <li><a class="dropdown-item" href="#">Perfil</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><h6 class="dropdown-header">Ajuda</h6></li>
  <li><a class="dropdown-item" href="#">Perguntas Frequentes</a></li>
</ul>

▶ Experimente

5. Componente Offcanvas

HTML

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Navegação Offcanvas</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="offcanvasNav">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title text-white">Menu</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Recursos</a></li>
          <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="#">Sobre</a></li>
              <li><a class="dropdown-item" href="#">Contato</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

▶ Experimente

(1) Offcanvas vs. Navegação Recolhível

Dimensão de Comparação	`collapse navbar-collapse`	`offcanvas`
Direção da Animação	Expande/recolhe verticalmente	Desliza a partir do lado
Backdrop	Nenhum	Sim (fundo semi-transparente)
Caso de Uso	Links simples (3-5 itens)	Menus de vários níveis + Busca + Painéis de usuário

(2) Direções do Offcanvas

Classe	Direção	Cenário
`offcanvas-start`	Desliza da esquerda	Navegação lateral
`offcanvas-end`	Desliza da direita	Carrinho de compras, notificações (padrão)
`offcanvas-top`	Desliza do topo	Painel de busca
`offcanvas-bottom`	Desliza de baixo	Filtragem no mobile

graph TD
    subgraph navbar
        A[.navbar] --> B[.container]
        B --> C[.navbar-brand Identificador da Marca]
        B --> D[.navbar-toggler Botão Hambúrguer]
        B --> E[.collapse .navbar-collapse Painel Recolhível]
        E --> F[.navbar-nav Lista de Navegação]
        F --> G[.nav-item Item de Link]
        G --> H[.nav-link Link]
        G --> I[.dropdown Menu Suspenso]
        I --> J[.dropdown-menu]
        J --> K[.dropdown-item]
        E --> L[Formulário de Busca / Botões etc.]
    end
    subgraph Coloring
        A --> M[bg-* Cor de Fundo]
        A --> N[navbar-dark / navbar-light Cor do Texto]
    end
    subgraph Positioning
        A --> O[fixed-top / fixed-bottom / sticky-top]
    end

valor de navbar-expand	Comportamento de Recolhimento	Tela de Expansão Horizontal	Cenário Típico
Não especificado	Sempre recolhe	Nenhum	Navegação somente mobile
`navbar-expand-sm`	Recolhe <576px	>=576px	Celulares grandes+
`navbar-expand-md`	Recolhe <768px	>=768px	Tablets+
`navbar-expand-lg`	Recolhe <992px	>=992px	Desktop+ (mais comum)
`navbar-expand-xl`	Recolhe <1200px	>=1200px	Desktop grande
`navbar-expand-xxl`	Recolhe <1400px	>=1400px	Telas extra-grandes

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Fixa no Topo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { padding-top: 56px; }
    .scroll-content { height: 1500px; background: linear-gradient(#f8f9fa, #e9ecef); }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Barra Superior</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navFixed">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navFixed">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Recursos</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Preços</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Sobre</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container scroll-content d-flex justify-content-center align-items-center">
    <p class="text-muted">fixed-top fixa a navbar no topo da viewport; ela permanece visível ao rolar a página.</p>
  </div>

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

▶ Experimente

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar com Busca</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">MyApp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navSearch">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navSearch">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link active" href="#">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Explorar</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Favoritos</a></li>
        </ul>
        <form class="d-flex me-2" role="search">
          <input class="form-control me-2" type="search" placeholder="Buscar..." aria-label="Buscar">
          <button class="btn btn-outline-primary" type="submit">Buscar</button>
        </form>
        <a href="#" class="btn btn-primary">Entrar</a>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>A navbar inclui uma caixa de busca e um botão de login; todos são recolhidos no menu hambúrguer quando recolhida.</p>
  </div>

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

▶ Experimente

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mega Dropdown</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .mega-menu { min-width: 400px; padding: 1rem; }
    @media (max-width: 991.98px) { .mega-menu { min-width: auto; } }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Mega Loja</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMega">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMega">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Categorias de Produtos</a>
            <div class="dropdown-menu mega-menu p-4">
              <div class="row g-3">
                <div class="col-6">
                  <h6 class="dropdown-header">Eletrônicos</h6>
                  <a class="dropdown-item" href="#">Telefones</a>
                  <a class="dropdown-item" href="#">Computadores</a>
                  <a class="dropdown-item" href="#">Fones de Ouvido</a>
                  <a class="dropdown-item" href="#">Acessórios</a>
                </div>
                <div class="col-6">
                  <h6 class="dropdown-header">Casa & Decoração</h6>
                  <a class="dropdown-item" href="#">Móveis</a>
                  <a class="dropdown-item" href="#">Utensílios de Cozinha</a>
                  <a class="dropdown-item" href="#">Têxteis</a>
                  <a class="dropdown-item" href="#">Armazenamento</a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Novidades</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Promoções</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <p>O Mega Menu usa `dropdown-menu` + uma Grade interna para criar um layout de várias colunas, adequado para navegação com muitas categorias.</p>
  </div>

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

▶ Experimente

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Transparente</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background: rgba(0,0,0,0.3); backdrop-filter: blur(4px);">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Marca</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navTrans">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navTrans">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Trabalhos</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>
      </div>
    </div>
  </nav>

  <div class="d-flex justify-content-center align-items-center text-white" style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="text-center">
      <h1 class="display-3 fw-bold">Estúdio de Design Criativo</h1>
      <p class="lead">Contamos histórias de marca através do design</p>
      <a href="#" class="btn btn-light btn-lg mt-3">Saiba Mais</a>
    </div>
  </div>

  <div class="container py-5">
    <p>A navbar transparente sobrepõe o fundo do Hero, sobrepondo-se ao conteúdo ao rolar. `backdrop-filter: blur(4px)` melhora a legibilidade.</p>
  </div>

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

▶ Experimente

❓ Perguntas Frequentes

📖 Resumo

Estrutura da navbar: navbar > container > navbar-brand + navbar-toggler + collapse navbar-collapse
navbar-expand-{breakpoint} controla o breakpoint de recolhimento; bg-* + navbar-{light/dark} controla o esquema de cores
Use o componente dropdown para menus suspensos; dropdown-toggle + data-bs-toggle="dropdown" implementa o alternar
O componente Offcanvas oferece uma melhor experiência de navegação mobile

📝 Exercícios

⭐ Crie uma navbar completa para site corporativo: fundo escuro, logotipo da marca à esquerda, links de menu à direita (Início / Sobre / Serviços / Contato), com Serviços contendo um submenu dropdown.
⭐⭐ Mude o método de recolhimento da navbar para Offcanvas (desliza a partir do lado). Adicione uma caixa de busca e um botão de login de usuário dentro do painel Offcanvas.
⭐⭐⭐ Crie uma barra de ferramentas inferior: use fixed-bottom para posicionamento fixo, contendo 4 links de ícone, simulando a navegação inferior de um app mobile.

Lição Anterior: Grade · Próxima Lição: Botões e Grupos de Botões

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós

Bootstrap: Barra de Navegação, Menus Suspensos e Offcanvas

1. Introdução ao Curso

(1) Pré-requisitos

(2) 🎯 O que você vai aprender

(3) Pontos de Dor

(4) Solução

(5) Benefícios

2. Estrutura Básica da Navbar

(1) Componentes Principais

▶ Exemplo: Navbar Temática

3. Conteúdo Avançado da Navbar

4. Menus Suspensos (Dropdowns)

5. Componente Offcanvas

(1) Offcanvas vs. Navegação Recolhível

(2) Direções do Offcanvas

6. Diagrama e Referência de Componentes da Navbar

(1) Hierarquia de Componentes da Navbar

(2) Referência de Comportamento por Breakpoint da Navbar

▶ Exemplo: Navbar Fixa no Topo

▶ Exemplo: Navbar com Busca e Botões

▶ Exemplo: Navbar Transparente sobre o Hero

❓ Perguntas Frequentes

📖 Resumo

📝 Exercícios

Bootstrap: Barra de Navegação, Menus Suspensos e Offcanvas

1. Introdução ao Curso

(1) Pré-requisitos

(2) 🎯 O que você vai aprender

(3) Pontos de Dor

(4) Solução

(5) Benefícios

2. Estrutura Básica da Navbar

(1) Componentes Principais

▶ Exemplo: Navbar Temática

3. Conteúdo Avançado da Navbar

4. Menus Suspensos (Dropdowns)

(1) Variações de Dropdown

5. Componente Offcanvas

(1) Offcanvas vs. Navegação Recolhível

(2) Direções do Offcanvas

6. Diagrama e Referência de Componentes da Navbar

(1) Hierarquia de Componentes da Navbar

(2) Referência de Comportamento por Breakpoint da Navbar

▶ Exemplo: Navbar Fixa no Topo

▶ Exemplo: Navbar com Busca e Botões

▶ Exemplo: Dropdown Mega Menu

▶ Exemplo: Navbar Transparente sobre o Hero

❓ Perguntas Frequentes

📖 Resumo

📝 Exercícios