Breadcrumbs y paginación

Estructura básica de breadcrumbs

Los breadcrumbs constituyen un elemento fundamental de navegación jerárquica que permite a los usuarios comprender su ubicación actual dentro de la estructura de un sitio web. Bootstrap proporciona un componente específicamente diseñado para implementar estas rutas de navegación de manera consistente y accesible.

La estructura fundamental de un breadcrumb en Bootstrap se basa en dos clases principales que trabajan en conjunto para crear la navegación jerárquica. La clase .breadcrumb define el contenedor principal, mientras que .breadcrumb-item marca cada elemento individual dentro de la ruta de navegación.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">Inicio</li>
    <li class="breadcrumb-item">Productos</li>
    <li class="breadcrumb-item">Electrónicos</li>
    <li class="breadcrumb-item active" aria-current="page">Smartphones</li>
  </ol>
</nav>

Elementos estructurales esenciales

El contenedor semántico utiliza el elemento <nav> con el atributo aria-label="breadcrumb" para proporcionar contexto semántico a las tecnologías de asistencia. Esta práctica es fundamental para la accesibilidad web y forma parte de las mejores prácticas de Bootstrap.

La lista ordenada <ol> con la clase .breadcrumb actúa como el contenedor principal que define el comportamiento visual y la disposición horizontal de los elementos. Esta elección semántica es importante porque los breadcrumbs representan inherentemente una secuencia ordenada de ubicaciones.

Cada elemento individual utiliza <li class="breadcrumb-item"> para definir los pasos en la ruta de navegación. Estos elementos se presentan automáticamente con separadores visuales que Bootstrap genera mediante pseudo-elementos CSS.

Implementación de enlaces funcionales

Para crear breadcrumbs navegables, cada elemento excepto el último debe contener un enlace que permita al usuario regresar a ubicaciones anteriores:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">Inicio</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/tienda">Tienda</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/tienda/ropa">Ropa</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">Camisetas</li>
  </ol>
</nav>

Los enlaces internos utilizan la estructura estándar de anchor tags que ya conoces, aplicando las mismas técnicas de navegación que has aprendido en lecciones anteriores sobre enlaces y navegación básica.

Separadores automáticos

Bootstrap genera automáticamente los separadores entre elementos breadcrumb utilizando el pseudo-elemento ::before con contenido CSS. El separador predeterminado es una barra diagonal ("/"), pero este comportamiento se gestiona completamente a través de CSS sin necesidad de markup adicional.

<!-- Los separadores aparecen automáticamente -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Biblioteca</a></li>
    <li class="breadcrumb-item"><a href="#">Documentos</a></li>
    <li class="breadcrumb-item active" aria-current="page">Informes</li>
  </ol>
</nav>
<!-- Resultado visual: Biblioteca / Documentos / Informes -->

Elemento activo y aria-current

El último elemento de la ruta de navegación representa la página actual y debe marcarse con la clase .active junto con el atributo aria-current="page". Esta combinación proporciona tanto el estilo visual apropiado como la información semántica necesaria para la accesibilidad.

<li class="breadcrumb-item active" aria-current="page">Página actual</li>

Esta implementación garantiza que los usuarios de tecnologías de asistencia comprendan claramente cuál es su ubicación actual dentro de la jerarquía de navegación.

Casos de uso prácticos

Los breadcrumbs resultan especialmente útiles en sitios web con estructura jerárquica profunda, como tiendas en línea, sistemas de documentación, portales corporativos o aplicaciones web con múltiples niveles de organización:

<!-- Ejemplo: Tienda en línea -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Inicio</a></li>
    <li class="breadcrumb-item"><a href="/categorias">Categorías</a></li>
    <li class="breadcrumb-item"><a href="/categorias/hogar">Hogar</a></li>
    <li class="breadcrumb-item"><a href="/categorias/hogar/cocina">Cocina</a></li>
    <li class="breadcrumb-item active" aria-current="page">Utensilios</li>
  </ol>
</nav>

<!-- Ejemplo: Portal de documentación -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/docs">Documentación</a></li>
    <li class="breadcrumb-item"><a href="/docs/componentes">Componentes</a></li>
    <li class="breadcrumb-item active" aria-current="page">Navegación</li>
  </ol>
</nav>

La flexibilidad estructural del componente breadcrumb permite adaptarse a diferentes profundidades de navegación sin requerir modificaciones adicionales en el CSS o JavaScript, manteniendo siempre la consistencia visual y funcional que caracteriza a los componentes de Bootstrap.

Paginación básica y numeración

La paginación es un componente esencial para dividir grandes cantidades de contenido en secciones navegables, permitiendo a los usuarios moverse a través de múltiples páginas de resultados de manera intuitiva. Bootstrap proporciona un sistema de paginación robusto que mantiene la consistencia visual con el resto de componentes del framework.

Estructura fundamental de paginación

La base estructural de la paginación en Bootstrap se construye mediante tres clases principales que trabajan conjuntamente. El contenedor .pagination define el comportamiento general, mientras que .page-item marca cada elemento individual y .page-link proporciona el estilo para los enlaces navegables.

<nav aria-label="Paginación de resultados">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Anterior">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Siguiente">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Implementación de elementos de navegación

Los elementos de control de navegación incluyen típicamente botones de "Anterior" y "Siguiente" que facilitan el movimiento secuencial entre páginas. Estos controles utilizan símbolos universalmente reconocidos y proporcionan atributos de accesibilidad apropiados:

<nav aria-label="Navegación de productos">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="/productos?pagina=1" aria-label="Primera página">
        <span aria-hidden="true">&laquo;&laquo;</span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/productos?pagina=4" aria-label="Página anterior">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="/productos?pagina=5">5</a></li>
    <li class="page-item">
      <a class="page-link" href="/productos?pagina=6" aria-label="Página siguiente">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/productos?pagina=10" aria-label="Última página">
        <span aria-hidden="true">&raquo;&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

La semántica correcta utiliza el elemento <nav> con aria-label descriptivo y una lista no ordenada <ul> con la clase .pagination, siguiendo las mejores prácticas de accesibilidad web que ya has aplicado en componentes de navegación anteriores.

Numeración de páginas

La numeración secuencial representa el núcleo visual de la paginación, mostrando las páginas disponibles de manera clara y ordenada. Cada número debe implementarse como un enlace funcional que dirija al usuario a la página correspondiente:

<nav aria-label="Resultados de búsqueda">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="/buscar?q=bootstrap&p=1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/buscar?q=bootstrap&p=2">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/buscar?q=bootstrap&p=3">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/buscar?q=bootstrap&p=4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/buscar?q=bootstrap&p=5">5</a>
    </li>
  </ul>
</nav>

Paginación con rangos limitados

En aplicaciones con grandes cantidades de páginas, es común mostrar solo un rango limitado de números alrededor de la página actual para mantener la interfaz limpia y funcional:

<nav aria-label="Listado de artículos">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Anterior">&laquo;</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">8</a></li>
    <li class="page-item"><a class="page-link" href="#">9</a></li>
    <li class="page-item"><a class="page-link" href="#">10</a></li>
    <li class="page-item"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">20</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Siguiente">&raquo;</a>
    </li>
  </ul>
</nav>

Los puntos suspensivos se implementan utilizando <span class="page-link"> en lugar de enlaces, indicando visualmente que existen páginas intermedias sin proporcionar navegación directa a ellas.

Casos de uso prácticos

La paginación resulta especialmente efectiva en escenarios donde el contenido debe dividirse por razones de rendimiento o usabilidad:

1 - Listado de productos en tienda:

<nav aria-label="Productos disponibles">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="/tienda?categoria=ropa&pagina=1">
        Anterior
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/tienda?categoria=ropa&pagina=2">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/tienda?categoria=ropa&pagina=3">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/tienda?categoria=ropa&pagina=4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/tienda?categoria=ropa&pagina=5">
        Siguiente
      </a>
    </li>
  </ul>
</nav>

2 - Resultados de búsqueda:

<nav aria-label="Páginas de resultados">
  <ul class="pagination pagination-sm">
    <li class="page-item">
      <a class="page-link" href="/buscar?termino=bootstrap&inicio=0">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/buscar?termino=bootstrap&inicio=10">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/buscar?termino=bootstrap&inicio=20">3</a>
    </li>
  </ul>
</nav>

Integración con utilidades de Bootstrap

La paginación se integra perfectamente con las utilidades de alineación y espaciado que ya dominas, permitiendo personalizar la presentación según las necesidades del diseño:

<!-- Paginación centrada -->
<nav aria-label="Navegación centrada">
  <ul class="pagination justify-content-center">
    <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>
  </ul>
</nav>

<!-- Paginación alineada a la derecha -->
<nav aria-label="Navegación derecha">
  <ul class="pagination justify-content-end">
    <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>
</nav>

La flexibilidad estructural del componente permite adaptarse a diferentes contextos de contenido, manteniendo siempre la consistencia visual y la funcionalidad intuitiva que caracteriza a los componentes de navegación de Bootstrap.

Estados y variaciones de diseño

Los componentes de navegación breadcrumbs y paginación ofrecen múltiples estados visuales y variaciones de diseño que permiten adaptar su apariencia a diferentes contextos y necesidades específicas del proyecto, manteniendo siempre la consistencia con el sistema de diseño de Bootstrap.

Estados de breadcrumbs

Aunque los breadcrumbs tienen una estructura relativamente simple, Bootstrap proporciona opciones de personalización que aprovechan las utilidades de color y espaciado que ya dominas para crear variaciones visuales apropiadas:

<!-- Breadcrumb con colores personalizados -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-light p-3 rounded">
    <li class="breadcrumb-item">
      <a href="/" class="text-primary">Inicio</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/blog" class="text-secondary">Blog</a>
    </li>
    <li class="breadcrumb-item active text-dark" aria-current="page">
      Artículo actual
    </li>
  </ol>
</nav>

<!-- Breadcrumb con fondo oscuro -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark p-3 rounded">
    <li class="breadcrumb-item">
      <a href="/" class="text-light">Panel</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/usuarios" class="text-light">Usuarios</a>
    </li>
    <li class="breadcrumb-item active text-warning" aria-current="page">
      Configuración
    </li>
  </ol>
</nav>

La flexibilidad de personalización permite combinar utilidades de fondo, padding y colores de texto para crear breadcrumbs que se integren armoniosamente con diferentes esquemas de color de la interfaz.

Estados de paginación

La paginación incluye dos estados principales que proporcionan retroalimentación visual clara sobre el estado actual de navegación y las opciones disponibles para el usuario.

Estado activo

El estado activo indica la página actual utilizando la clase .active en el elemento .page-item. Este estado proporciona un contraste visual distintivo que ayuda a los usuarios a orientarse dentro del conjunto de páginas disponibles:

<nav aria-label="Navegación con página activa">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="/articulos?p=1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/articulos?p=2">2</a>
    </li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">3</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="/articulos?p=4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/articulos?p=5">5</a>
    </li>
  </ul>
</nav>

Es importante utilizar <span> en lugar de <a> para la página activa, ya que no debe ser clickeable, y siempre incluir aria-current="page" para la accesibilidad.

Estado deshabilitado

El estado deshabilitado mediante la clase .disabled se aplica cuando ciertos elementos de navegación no están disponibles, como los botones "Anterior" en la primera página o "Siguiente" en la última:

<nav aria-label="Primera página de resultados">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link" aria-hidden="true">&laquo;</span>
    </li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="/resultados?p=2">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/resultados?p=3">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/resultados?p=2" aria-label="Siguiente">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Los elementos deshabilitados también utilizan <span> para evitar la interacción y mantener la semántica apropiada.

Variaciones de tamaño

Bootstrap proporciona tres tamaños predefinidos para la paginación que se adaptan a diferentes contextos de diseño y jerarquías visuales dentro de la interfaz.

Paginación pequeña

La paginación pequeña utiliza la clase .pagination-sm y resulta ideal para espacios reducidos, barras laterales, o como elemento secundario dentro de componentes más complejos:

<nav aria-label="Paginación compacta">
  <ul class="pagination pagination-sm">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Anterior">
        <span aria-hidden="true">&laquo;</span>
      </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 active" aria-current="page">
      <span class="page-link">3</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Siguiente">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Paginación grande

La paginación grande mediante .pagination-lg proporciona mayor prominencia visual y facilita la interacción en dispositivos táctiles o cuando la paginación es el elemento principal de navegación:

<nav aria-label="Paginación principal">
  <ul class="pagination pagination-lg">
    <li class="page-item">
      <a class="page-link" href="/catalogo?pagina=1" aria-label="Anterior">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/catalogo?pagina=2">2</a>
    </li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">3</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="/catalogo?pagina=4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/catalogo?pagina=5" aria-label="Siguiente">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Personalización con utilidades de color

Ambos componentes se integran perfectamente con las utilidades de color de Bootstrap para crear variaciones temáticas que coincidan con la identidad visual del proyecto:

<!-- Paginación con tema oscuro -->
<nav aria-label="Paginación tema oscuro">
  <ul class="pagination bg-dark p-2 rounded">
    <li class="page-item">
      <a class="page-link bg-secondary text-light border-secondary" href="#">
        Anterior
      </a>
    </li>
    <li class="page-item">
      <a class="page-link bg-secondary text-light border-secondary" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link bg-secondary text-light border-secondary" href="#">2</a>
    </li>
    <li class="page-item active">
      <span class="page-link bg-primary border-primary">3</span>
    </li>
    <li class="page-item">
      <a class="page-link bg-secondary text-light border-secondary" href="#">
        Siguiente
      </a>
    </li>
  </ul>
</nav>

<!-- Breadcrumb con tema de éxito -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-success-subtle p-3 rounded border border-success">
    <li class="breadcrumb-item">
      <a href="/" class="text-success-emphasis">Procesos</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/completados" class="text-success-emphasis">Completados</a>
    </li>
    <li class="breadcrumb-item active text-success" aria-current="page">
      Proceso finalizado
    </li>
  </ol>
</nav>

Combinación de estados y variaciones

La versatilidad del sistema permite combinar múltiples estados y variaciones para crear componentes de navegación que se adapten perfectamente a contextos específicos:

<!-- Paginación pequeña con múltiples estados -->
<nav aria-label="Navegación de comentarios">
  <ul class="pagination pagination-sm justify-content-center">
    <li class="page-item disabled">
      <span class="page-link bg-light text-muted">Primera</span>
    </li>
    <li class="page-item disabled">
      <span class="page-link bg-light text-muted">&laquo;</span>
    </li>
    <li class="page-item active" aria-current="page">
      <span class="page-link bg-info border-info">1</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="/comentarios?p=2">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/comentarios?p=2">&raquo;</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/comentarios?p=10">Última</a>
    </li>
  </ul>
</nav>

Esta flexibilidad de personalización permite crear interfaces de navegación que no solo funcionan correctamente desde el punto de vista técnico, sino que también se integran armoniosamente con el diseño general de la aplicación, manteniendo la coherencia visual y la usabilidad que caracterizan a los componentes de Bootstrap.