Source

barra de navegación

Documentación y ejemplos para el potente encabezado de navegación sensible de Bootstrap, la barra de navegación. Incluye soporte para marca, navegación y más, incluido soporte para nuestro complemento de colapso.

Cómo funciona

Esto es lo que necesita saber antes de comenzar con la barra de navegación:

  • Las barras de navegación requieren un envoltorio para las clases .navbarde combinación de colores.navbar-expand{-sm|-md|-lg|-xl} y colapso receptivo .
  • Las barras de navegación y su contenido son fluidos de forma predeterminada. Use contenedores opcionales para limitar su ancho horizontal.
  • Utilice nuestras clases de utilidad de espaciado y flexión para controlar el espaciado y la alineación dentro de las barras de navegación.
  • Las barras de navegación responden de manera predeterminada, pero puede modificarlas fácilmente para cambiar eso. El comportamiento receptivo depende de nuestro complemento Collapse JavaScript.
  • Las barras de navegación están ocultas de forma predeterminada al imprimir. Obligue a que se impriman agregando .d-printal archivo .navbar. Consulte la clase de utilidad de visualización .
  • Garantice la accesibilidad mediante el uso de un <nav>elemento o, si utiliza un elemento más genérico como un <div>, agregue un role="navigation"a cada barra de navegación para identificarla explícitamente como una región de referencia para los usuarios de tecnologías de asistencia.

El efecto de animación de este componente depende de la prefers-reduced-motionconsulta de medios. Consulte la sección de movimiento reducido de nuestra documentación de accesibilidad .

Siga leyendo para ver un ejemplo y una lista de subcomponentes admitidos.

Contenido compatible

Las barras de navegación vienen con soporte integrado para un puñado de subcomponentes. Elija entre los siguientes según sea necesario:

  • .navbar-brandpara el nombre de su empresa, producto o proyecto.
  • .navbar-navpara una navegación liviana y de altura completa (incluido el soporte para menús desplegables).
  • .navbar-togglerpara usar con nuestro complemento de colapso y otros comportamientos de alternancia de navegación .
  • .form-inlinepara cualquier forma de controles y acciones.
  • .navbar-textpara agregar cadenas de texto centradas verticalmente.
  • .collapse.navbar-collapsepara agrupar y ocultar el contenido de la barra de navegación por un punto de interrupción principal.

Este es un ejemplo de todos los subcomponentes incluidos en una barra de navegación receptiva con un tema de luz que colapsa automáticamente en el punto de lginterrupció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="#" 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="#" tabindex="-1" aria-disabled="true">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 ejemplo utiliza las clases de utilidad color ( bg-light) y espaciado ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marca

Se .navbar-brandpuede aplicar a la mayoría de los elementos, pero un ancla funciona mejor ya que algunos elementos pueden requerir clases de utilidad o 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>

Es probable que agregar imágenes .navbar-brandsiempre requiera estilos personalizados o utilidades para ajustar el tamaño correctamente. Aquí hay algunos ejemplos para demostrar.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/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.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Los enlaces de navegación de la barra de navegación se basan en nuestras .navopciones con su propia clase de modificador y requieren el uso de clases de alternancia para un estilo receptivo adecuado. La navegación en las barras de navegación también crecerá para ocupar tanto espacio horizontal como sea posible para mantener el contenido de la barra de navegación alineado de forma segura.

Los estados activos—con— .activepara indicar que la página actual se puede aplicar directamente a .nav-linklos correos electrónicos oa sus padres 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Y debido a que usamos clases para nuestra navegación, puede evitar el enfoque basado en listas por completo si lo desea.

<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

También puede utilizar menús desplegables en su barra de navegación. Los menús desplegables requieren un elemento envolvente para el posicionamiento, así que asegúrese de usar elementos separados y anidados para .nav-itemy .nav-linkcomo se muestra 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="#" 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>

Formularios

Coloque varios controles de formulario y componentes dentro de una 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>

Los elementos secundarios inmediatos en .navbaruso tienen un diseño flexible y se establecerán de forma predeterminada en justify-content: space-between. Use utilidades flexibles adicionales según sea necesario para ajustar este comportamiento.

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

Los grupos de entrada tambié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>

También se admiten varios botones como parte de estos formularios de barra de navegación. Este también es un gran recordatorio de que las utilidades de alineación vertical se pueden usar para alinear 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

Las barras de navegación pueden contener fragmentos de texto con la ayuda de .navbar-text. Esta clase ajusta la alineación vertical y el espaciado horizontal para cadenas de texto.

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

Mezcle y combine con otros componentes y utilidades según sea 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 color

Tematizar la barra de navegación nunca ha sido tan fácil gracias a la combinación de clases de temas y background-colorutilidades. Elija entre .navbar-lightcolores de fondo claros o .navbar-darkcolores de fondo oscuros. Luego, personalízalo 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

Aunque no es obligatorio, puede envolver una barra de navegación en un .containerpara centrarla en una página o agregar una dentro para centrar solo el contenido de una barra de navegación superior estática o fija .

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

Cuando el contenedor está dentro de su barra de navegación, su relleno horizontal se elimina en los puntos de interrupción inferiores a su .navbar-expand{-sm|-md|-lg|-xl}clase especificada. Esto asegura que no dupliquemos el relleno innecesariamente en las ventanas de visualización inferiores cuando la barra de navegación esté colapsada.

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

Colocación

Utilice nuestras utilidades de posición para colocar barras de navegación en posiciones no estáticas. Elija entre fijo en la parte superior, fijo en la parte inferior o fijo en la parte superior (se desplaza con la página hasta llegar a la parte superior y luego permanece allí). Las barras de navegación fijas usan position: fixed, lo que significa que se extraen del flujo normal del DOM y pueden requerir CSS personalizado (por ejemplo, padding-topen <body>) para evitar la superposición con otros elementos.

También tenga en cuenta que .sticky-topuses position: sticky, que no es totalmente compatible con todos los 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>

Comportamientos receptivos

Las barras de navegación pueden utilizar las clases .navbar-toggler, .navbar-collapsey .navbar-expand{-sm|-md|-lg|-xl}para cambiar cuando su contenido se colapsa detrás de un botón. En combinación con otras utilidades, puede elegir fácilmente cuándo mostrar u ocultar elementos particulares.

Para las barras de navegación que nunca colapsan, agregue la .navbar-expandclase en la barra de navegación. Para las barras de navegación que siempre colapsan, no agregue ninguna .navbar-expandclase.

Alternador

Los conmutadores de la barra de navegación están alineados a la izquierda de forma predeterminada, pero si siguen a un elemento hermano como un .navbar-brand, se alinearán automáticamente en el extremo derecho. Al invertir el marcado, se invertirá la ubicación del conmutador. A continuación se muestran ejemplos de diferentes estilos de alternancia.

Sin .navbar-brandque se muestre en el punto de interrupción más bajo:

<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="#" tabindex="-1" aria-disabled="true">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>

Con un nombre de marca que se muestra a la izquierda y un interruptor a la derecha:

<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="#" tabindex="-1" aria-disabled="true">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>

Con un conmutador a la izquierda y el nombre de la marca a la derecha:

<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="#" tabindex="-1" aria-disabled="true">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>

contenido externo

A veces, desea usar el complemento de colapso para activar contenido oculto en otra parte de la página. ¡ Debido a que nuestro complemento funciona en idy data-targetemparejando, eso se hace fácilmente!

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