Navegación en Bootstrap 5

por

La navegación es un elemento clave en el diseño web, permitiendo a los usuarios desplazarse por diferentes secciones de un sitio de manera intuitiva y efectiva. Bootstrap 5 ofrece varios componentes de navegación prediseñados, como barras de navegación (Navbar), paginación y menús desplegables (Dropdowns), con opciones para personalizar y adaptarlos a diferentes necesidades.

1. Barra de Navegación (Navbar)

La barra de navegación es uno de los componentes más utilizados en Bootstrap para crear encabezados responsivos con enlaces, botones, menús y logotipos.

Estructura Básica

Una barra de navegación se define con la clase .navbar. Para hacerla responsiva, se combina con el sistema de colapsado.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <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">
        <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>

Colores de Navbar

Bootstrap ofrece diferentes esquemas de color mediante las clases .navbar-light y .navbar-dark, combinadas con las clases de fondo (bg-*).

  • Navbar clara: .navbar-light.bg-light
  • Navbar oscura: .navbar-dark.bg-dark

Posición Fija

Puedes fijar la barra de navegación en la parte superior o inferior del viewport.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <!-- Contenido -->
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
  <!-- Contenido -->
</nav>

Ejemplo Completo

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" 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="#">Contacto</a></li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Buscar">
        <button class="btn btn-outline-light" type="submit">Buscar</button>
      </form>
    </div>
  </div>
</nav>

2. Paginación

La paginación organiza grandes cantidades de contenido dividiéndolo en páginas numeradas o con enlaces de navegación.

Te recomendamos leer:  Accesibilidad en Bootstrap 5

Estructura Básica

La paginación utiliza un contenedor <nav> con la clase .pagination.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Siguiente</a></li>
  </ul>
</nav>

Tamaños de Paginación

Bootstrap permite ajustar el tamaño de los elementos de la paginación:

  • Grande: .pagination-lg
  • Pequeño: .pagination-sm
<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
  <li class="page-item"><a class="page-link" href="#">Siguiente</a></li>
</ul>

Paginación Deshabilitada o Activa

  • Activo: Se usa la clase .active.
  • Deshabilitado: Se usa la clase .disabled.
<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Anterior</a></li>
  <li class="page-item active"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

3. Menús Desplegables (Dropdowns)

Los menús desplegables permiten mostrar contenido adicional o enlaces de manera dinámica.

Estructura Básica

Se implementan con un contenedor <div> con la clase .dropdown y un botón con data-bs-toggle="dropdown".

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Menú Desplegable
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Opción 1</a></li>
    <li><a class="dropdown-item" href="#">Opción 2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Opción 3</a></li>
  </ul>
</div>

Alineación del Menú

  • Por defecto: el menú se alinea bajo el botón.
  • Alineación a la derecha: .dropdown-menu-end.
<div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Alineado a la Derecha
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Opción 1</a></li>
  </ul>
</div>

Dropdowns dentro de una Navbar

Los menús desplegables se integran perfectamente en las barras de navegación.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
          Opciones
        </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>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Conclusión

Los componentes de navegación en Bootstrap 5 —la barra de navegación, la paginación y los menús desplegables— son herramientas esenciales para crear sitios web bien estructurados y fáciles de usar. Ofrecen flexibilidad y diseño responsivo, asegurando que se adapten a cualquier dispositivo y proyecto. Practicar su implementación y personalización te ayudará a dominar estos elementos fundamentales.

Rate this post

Deja un comentario

Web Devs