Navbar en Bootstrap 5

Las barras de navegación, o navbars, son un componente esencial en el diseño web moderno. Permiten a los usuarios navegar fácilmente por un sitio web y acceder a diferentes secciones de contenido. Bootstrap 5 ofrece un conjunto de clases y componentes dedicados para crear navbars receptivas y estilizadas de manera rápida y sencilla.

En esta guía, exploraremos en detalle cómo utilizar navbars en Bootstrap 5, proporcionando ejemplos prácticos para ayudarte a integrarlas efectivamente en tus proyectos web.

Estructura Básica de una Navbar

Antes de sumergirnos en ejemplos específicos, es útil comprender la estructura básica de una navbar en Bootstrap 5. Una navbar típica consta de los siguientes elementos:

  1. Contenedor Principal (<nav>): Es el contenedor principal que envuelve toda la navbar.
  2. Contenedor de Items (<div class="container-fluid">): Opcionalmente, puedes envolver los elementos de la navbar en un contenedor fluido para que ocupen todo el ancho de la ventana del navegador.
  3. Botón de Toggler: Este botón, visible en dispositivos móviles cuando la navbar está colapsada, permite desplegar el menú de navegación. Se activa utilizando la clase .navbar-toggler.
  4. Collapsible Content (<div class="collapse navbar-collapse">): Es el contenedor de los elementos de la navbar que se colapsarán en dispositivos móviles. Se controla con la clase .collapse y se vincula al botón de toggler.
  5. Items de Navegación (<ul class="navbar-nav">): Los elementos de la navbar, como enlaces y otros componentes, se colocan dentro de una lista no ordenada (<ul>) con la clase .navbar-nav.
  6. Item de Navegación (<li class="nav-item">): Cada elemento de la navbar se coloca dentro de un elemento de lista (<li>) con la clase .nav-item.
  7. Enlaces (<a class="nav-link">): Los enlaces dentro de los elementos de la navbar deben tener la clase .nav-link.

A continuación, exploraremos varios ejemplos de navbars en Bootstrap 5 para diferentes casos de uso.

Navbar Simple

Este ejemplo muestra una navbar básica con un logo y enlaces de navegación.


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Acerca de</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la navbar se expandirá en dispositivos de ancho pequeño (lg y menor), mostrando el botón de toggler. Al hacer clic en el botón de toggler, se desplegarán los enlaces de navegación.

Navbar con Logo y Buscador

En este ejemplo, se agrega un logo y un campo de búsqueda a la navbar.


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="logo.png" alt="Logo"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Acerca de</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Buscar</button>
      </form>
    </div>
  </div>
</nav>

Lenguaje del código: HTML, XML (xml)

Este ejemplo agrega un logo a la navbar y un campo de búsqueda en la esquina derecha. La navbar se expande de la misma manera que en el ejemplo anterior.

Navbar con Menú Dropdown

En este ejemplo, se agrega un menú dropdown a la navbar.


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Acerca de</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Productos
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Producto 1</a></li>
            <li><a class="dropdown-item" href="#">Producto 2</a></li>
            <li><hr class="dropdown-divider"></li>            
            <li><a class="dropdown-item" href="#">Otro Producto</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se agrega un menú dropdown bajo el elemento «Productos». Al hacer clic en el enlace «Productos», se mostrarán las opciones de productos en un menú desplegable.

Navbar con Botón de Acción

En este ejemplo, se agrega un botón de acción a la navbar.


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Acerca de</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
      <button class="btn btn-outline-success" type="button">Acción</button>
    </div>
  </div>
</nav>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se agrega un botón de acción en la esquina derecha de la navbar. Este botón podría utilizarse para realizar una acción específica, como iniciar sesión o registrarse.

Conclusiones

Las navbars son componentes esenciales en el diseño web responsivo, y Bootstrap 5 proporciona una gran cantidad de herramientas y clases para crear navbars atractivas y funcionales de manera sencilla.

Con las estructuras y ejemplos proporcionados en esta guía, podrás crear navbars para cualquier necesidad en tus proyectos web, desde sitios simples hasta aplicaciones más complejas. ¡Experimenta con las clases y componentes de Bootstrap 5 para diseñar navbars que se adapten perfectamente a tus requerimientos!