Barra de Navegação Bootstrap 5
- Página anterior Navegação BS5
- Próxima página Carousel BS5
Barra de navegação
A barra de navegação é o cabeçalho de navegação localizado no topo da página:
Barra de navegação básica
Ao usar Bootstrap, a barra de navegação pode se expandir ou colapsar dependendo do tamanho da tela.
Use .navbar Classe para criar a barra de navegação padrão, seguida pelas classes de colapso responsivo:.navbar-expand-xxl|xl|lg|md|sm（na grande, extra grande, grande, média e pequena, alinhados horizontalmente, ou empilhados verticalmente na tela pequena）。
Para adicionar links à barra de navegação, use class="navbar-nav" da <ul> elemento (ou <div>）。Então, adicione com .nav-item Classe <li> elemento, seguido por .nav-link Classe <a> Elemento:
Exemplo
<!-- Barra de navegação horizontal cinza que se torna vertical em telas pequenas -->
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<!-- Links -->
<ul class="navbar-nav">
<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>
</nav>
barra de navegação vertical
Remover .navbar-expand-* Classe para criar uma barra de navegação sempre vertical:
Exemplo
<!-- Barra de navegação vertical cinza --> <nav class="navbar bg-light"> ... </nav>
barra de navegação centralizada
Adicionar .justify-content-center Classe para centralizar a barra de navegação:
Exemplo
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>
barra de navegação colorida
Use qualquer .bg-color Classe para alterar a cor de fundo da barra de navegação:
.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
Dica:Use .navbar-dark Classe adiciona cor de texto branca a todos os links da barra de navegação, ou use .navbar-light Adicionar cor de texto preta.
Exemplo
<!-- Cor de fundo cinza, texto branco -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
</div>
</nav>
<!-- 黑色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 蓝色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
活动/禁用状态：将 .active 类添加到 <a> 元素可突出显示当前链接，或添加 .disabled 类来指示链接不可点击。
品牌 / 标志
.navbar-brand 类用于突出显示页面的品牌/标志/项目名称：
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
如果将 .navbar-brand 类与图像一起使用时，Bootstrap 5 将自动设置图像样式，在垂直方向适应导航栏。
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav>
导航栏文本
Use .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">导航栏文本</span>
</div>
</nav>
很多时候，尤其是在小屏幕上，您希望隐藏导航链接并用一个按钮替代它们，并在单击该按钮时显示它们。
如需创建可折叠导航栏，请使用已设置 class="navbar-toggler"、data-bs-toggle="collapse" 和 data-bs-target="#thetarget" 的按钮。然后将导航栏内容（链接等）包裹在 class="collapse navbar-collapse" 的 <div> 元素中，后跟与按钮的 data-bs-target 匹配的 id："thetarget"。
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Dica:Você ainda pode excluir .navbar-expand-md Classe para sempre ocultar os links da barra de navegação e mostrar o botão de alternância.
Barra de navegação de menu suspenso
A barra de navegação pode conter menus suspenso:
Exemplo
<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="#">Link</a></li>
<li><a class="dropdown-item" href="#">Outro link</a></li>
<li><a class="dropdown-item" href="#">Terceiro link</a></li>
</ul>
</li>
Menu e botões da barra de navegação
Você ainda pode incluir formulários na barra de navegação:
Exemplo
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Procurar">
<button class="btn btn-primary" type="button">Procurar</button>
</form>
</div>
</div>
</nav>
Barra de navegação fixa
A barra de navegação também pode ser fixada na parte superior ou inferior da página
A barra de navegação fixa permanecerá visível em uma posição fixa independente da rolagem da página (topo ou fundo)
.fixed-top A classe faz a barra de navegação ficar fixa na páginaTopo:
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>
Use a classe .fixed-bottom para manter a barra de navegação na parte inferior da página:
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>
Use .sticky-top A classe faz a barra de navegação ficar fixa/parada na página enquanto ela rola sobre elaTopo.
Notas:Este tipo não funciona no IE11 e versões anteriores (trate-o como position:relative)
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>
- Página anterior Navegação BS5
- Próxima página Carousel BS5
