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

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.

Barra de navegación estándar Bootstrap 4

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.

Barra de navegación vertical Bootstrap 4

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

Barra de navegación centrada Bootstrap 4

Ejm

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

Barra de navegación coloreada

Barra de navegación coloreada Bootstrap 4

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:

Logotipo Bootstrap 4

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.

Logotipo en barra de navegación Bootstrap 4

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

Colapsando el menú de navegación Bootstrap 4

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

Barra de navegación con menú desplegable Bootstrap 4

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

Formas y botones barra de navegación Bootstrap 4

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.

Botón de formulario Bootstrap 4

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

Texto de barra de navegación Bootstrap 4

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

Barra de navegación fija Bootstrap 4

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.

Barra de navegación fija Bootstrap 4

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>