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, plug-in de recolhimento e muito mais.

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.

O efeito de animação deste componente depende da prefers-reduced-motionconsulta de mídia. Consulte a seção de movimento reduzido de nossa documentação de acessibilidade .

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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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.6/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.6/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">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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Você também pode usar menus suspensos em sua barra de navegação. 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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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 filho imediatos de .navbarusar layout flex e terão como padrão justify-content: space-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 você pode adicionar um contêiner dentro do .navbarpara 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>

Rolagem

Adicione .navbar-nav-scrolla um .navbar-collapse(ou outro subcomponente da barra de navegação) para habilitar a rolagem vertical dentro do conteúdo alternável de uma barra de navegação recolhida. Por padrão, a rolagem começa em 75vh(ou 75% da altura da janela de visualização), mas você pode substituir isso com estilos embutidos ou personalizados. Em viewports maiores, quando a barra de navegação for expandida, o conteúdo aparecerá como em uma barra de navegação padrão.

Observe que esse comportamento vem com uma potencial desvantagem de overflow—quando a configuração overflow-y: auto(necessária para rolar o conteúdo aqui), overflow-xé o equivalente a auto, que cortará algum conteúdo horizontal.

Aqui está um exemplo de barra de navegação usando .navbar-nav-scrollcom style="max-height: 100px;", com alguns utilitários de margem extra para espaçamento ideal.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <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">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Comportamentos responsivos

Navbars podem usar .navbar-toggler, .navbar-collapsee .navbar-expand{-sm|-md|-lg|-xl}classes para determinar 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 menor ponto de interrupção:

<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">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">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">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 um elemento de contêiner para conteúdo que fica estruturalmente fora do arquivo .navbar. 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="fixed-top">
  <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>

Ao fazer isso, recomendamos incluir JavaScript adicional para mover o foco programaticamente para o contêiner quando ele for aberto. Caso contrário, usuários de teclado e usuários de tecnologias assistivas provavelmente terão dificuldade em encontrar o conteúdo recém-revelado - principalmente se o contêiner que foi aberto vier antes do alternador na estrutura do documento. Também recomendamos certificar-se de que o toggler tenha o aria-controlsatributo, apontando para o iddo contêiner de conteúdo. Em teoria, isso permite que os usuários de tecnologia assistiva saltem diretamente do toggler para o contêiner que ele controla, mas o suporte para isso é bastante irregular.