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, complemento de colapso y más.
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
.navbar
de 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-print
al 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 unrole="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.
prefers-reduced-motion
consulta de medios. Consulte la
sección de movimiento reducido de nuestra documentación de accesibilidad .
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-brand
para el nombre de su empresa, producto o proyecto..navbar-nav
para una navegación liviana y de altura completa (incluido el soporte para menús desplegables)..navbar-toggler
para usar con nuestro complemento de colapso y otros comportamientos de alternancia de navegación ..form-inline
para cualquier forma de 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.
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 lg
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 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-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 probable que agregar imágenes .navbar-brand
siempre 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.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>
Navegación
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 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— .active
para indicar que la página actual se puede aplicar directamente a .nav-link
los 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">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-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>
También puede usar 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-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="#" 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 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 de .navbar
uso 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-color
utilidades. Elija entre .navbar-light
colores de fondo claros o .navbar-dark
colores 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 .container
para centrarla en una página. O puede agregar un contenedor dentro de .navbar
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 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-top
en <body>
) para evitar la superposición con otros elementos.
También tenga en cuenta que .sticky-top
uses 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>
Desplazamiento
Agregue .navbar-nav-scroll
a .navbar-collapse
(u otro subcomponente de la barra de navegación) para habilitar el desplazamiento vertical dentro del contenido alternable de una barra de navegación contraída. De forma predeterminada, el desplazamiento se activa en 75vh
(o el 75 % de la altura de la ventana gráfica), pero puede anularlo con estilos en línea o personalizados. En ventanas gráficas más grandes, cuando se expande la barra de navegación, el contenido aparecerá como en una barra de navegación predeterminada.
Tenga en cuenta que este comportamiento viene con un inconveniente potencial de overflow
—cuando la configuración overflow-y: auto
(requerido para desplazar el contenido aquí), overflow-x
es el equivalente de auto
, que recortará parte del contenido horizontal.
Aquí hay un ejemplo de barra de navegación que usa .navbar-nav-scroll
with style="max-height: 100px;"
, con algunas utilidades de margen adicionales para un espaciado ó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>
Comportamientos receptivos
Las barras de navegación pueden usar las clases .navbar-toggler
, .navbar-collapse
y .navbar-expand{-sm|-md|-lg|-xl}
para determinar cuándo 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.
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-brand
que se muestre en el punto de interrupción más pequeñ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>
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">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">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 colapso para activar un elemento contenedor para el contenido que se encuentra estructuralmente fuera del archivo .navbar
. ¡ Debido a que nuestro complemento funciona en id
y data-target
emparejando, eso se hace fácilmente!
<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>
Cuando haga esto, le recomendamos que incluya JavaScript adicional para mover el foco mediante programación al contenedor cuando se abre. De lo contrario, es probable que los usuarios de teclados y los usuarios de tecnologías de asistencia tengan dificultades para encontrar el contenido recién revelado, especialmente si el contenedor que se abrió se encuentra antes del conmutador en la estructura del documento. También recomendamos asegurarse de que el conmutador tenga el aria-controls
atributo, apuntando al id
del contenedor de contenido. En teoría, esto permite a los usuarios de tecnología de asistencia saltar directamente del conmutador al contenedor que controla, pero el soporte para esto actualmente es bastante irregular.