Bootstrap 4, barra de navegación

Barras de navegación

Una barra de navegación es un encabezado de navegación que se coloca en la parte superior de la página.

Barra de navegación básica

Con Bootstrap, una barra de navegación puede extenderse o contraerse, dependiendo del tamaño de la pantalla.

Se crea una barra de navegación estándar con la clase .navbar, seguida de una clase de colapso sensible: .navbar-expand-xl | lg | md | sm (apila la barra de navegación verticalmente en pantallas extra grandes, grandes, medianas o pequeñas).

Para agregar enlaces dentro de la barra de navegación, usa un elemento <ul> con class = «navbar-nav». Luego agrega elementos <li> con una clase .nav-item seguido de un elemento <a> con una clase .nav-link.

Ejm

<nav class="navbar navbar-expand-sm bg-light">
  <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>
<br>

<div class="container-fluid">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
  <p>The navbar-expand-xl|lg|md|sm class determines when the navbar
  should stack vertically (on extra large, large, medium or small screens).</p>
</div>

Barra de navegación vertical

Elimina la clase .navbar-expand-xl | lg | md | sm para crear una barra de navegación vertical.

Ejm

<!-- A vertical navbar -->
<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>

Barra de navegación centrada

Agrega la clase .justify-content-center para centrar la barra de navegación.

El siguiente ejemplo centrará la barra de navegación en pantallas medianas, grandes y extra grandes. En pantallas pequeñas, se mostrará verticalmente y alineado a la izquierda (debido a la clase .navbar-expand-sm).

Ejm

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

Barra de navegación coloreada

Utilice cualquiera de las clases .bg-color para cambiar el color de fondo de la barra de navegación:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Consejo: Agrega un color de texto blanco a todos los enlaces en la barra de navegación con la clase .navbar-dark, o usa la clase .navbar-light para agregar un color de texto negro.

Ejm

<!-- Grey with black text -->
<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>

<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Estado activo / deshabilitado: agrega la clase .active a un elemento <a> para resaltar el enlace actual, o la clase .disabled para indicar que no se puede hacer clic en el enlace.

Brand Logo (Logotipo)

La clase .navbar-brand se utiliza para resaltar el nombre de marca / logotipo / proyecto de su página:

Ejm

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

Al usar la clase .navbar-brand en las imágenes, Bootstrap 4 aplicará un estilo automático a la imagen para que se ajuste verticalmente a la barra de navegación.

Ejm

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

Colapsando el menú de navegación

Muy a menudo, especialmente en pantallas pequeñas, deseas ocultar los enlaces de navegación y reemplazarlos con un botón que debería revelarlos al hacer clic en ellos.

Para crear una barra de navegación plegable, usa un botón con class = «navbar-toggler», data-toggle = «collapse» y data-target = «# thetarget». Luego, envuelve el contenido de la barra de navegación (enlaces, etc.) dentro de un elemento div con class = «collapse navbar-collapse», seguido de una identificación que coincida con el objetivo de datos del botón: «thetarget«.

Ejm

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <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>
<br>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and 
  replaced by a button in the top right corner (try to re-size this window).</p>
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar 
  links and display the toggler button.</p>
</div>

Consejo: También puedes eliminar la clase .navbar-expand-md para SIEMPRE ocultar los enlaces de la barra de navegación y mostrar el botón de alternar.

Barra de navegación con menú desplegable

Las barras de navegación también pueden contener menús desplegables.

Ejm

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

Formas y botones de la barra de navegación

Agrega un elemento <form> con class = «form-inline» para agrupar entradas y botones de lado a lado.

Ejm

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

También puedes usar otras clases de entrada, como .input-group-prepend o .input-group-append para adjuntar un icono o texto de ayuda al lado del campo de entrada.

Ejm

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

Texto de barra de navegación

Use la clase .navbar-text para alinear verticalmente cualquier elemento dentro de la barra de navegación que no sea un enlace (garantiza el relleno y el color de texto adecuados).

Ejm

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

Barra de navegación fija

La barra de navegación puede mostrarse fija en el top o bottom de la página (arriba o abajo). Una barra de navegación fija permanece visible en una posición fija (superior o inferior) independiente del desplazamiento de la página.

La clase .fixed-top hace que la barra de navegación esté fija en la parte superior.

Ejm

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

Usa la clase .fixed-bottom para hacer que la barra de navegación permanezca en la parte inferior de la página.

Ejm

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

Usa la clase .sticky-top para hacer que la barra de navegación sea fija / permanezca en la parte superior de la página cuando se desplace. Nota: Esta clase no funciona en IE11 y versiones anteriores (la tratará como position: relative).

Ejm

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