Há um componente chamado NavBar que permite criar menu no Bootstrap. Esse menu fica responsivo e bastante personalizável em seu site.
O componente NavBar é importante porque fornece uma navegação fácil e intuitiva para os usuários em um site. Suas vantagens incluem a capacidade de ser responsivo, se adaptando a diferentes dispositivos, além de oferecer opções de personalização para se adequar ao design do site.
Vamos ver como criar um menu no Bootstrap com o componente NavBar.
Links CDN
CDN são servidores na internet que disponibilizam conteúdo através de links. Nesse caso, o conteúdo são os pacotes para JQuery, CSS e bootstrap.
A primeira coisa a se fazer é adicionar em nosso HTML os links CDNs ou baixá-los para nosso pc. Usar apenas o link é muito mais fácil.
Coloquei dentro da entre as tags <head> e </head> as linhas abaixo:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
Esses links podem ser pegos de outros servidores CDNs, conforme você desejar.
Classes NavBar do BootStrap para Criação de Menus
Apenas para referência:
- navbar: Define o contêiner principal da barra de navegação. Pode ser aplicada à maioria dos elementos, mas uma âncora funciona melhor, pois alguns elementos podem exigir classes utilitárias ou estilos personalizados.
- navbar-expand: Controla o comportamento responsivo da barra de navegação, permitindo que ela seja expandida em dispositivos móveis.
- navbar-light (ou navbar-dark): Define o esquema de cores da barra de navegação como claro (light) ou escuro (dark).
- .navbar-toggler: para uso com o plugin do Bootstrap de recolhimento e outros comportamentos de alternância de navegação.
- .navbar-text: para adicionar strings de texto centralizadas verticalmente.
- .collapse.navbar-collapse para agrupar e ocultar o conteúdo da barra de navegação por um ponto de interrupção pai.
- bg-light (ou bg-dark): Define o esquema de cores de fundo da barra de navegação como claro (light) ou escuro (dark).
- navbar-nav: Define o contêiner dos itens da barra de navegação. É usado para uma navegação leve e completa, incluindo suporte para menus suspensos.
- nav-item: Define um item individual na barra de navegação.
- nav-link: Define um link dentro de um item da barra de navegação.
- navbar-expand: Controla o comportamento responsivo da barra de navegação, permitindo que ela seja expandida em dispositivos móveis.
- navbar-brand: Define uma marca (logo ou texto) da barra de navegação. Pode usar para o nome da sua empresa, produto ou projeto.
- .navbar-scroll pode ser opcionalmente usado para definir um
max-heighte scroll expanded navbar content
Criando Menu com NavBar
01 criando o NavBar
Bootstrap é um framework CSS que usa contêiner(espaços). Os dois principais contêineres são .container e .container-fluid. Falamos sobre contêineres nesses posts: Coisas Importantes do Bootstrap para Iniciantes e Sistema de Grades no Bootstrap – ou Grid
Mas, resumindo:
- .container cria um contêiner responsivo e de largura fixa.
- .container-fluid sempre pegará toda a largura da tela. A largura é sempre 100%.
Dentro do corpo <body> e </body> do seu HTML
Usarei a classe .cointainer e dentro dele colocaremos as classes <nav class=”navbar”> </nav> – Também usarei a classe p-4 para incluir um espaço a redor.
<div class="container p-4">
<nav class="navbar"> </nav>
</div>
Apenas com essas classes você não conseguirá ver nada ainda. Vamos adicionar uma cor de fundo para vermos o NavBar aparecer. Acrescente a classe bg-dark. Sobre cores, veja nosso post Cor e Tamanho de Texto com Bootstrap
<div class="container p-4">
<nav class="navbar bg-dark"> </nav>
</div>
Agora um retângulo preto aparecerá:
02 adicionando um brand ao NavBar
Como vimos acima, podemos colocar um navbar-brand que é a marca (logo ou texto) da barra de navegação. Podemos colocar um texto simples ou uma imagem.
Antes, vamos adicionar um .container-fluid e dentro dele o nosso .nav-brand. O “text-info” é apenas para deixar o texto azul.
<div class="container p-4">
<nav class="navbar bg-dark">
<div class="container-fluid">
<a hred="#" class="navbar-brand text-info" >Categoria Outros </a>
</div>
</nav>
</div>
Teremos o seguinte resultado,
Categoria Outros
#3 adicionando um botão ao nosso NavBar
Agora iremos adicionar um botão dentro do nosso NavBar. Ele irá servir para expandir o menu.
Esse botão é de expansão. Quando a janela for pequena, como em celulares, o conteúdo do menu ficará ocultado e será exibido quando clicarmos no botão de expansão.
Iremos adicionar a tag <button> com as seguintes classes dentro:
- data-bs-toggle=”collapse”: Indica que o elemento é responsável por alternar a visibilidade de um conteúdo colapsável.
- data-bs-target=”#navbarNav”: Especifica o seletor do elemento que será colapsado/expandindo ao ser acionado.
- aria-controls=”navbarNav”: Define o ID do elemento que é controlado pelo botão de toggle.
- aria-expanded=”false”: Indica se o conteúdo controlado está inicialmente expandido ou colapsado (nesse caso, colapsado).
- aria-label=”Toggle navigation”: Fornece um rótulo acessível para a função de toggle de navegação.
Adicionei a linha do botão:
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" >....</botton>e dentro um span com o botão a ser exibido.
<span class="navbar-toggler-icon"></span> Veja como ficaram o código e o resultado. Ah, acabei alterado a cor de fundo preta para um cinza através da classe bg-secondary que substituiu a bg-dark
<div class="container p-4">
<nav class="navbar bg-secondary">
<div class="container-fluid">
<a hred="#" class="navbar-brand text-info" >Categoria Outros </a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" >
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</div>
04 Inserindo links no NavBar
Colocamos um logotipo em texto, que poderia ser uma imagem, e um botão de expansão; agora iremos criar os links do menu. Podemos colocar qualquer coisa, desde textos, botões, campos de formulários…
Podemos criar links através de listas
Todo o código fica assim,
<div class="container p-4">
<nav class="navbar bg-secondary">
<div class="container-fluid">
<a hred="#" class="navbar-brand text-info" >Categoria Outros </a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Funções</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Preço</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
Outros Exemplos do que podemos colocar dentro do NavBar
Esses exemplos foram pegos da documentação do Bootstrap 5.
EXEMPLO 01
<div class="container p-4">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
EXEMPLO 02 – IMAGEM COMO BRAND
<div class="container p-4">
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
</div>
EXEMPLO 03 – IMAGEM E TEXTO COMO BRAND
<div class="container p-4">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
</div>
EXEMPLO 04
<div class="container p-4">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
EXEMPLO 05 – COM FORMULÁRIO
<div class="container p-4">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</div>
outro semelhante
<div class="container p-4">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</div>
mais outro semelhante
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
</div>
EXEMPLO 06 – BOTÕES
<div class="container p-4">
<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
</div>
EXEMPLO 07
<div class="container p-4">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
</div>
Oi. Percebi que o menu fica oculto mesmo no monitor do computador.