Source

Barra de navegação

Documentação e exemplos para o poderoso e responsivo cabeçalho de navegação do Bootstrap, o navbar. Inclui suporte para branding, navegação e muito mais, incluindo suporte para nosso plug-in de recolhimento.

Como funciona

Aqui está o que você precisa saber antes de começar a usar a barra de navegação:

As Navbars exigem um encapsulamento .navbarcom classes de recolhimento e esquema de cores.navbar-expand{-sm|-md|-lg|-xl} responsivas .
Navbars e seus conteúdos são fluidos por padrão. Use contêineres opcionais para limitar sua largura horizontal.
Use nossas classes de utilitário de espaçamento e flex para controlar o espaçamento e o alinhamento nas barras de navegação.
As barras de navegação são responsivas por padrão, mas você pode modificá-las facilmente para mudar isso. O comportamento responsivo depende do nosso plug-in Collapse JavaScript.
As barras de navegação ficam ocultas por padrão durante a impressão. Force-os a serem impressos adicionando .d-printao arquivo .navbar. Consulte a classe do utilitário de exibição .
Garanta a acessibilidade usando um <nav>elemento ou, se estiver usando um elemento mais genérico, como um <div>, adicione um role="navigation"a cada barra de navegação para identificá-lo explicitamente como uma região de referência para usuários de tecnologias assistivas.

Continue lendo para obter um exemplo e uma lista de subcomponentes suportados.

Conteúdo compatível

Navbars vêm com suporte embutido para um punhado de subcomponentes. Escolha entre os seguintes, conforme necessário:

.navbar-brandpara o nome da sua empresa, produto ou projeto.
.navbar-navpara uma navegação leve e de altura total (incluindo suporte para dropdowns).
.navbar-togglerpara uso com nosso plugin de recolhimento e outros comportamentos de alternância de navegação .
.form-inlinepara quaisquer controles e ações de formulário.
.navbar-textpara adicionar strings de texto centralizadas verticalmente.
.collapse.navbar-collapsepara agrupar e ocultar o conteúdo da barra de navegação por um ponto de interrupção pai.

Aqui está um exemplo de todos os subcomponentes incluídos em uma barra de navegação com tema de luz responsiva que colapsa automaticamente no lgponto de interrupção (grande).

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Este exemplo usa classes de utilitário color ( bg-light) e espaçamento ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marca

O .navbar-brandpode ser aplicado à maioria dos elementos, mas uma âncora funciona melhor, pois alguns elementos podem exigir classes utilitárias ou estilos personalizados.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Adicionar imagens ao .navbar-brandprovavelmente sempre exigirá estilos ou utilitários personalizados para dimensionar adequadamente. Aqui estão alguns exemplos para demonstrar.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navegação

Os links de navegação da barra de navegação se baseiam em nossas .navopções com sua própria classe modificadora e exigem o uso de classes de alternância para um estilo responsivo adequado. A navegação nas barras de navegação também crescerá para ocupar o máximo de espaço horizontal possível para manter o conteúdo da barra de navegação alinhado com segurança.

Estados ativos — com .active— para indicar que a página atual pode ser aplicada diretamente a .nav-links ou a seus pais imediatos .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

E como usamos classes para nossos navs, você pode evitar totalmente a abordagem baseada em listas, se quiser.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

Você também pode utilizar dropdowns em sua navbar nav. Os menus suspensos exigem um elemento de encapsulamento para posicionamento, portanto, certifique-se de usar elementos separados e aninhados para .nav-iteme .nav-linkconforme mostrado abaixo.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Formulários

Coloque vários controles e componentes de formulário em uma barra de navegação com .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Elementos filhos imediatos em .navbaruso de layout flex e terão como padrão justify-content: between. Use utilitários flexíveis adicionais conforme necessário para ajustar esse comportamento.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Os grupos de entrada também funcionam:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Vários botões também são suportados como parte desses formulários de barra de navegação. Este também é um ótimo lembrete de que os utilitários de alinhamento vertical podem ser usados para alinhar elementos de tamanhos diferentes.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Texto

Navbars podem conter pedaços de texto com a ajuda de .navbar-text. Esta classe ajusta o alinhamento vertical e o espaçamento horizontal para strings de texto.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Misture e combine com outros componentes e utilitários conforme necessário.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

Esquema de cores

A criação de temas na barra de navegação nunca foi tão fácil graças à combinação de classes de temas e background-colorutilitários. Escolha entre .navbar-lightpara uso com cores de fundo claras ou .navbar-darkpara cores de fundo escuras. Em seguida, personalize com .bg-*utilitários.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Recipientes

Embora não seja necessário, você pode envolver uma barra de navegação em uma .containerpara centralizá-la em uma página ou adicionar uma para centralizar apenas o conteúdo de uma barra de navegação superior fixa ou estática .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Quando o contêiner está dentro de sua barra de navegação, seu preenchimento horizontal é removido em pontos de interrupção inferiores à sua .navbar-expand{-sm|-md|-lg|-xl}classe especificada. Isso garante que não duplicaremos o preenchimento desnecessariamente em viewports inferiores quando sua barra de navegação estiver recolhida.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Canal

Use nossos utilitários de posição para colocar navbars em posições não estáticas. Escolha entre fixo no topo, fixo na parte inferior ou colado no topo (rola com a página até chegar ao topo, depois permanece lá). As navbars fixas usam position: fixed, o que significa que são extraídas do fluxo normal do DOM e podem exigir CSS personalizado (por exemplo, padding-topno <body>) para evitar sobreposição com outros elementos.

Observe também que .sticky-topusa position: sticky, que não é totalmente compatível com todos os navegadores .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Comportamentos responsivos

Navbars podem utilizar .navbar-toggler, .navbar-collapsee .navbar-expand{-sm|-md|-lg|-xl}classes para mudar quando seu conteúdo é recolhido atrás de um botão. Em combinação com outros utilitários, você pode escolher facilmente quando mostrar ou ocultar elementos específicos.

Para navbars que nunca são recolhidas, adicione a .navbar-expandclasse na navbar. Para navbars que sempre colapsam, não adicione nenhuma .navbar-expandclasse.

Alternador

Os alternadores da barra de navegação são alinhados à esquerda por padrão, mas se seguirem um elemento irmão como um .navbar-brand, eles serão alinhados automaticamente à extrema direita. Reverter sua marcação reverterá o posicionamento do alternador. Abaixo estão exemplos de diferentes estilos de alternância.

Sem .navbar-brandmostrado no ponto de interrupção mais baixo:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Com um nome de marca mostrado à esquerda e um botão de alternância à direita:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Com um seletor à esquerda e o nome da marca à direita:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Conteúdo externo

Às vezes, você deseja usar o plug-in de recolhimento para acionar conteúdo oculto em outro lugar da página. Como nosso plugin funciona na correspondência ide data-target, isso é feito facilmente!

Conteúdo recolhido

Comutável através da marca navbar.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>