Tutorial Bootstrap: Navbars

¿Qué es y cuál es la estructura básica de una navbar en Bootstrap?

Una navbar en Bootstrap es un componente de navegación adaptativo que permite crear barras de navegación responsivas para sitios web. Este componente se basa en flexbox y proporciona una estructura flexible para organizar elementos de navegación, marcas y contenido adicional.

La estructura fundamental de una navbar requiere varios elementos esenciales:

• Elemento contenedor principal:: La navbar se envuelve en un elemento <nav> con la clase .navbar.

<nav class="navbar">
  <!-- Contenido de la navbar -->
</nav>

• Contenedor fluido: Se recomienda envolver el contenido de la navbar en un <div> con la clase .container-fluid para que se ajuste al ancho completo del contenedor principal.

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <!-- Contenido -->
  </div>
</nav>

• Marca de la navbar: El elemento .navbar-brand se utiliza para mostrar el nombre, logo o marca de tu sitio web.

Solo texto:

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Sitio Web</a>
  </div>
</nav>

Con imagen:

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.svg" alt="Logo" width="30" height="24">
    </a>
  </div>
</nav>

Combinando imagen y texto:

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Enlaces de navegación y contenido

Navegación básica con navbar-nav

• Los enlaces de navegación en navbars utilizan las clases .navbar-nav, .nav-item y .nav-link que ya conoces de la lección anterior:

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" 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="#">Contacto</a>
      </li>
    </ul>
  </div>
</nav>

Estados de los enlaces

• Enlace activo: Usa la clase .active y el atributo aria-current="page" para indicar la página actual:

<a class="nav-link active" aria-current="page" href="#">Inicio</a>

• Enlace deshabilitado: Usa la clase .disabled para enlaces no disponibles:

<a class="nav-link disabled" href="#" aria-disabled="true">Próximamente</a>

Contenido adicional

• Texto simple: Usa .navbar-text para agregar texto que no sea de navegación:

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    <span class="navbar-text">
      Bienvenido, Usuario
    </span>
  </div>
</nav>

• Botones simples: Puedes agregar botones usando las clases que ya conoces:

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    <button class="btn btn-primary">Iniciar Sesión</button>
  </div>
</nav>

Navbar responsive y variaciones de color

Navbar responsive

• Para crear navbars que se adapten a diferentes tamaños de pantalla, usa las clases .navbar-expand-{breakpoint}:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    
    <!-- Botón para colapsar en móviles -->
    <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>
    
    <!-- Contenido que se colapsa -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Características</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Precios</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Puntos de quiebre disponibles

• .navbar-expand-sm - Se expande en pantallas small (≥576px)
• .navbar-expand-md - Se expande en pantallas medium (≥768px)
• .navbar-expand-lg - Se expande en pantallas large (≥992px)
• .navbar-expand-xl - Se expande en pantallas extra large (≥1200px)
• .navbar-expand-xxl - Se expande en pantallas extra extra large (≥1400px)

Variaciones de color

• Fondo claro (por defecto):

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <!-- Contenido -->
</nav>

• Fondo oscuro:

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
  <!-- Contenido -->
</nav>

• Colores de fondo personalizados:

<!-- Fondo primario -->
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
  <!-- Contenido -->
</nav>

<!-- Fondo personalizado -->
<nav class="navbar navbar-expand-lg bg-success" data-bs-theme="dark">
  <!-- Contenido -->
</nav>

Posicionamiento

• Navbar fija en la parte superior:

<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <!-- Contenido -->
</nav>

• Navbar pegajosa:

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
  <!-- Contenido -->
</nav>

Ejemplo completo:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Mi Empresa
    </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 me-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Acerca de</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
      <button class="btn btn-outline-primary">Contactar</button>
    </div>
  </div>
</nav>

Esta estructura te proporciona una navbar moderna, responsiva y completamente funcional usando Bootstrap 5.3, lista para ser personalizada según las necesidades de tu proyecto.

Navbars con desplegables dropdowns en Bootstrap

Bootstrap facilita la creación de navbars con menús desplegables o dropdowns, lo cual es esencial para estructurar menús de navegación complejos y con múltiples niveles jerárquicos.

Para incluir un dropdown en una navbar, se debe encapsular el contenido del ítem del menú en las clases y estructuras necesarias. A continuación se muestran los pasos para implementar esto.

Primero, estructura básica para una navbar:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Marca</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Características</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Precio</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Enlace dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Acción</a></li>
            <li><a class="dropdown-item" href="#">Otra acción</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Estructura para un dropdown

El ítem de menú que incluye un dropdown debe usar la estructura adecuada para asegurar tanto la funcionalidad como el estilo correctos.

• Clase .dropdown en el ítem del menú:

<li class="nav-item dropdown">

• Enlace del menú con clase .dropdown-toggle y atributos adicionales:

<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Enlace dropdown
</a>

• Lista ul con la clase .dropdown-menu para contener las opciones del dropdown:

<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
</ul>

Atributos importantes para accesibilidad

• aria-expanded="false": Indica que el menú no está expandido inicialmente.
• role="button": Define el enlace como un botón, mejorando la accesibilidad.
• data-bs-toggle="dropdown": Activa la funcionalidad de dropdown usando Bootstrap.

Menú dropdown en un navbar oscuro

También es posible aplicar tema oscuro a la navbar incluyendo el atributo data-bs-theme="dark" y cambiando los colores de los items según se necesite.

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Marca</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdownDark" aria-controls="navbarNavDropdownDark" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdownDark">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Características</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Precio</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Enlace dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Acción</a></li>
            <li><a class="dropdown-item" href="#">Otra acción</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Consideraciones adicionales

• Utilities de espaciado y alineación: Utiliza clases de utilidad de Bootstrap como .me-auto, .mb-2, y .mb-lg-0 para ajustar la disposición y el espaciado.
• Dropdowns múltiples: Para menús de navegación más complejos, se pueden incluir múltiples dropdowns siguiendo la misma estructura.

Implementando estas configuraciones, se obtiene una navbar con menús desplegables (dropdowns) en Bootstrap, completamente funcional y adaptable tanto a dispositivos móviles como a pantallas de escritorio.