in English

Barra de navegación

Documentación e exemplos para a cabeceira de navegación potente e sensible de Bootstrap, a barra de navegación. Inclúe compatibilidade coa marca, a navegación, o complemento de contraer e moito máis.

Cómo funciona

Isto é o que debes saber antes de comezar coa barra de navegación:

As barras de navegación requiren un encaixe .navbarcon para as clases de esquemas de cores.navbar-expand{-sm|-md|-lg|-xl} e de colapso sensibles .
As barras de navegación e os seus contidos son fluídos por defecto. Use recipientes opcionais para limitar o seu ancho horizontal.
Use as nosas clases de utilidade de espazamento e flexión para controlar o espazamento e o aliñamento dentro das barras de navegación.
As barras de navegación responden por defecto, pero podes modificalas facilmente para cambialo. O comportamento receptivo depende do noso complemento Collapse JavaScript.
As barras de navegación están ocultas por defecto ao imprimir. Forzar que se impriman engadindo .d-printao ficheiro .navbar. Consulte a clase de utilidade de visualización .
Asegura a accesibilidade mediante un <nav>elemento ou, se utilizas un elemento máis xenérico, como un <div>, engade unha role="navigation"a cada barra de navegación para identificala de forma explícita como unha rexión de referencia para os usuarios de tecnoloxías de asistencia.

O efecto de animación deste compoñente depende da prefers-reduced-motionconsulta multimedia. Consulta a sección de movemento reducido da nosa documentación de accesibilidade .

Contido compatible

As barras de navegación inclúen soporte integrado para un puñado de subcompoñentes. Escolla entre os seguintes segundos sexa necesario:

.navbar-brandpara o nome da súa empresa, produto ou proxecto.
.navbar-navpara unha navegación a toda altura e lixeira (incluíndo soporte para menús despregables).
.navbar-togglerpara usar co noso complemento de contraer e outros comportamentos de conmutación de navegación .
.form-inlinepara calquera control e acción de formulario.
.navbar-textpara engadir cadeas de texto centradas verticalmente.
.collapse.navbar-collapsepara agrupar e ocultar o contido da barra de navegación por un punto de interrupción principal.

Aquí tes un exemplo de todos os subcompoñentes incluídos nunha barra de navegación con temática lixeira sensible que se contrae automaticamente no lgpunto de interrupción (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 clases de utilidade cor ( bg-light) e espazamento ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marca

Pódese .navbar-brandaplicar á maioría dos elementos, pero unha áncora funciona mellor, xa que algúns elementos poden requirir clases de utilidade 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>

Engadir imaxes ao .navbar-brandficheiro probablemente sempre requira estilos personalizados ou utilidades para o tamaño adecuado. Aquí tes algúns exemplos para demostrar.

<!-- 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>

Nav

As ligazóns de navegación da barra de navegación baséanse nas nosas .navopcións coa súa propia clase modificadora e requiren o uso de clases de alternancia para un estilo adaptado. A navegación nas barras de navegación tamén crecerá ata ocupar o máximo de espazo horizontal posible para manter o contido da barra de navegación aliñado de forma segura.

Os estados activos—con— .activepara indicar a páxina actual pódense aplicar directamente a .nav-links ou aos seus pais inmediatos .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 clases para os nosos navegadores, podes evitar por completo o enfoque baseado en listas se queres.

<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>

Tamén podes usar menús despregables na túa barra de navegación. Os menús despregables requiren un elemento de envoltura para o posicionamento, polo que asegúrese de usar elementos separados e aniñados para .nav-iteme .nav-linkcomo se mostra a continuación.

<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>

Formularios

Coloque varios controis de formulario e compoñentes dentro dunha barra de navegación con .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 fillos inmediatos de .navbaruso do deseño flexible e por defecto será justify-content: space-between. Use utilidades flexibles adicionais segundo sexa necesario para axustar este 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 tamén funcionan:

<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>

Tamén se admiten varios botóns como parte destes formularios da barra de navegación. Este tamén é un gran recordatorio de que as utilidades de aliñamento vertical pódense usar para aliñar elementos de diferentes tamaños.

<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

As barras de navegación poden conter fragmentos de texto coa axuda de .navbar-text. Esta clase axusta o aliñamento vertical e o espazado horizontal das cadeas de texto.

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

Mestura e combina con outros compoñentes e utilidades segundo sexa necesario.

<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>

Esquemas de cores

Tematizar a barra de navegación nunca foi tan fácil grazas á combinación de clases de tematización e background-colorutilidades. Escolle entre .navbar-lightpara usar con cores de fondo claros ou .navbar-darkpara cores de fondo escuros. Despois, personaliza con .bg-*utilidades.

<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>

Contenedores

Aínda que non é necesario, podes envolver unha barra de navegación para centrala .containernunha páxina. Ou pode engadir un recipiente dentro do .navbarpara centrar só o contido dunha barra de navegación 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>

Cando o contedor está dentro da túa barra de navegación, o seu recheo horizontal elimínase nos puntos de interrupción inferiores á .navbar-expand{-sm|-md|-lg|-xl}clase especificada. Isto garante que non duplicaremos o recheo innecesariamente nas ventás inferiores cando a barra de navegación está contraída.

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

Colocación

Use as nosas utilidades de posición para colocar barras de navegación en posicións non estáticas. Escolle entre fixo para arriba, fixo para abaixo ou pegado para arriba (desprázase coa páxina ata chegar á parte superior e despois permanece alí). As barras de navegación corrixidas usan position: fixed, o que significa que son extraídas do fluxo normal do DOM e poden requirir CSS personalizado (por exemplo, padding-topno <body>) para evitar a superposición con outros elementos.

Teña en conta tamén que .sticky-topusa position: sticky, que non é totalmente compatible en 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>

Desprazamento

Engadir .navbar-nav-scrolla un .navbar-collapse(ou outro subcompoñente da barra de navegación) para activar o desprazamento vertical dentro dos contidos que se poden alternar dunha barra de navegación contraída. De forma predeterminada, o desprazamento comeza a 75vh(ou o 75 % da altura da ventana gráfica), pero podes anulalo con estilos en liña ou personalizados. En vistas máis grandes cando se expande a barra de navegación, o contido aparecerá como nunha barra de navegación predeterminada.

Teña en conta que este comportamento ten unha desvantaxe potencial de overflow—cando a configuración overflow-y: auto(necesaria para desprazarse aquí) overflow-xé o equivalente a auto, o que recortará parte do contido horizontal.

Aquí tes un exemplo de barra de navegación usando .navbar-nav-scrollcon style="max-height: 100px;", con algunhas utilidades de marxe adicionais para un espazo óptimo.

<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>

Condutas receptivas

As barras de navegación poden usar .navbar-toggler, .navbar-collapse, e .navbar-expand{-sm|-md|-lg|-xl}clases para determinar cando o seu contido colapsa detrás dun botón. En combinación con outras utilidades, pode escoller facilmente cando mostrar ou ocultar determinados elementos.

Para as barras de navegación que nunca colapsan, engade a .navbar-expandclase na barra de navegación. Para as barras de navegación que sempre colapsan, non engadas ningunha .navbar-expandclase.

Alternador

Os alternadores da barra de navegación están aliñados á esquerda por defecto, pero se seguen un elemento irmán como un .navbar-brand, aliñaranse automaticamente ao extremo dereito. Se invertes o teu marcado, invertirase a colocación do alternador. A continuación móstranse exemplos de diferentes estilos de alternancia.

Sen .navbar-brandmostrar no punto de interrupción máis pequeno:

<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>

Cun nome de marca que se mostra á esquerda e o alternador á dereita:

<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>

Cun alternador á esquerda e o nome da marca á dereita:

<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>

Contido externo

Ás veces queres usar o complemento de contraer para activar un elemento contenedor para o contido que se atopa estruturalmente fóra do .navbar. Debido a que o noso complemento funciona con ide data-targetcoincidente, iso faise facilmente!

Contido contraído

Conmutable a través da marca da barra de navegación.

<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>

Cando fas isto, recomendámosche incluír JavaScript adicional para mover o foco mediante programación ao contedor cando se abre. En caso contrario, os usuarios de teclado e as tecnoloxías de asistencia probablemente teñan dificultades para atopar o contido recentemente revelado, especialmente se o contedor que se abriu está antes do alternador na estrutura do documento. Tamén recomendamos asegurarse de que o alternador teña o aria-controlsatributo, apuntando ao idcontedor de contido. En teoría, isto permite que os usuarios de tecnoloxía de asistencia salten directamente desde o alternador ao contedor que controla, pero o soporte para isto é actualmente bastante irregular.