Barra de navegação do Bootstrap 4
Barras de navegação
Uma barra de navegação é um cabeçalho de navegação que é colocado na parte superior da página:
Barra de navegação básica
Com o Bootstrap, uma barra de navegação pode ser estendida ou recolhida, dependendo do tamanho da tela.
Uma barra de navegação padrão é criada com a .navbar
classe, seguida por uma classe recolhida responsiva: .navbar-expand-xl|lg|md|sm
(empilha a barra de navegação verticalmente em telas extragrandes, grandes, médias ou pequenas).
Para adicionar links dentro da barra de navegação, use um <ul>elemento com class="navbar-nav". Em seguida, adicione <li>elementos com uma .nav-itemclasse seguido por um <a>elemento com uma .nav-linkclasse:
Exemplo
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- 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>
</nav>
Barra de navegação vertical
Remova a .navbar-expand-xl|lg|md|smclasse para criar uma barra de navegação vertical:
Exemplo
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- 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>
</nav>
Barra de navegação centralizada
Adicione a .justify-content-centerclasse para centralizar a barra de navegação.
O exemplo a seguir centralizará a barra de navegação em telas médias, grandes e extragrandes. Em telas pequenas, ele será exibido verticalmente e alinhado à esquerda (por causa da classe .navbar-expand-sm):
Exemplo
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Barra de navegação colorida
Use qualquer uma das .bg-colorclasses para alterar a cor de fundo da barra de navegação ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondarye ).bg-dark.bg-light
Dica: adicione uma cor de texto branca a todos os links na barra de navegação com a .navbar-darkclasse ou use a .navbar-lightclasse para adicionar uma
cor de texto preta .
Exemplo
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</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="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Estado ativo/desativado : adicione a .activeclasse a um
<a>elemento para destacar o link atual ou a .disabledclasse para indicar que o link não pode ser clicado.
Logotipo da marca
A .navbar-brandclasse é usada para destacar a marca/logotipo/nome do projeto da sua página:
Exemplo
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Ao usar a .navbar-brandclasse em imagens, o Bootstrap 4 estilizará automaticamente a imagem para caber na barra de navegação verticalmente.
Exemplo
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Recolher a barra de navegação
Muitas vezes, especialmente em telas pequenas, você deseja ocultar os links de navegação e substituí-los por um botão que deve revelá-los quando clicado.
Para criar uma barra de navegação dobrável, use um botão com . Em seguida, envolva o conteúdo da barra de navegação (links, etc) dentro de um elemento div com , seguido por um id que corresponda ao do botão: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Exemplo
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<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>
</nav>
Dica: Você também pode remover a classe .navbar-expand-md para SEMPRE ocultar os links da barra de navegação e exibir o botão de alternância.
Barra de navegação com menu suspenso
As barras de navegação também podem conter menus suspensos:
Exemplo
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- 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>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Formulários e botões da barra de navegação
Adicione um <form>elemento class="form-inline"para agrupar entradas e botões lado a lado:
Exemplo
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Você também pode usar outras classes de entrada, como .input-group-prependou .input-group-appendpara anexar um ícone ou texto de ajuda ao lado do campo de entrada. Você aprenderá mais sobre essas classes no capítulo Bootstrap Inputs.
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
Texto da barra de navegação
Use a .navbar-textclasse para alinhar verticalmente quaisquer elementos dentro da barra de navegação que não sejam links (garante o preenchimento e a cor do texto adequados).
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
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>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Barra de navegação fixa
A barra de navegação também pode ser fixada na parte superior ou inferior da página.
Uma barra de navegação fixa fica visível em uma posição fixa (superior ou inferior) independente da rolagem da página.
A .fixed-topclasse fixa a barra de navegação no topo :
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Use a .fixed-bottomclasse para fazer com que a barra de navegação fique na parte inferior da página:
Exemplo
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>