Barra de navegación Bootstrap4

La barra de navegación generalmente se coloca en la parte superior de la página.

Podemos usar.navbarla clase para crear una barra de navegación estándar, seguida de:.navbar-expand-xl|lg|md|smla clase para crear una barra de navegación responsiva (se expande horizontalmente en pantallas grandes y se apila verticalmente en pantallas pequeñas).

Las opciones de la barra de navegación pueden usar<ul>el elemento y agregarclass="navbar-nav"la clase.<li>Luego, en.nav-itemel elemento agregar<a>la clase,.nav-linkusar en el elemento

Ejemplo

<!--En pantallas pequeñas, la barra de navegación horizontal se convierte en vertical.--> <nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

Pruébalo »

Barra de navegación vertical

Al eliminar.navbar-expand-xl|lg|md|smla clase para crear una barra de navegación vertical:

Ejemplo

<!--Barra de navegación vertical--> <nav class="navbar bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

Pruébalo »

Barra de navegación centrada

Al agregar.justify-content-centerla clase para crear una barra de navegación centrada:

Ejemplo

<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>

Pruébalo »

Barra de navegación de diferentes colores

Puedes usar las siguientes clases para crear barras de navegación de diferentes colores:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darky.bg-light).

Consejo:Para fondos oscuros, el color del texto debe ser claro; para fondos claros, el color del texto debe ser oscuro.

Ejemplo

<!--Fondo gris, texto negro--> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav> <!--Fondo negro, texto blanco--> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <!--Fondo azul, texto blanco--> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Pruébalo »

Estados activo y deshabilitado: puedes<a>agregar en el elemento.activela clase para resaltar la opción seleccionada..disabledLa clase se usa para establecer que el enlace no se puede hacer clic.

Marca/Logo

.navbar-brandLa clase se usa para resaltar la marca/logo:

Ejemplo

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav>

Pruébalo »

Puedes usar.navbar-brandla clase para hacer que la imagen se adapte a la barra de navegación.

Ejemplo

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> ... </nav>

Pruébalo »

Barra de navegación colapsable

Normalmente, en pantallas pequeñas colapsamos la barra de navegación y, al hacer clic, se muestran las opciones de navegación.

Para crear una barra de navegación colapsable, puedes agregar al botónclass="navbar-toggler", data-toggle="collapse" y data-target="#thetarget"clase. Luego, en el que tenga laclass="collapse navbar-collapse"clase, envuelve el contenido de navegación (enlaces). El id del div debe coincidir con eldata-targetid especificado en el data-target del botón:

Ejemplo

<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav>

Pruébalo »

Barra de navegación con menú desplegable

Se puede configurar un menú desplegable en la barra de navegación:

Ejemplo

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav>

Pruébalo »

Formularios y botones en la barra de navegación

Formulario de la barra de navegación<form>El elemento usaclass="form-inline"la clase para diseñar el campo de entrada y el botón:

Ejemplo

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </nav>

Pruébalo »

También puedes usar otras clases de campos de entrada, como.input-group-addonla clase para agregar una etiqueta pequeña antes del campo de entrada.

Ejemplo

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> </form> </nav>

Pruébalo »

Texto de la barra de navegación

Usa.navbar-textla clase para establecer texto que no sea un enlace en la barra de navegación, lo que garantiza la alineación horizontal, con el mismo color y relleno.

Ejemplo

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> <!-- Navbar text--> <span class="navbar-text"> Navbar text </span> </nav>

Pruébalo »

Barra de navegación fija

La barra de navegación se puede fijar en la parte superior o inferior.

Usamos.fixed-topla clase para fijar la barra de navegación:

Ejemplo

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>

Pruébalo »

.fixed-bottomLa clase se usa para fijar la barra de navegación en la parte inferior:

Ejemplo

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>

Pruébalo »
Otras extensiones