Barra de navegación

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

Cómo funciona

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

Navbars requieren un envoltorio .navbar con .navbar-expand{-sm|-md|-lg|-xl} para plegar y sensibles esquema de color clases.
Las barras de navegación y su contenido son fluidos por defecto. Utilice 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 forma 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. Oblígalos a imprimir agregando .d-print al archivo .navbar . Consulte la clase de utilidad de visualización .
Asegure la accesibilidad mediante el uso de un <nav> elemento o, si usa un elemento más genérico como a <div> , agregue a role="navigation" a cada barra de navegación para identificarla explícitamente como una región histórica para los usuarios de tecnologías de asistencia.

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

Siga leyendo para obtener un ejemplo y una lista de subcomponentes compatibles.

Contenido admitido

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

.navbar-brand para el nombre de su empresa, producto o proyecto.
.navbar-nav para una navegación ligera y de altura completa (incluida la compatibilidad con menús desplegables).
.navbar-toggler para usar con nuestro complemento de colapso y otros comportamientos de alternancia de navegación .
.form-inline para cualquier formulario, controles y acciones.
.navbar-text para agregar cadenas de texto centradas verticalmente.
.collapse.navbar-collapse para agrupar y ocultar el contenido de la barra de navegación por un punto de interrupción principal.

Aquí hay un ejemplo de todos los subcomponentes incluidos en una barra de navegación con tema de luz sensible que se colapsa automáticamente en el lg punto 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="#" 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 el color ( bg-light ) y el espaciamiento ( my-2 , my-lg-0 , mr-sm-0 , my-sm-0 ) clases de utilidad.

Marca

Se .navbar-brand puede 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 .navbar-brand probable que la adición de imágenes siempre requiera estilos o utilidades personalizados para dimensionar correctamente. A continuación se muestran algunos ejemplos para demostrar.


  <!-- Just an image -->
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="/media/image/seo-enterprise.png" width="30" height="30" alt="" loading="lazy">
    </a>
  </nav>


  <!-- Image and text -->
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="/img/seo-enterprise.png" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
      Bootstrap
    </a>
  </nav>

Nav

Los enlaces de navegación de la barra de navegación se basan en nuestras .nav opciones con su propia clase de modificador y requieren el uso de clases alternas para un estilo de respuesta 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) .active para indicar que la página actual se pueden aplicar directamente a .nav-link 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 nuestros navegadores, 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-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" 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 de envoltura para el posicionamiento, así que asegúrese de usar elementos separados y anidados para .nav-item y .nav-link como 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 y componentes de formulario 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 .navbar secundarios inmediatos se utilizan en el diseño flexible y se utilizarán de forma predeterminada justify-content: space-between . Utilice 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 la barra de navegación. Este también es un gran recordatorio de que las utilidades de alineación vertical se pueden utilizar 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 de 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

Crear temas en la barra de navegación nunca ha sido tan fácil gracias a la combinación de clases de temas y background-color utilidades. Elija entre .navbar-light para usar con colores de fondo claros o .navbar-dark para colores de fondo oscuros. Luego, personalícelo 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 necesario, puede ajustar una barra de navegación en un .container para centrarla en una página o agregar una dentro para centrar solo el contenido de una barra de navegación superior fija o estática .


  <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 más bajos que su .navbar-expand{-sm|-md|-lg|-xl} clase especificada . Esto asegura que no estamos duplicando innecesariamente el relleno en las ventanas inferiores cuando su 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 las barras de navegación en posiciones no estáticas. Elija entre fijo en la parte superior, fijo en la parte inferior o pegado en la parte superior (se desplaza con la página hasta que llega a la parte superior y luego permanece allí). Se corrigió el uso de las barras de navegación position: fixed , lo que significa que se extraen del flujo normal del DOM y pueden requerir CSS personalizado (por ejemplo, padding-top en <body> ) para evitar la superposición con otros elementos.

También tenga en cuenta que los .sticky-top usos position: sticky , que no son totalmente compatibles 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 .navbar-toggler , .navbar-collapse y .navbar-expand{-sm|-md|-lg|-xl} clases 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-expand clase en la barra de navegación. Para las barras de navegación que siempre colapsan, no agregue ninguna .navbar-expand clase.

Toggler

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

Sin que se .navbar-brand 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 conmutador 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 utilizar el complemento de contracción para activar contenido oculto en otra parte de la página. Debido a que nuestro complemento funciona en id y data-target coincide, ¡eso es fácil de hacer!

Collapsed content

Toggleable via the navbar brand.


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