Paginación

Navegación

La paginación se emplea cuando dividimos el contenido de una página para no abrumar, esto dará una idea de qué cantidad de información está disponible y permitirá saltar fácilmente entre las páginas.

Variantes
Accesibilidad
Buenas prácticas

Variantes #

Por defecto

Posición de paginación: 10 - 20 de 64

Variante con selector

Selecciona para cargar datos automáticamente

Página actual:

Items por página:

Posición de paginación: 0 - 10 de 64

Por defecto #

Se recomienda su uso para clasificar contenido muy controlable, es decir, cuando sepamos que el número de páginas no será superior a 10.

Variante con selector #

Se recomienda su uso en el resto de casos, es decir, cuando el contenido de las páginas no es muy controlable y puede haber variaciones en cuanto a la cantidad de contenido o cuando el número de páginas supera las 10. La persona puede navegar entre páginas a través del selector y los botones de siguiente, anterior, última o primera. También se permite configurar cuantos resultados se muestran en cada una.

Accesibilidad #

Cómo funciona #

Rodeado con la etiqueta <nav>, debe tener un aria-label que describa el tipo de navegación.
Dentro se encuentra una lista sin orden <ul> con una serie de <button> con id único. El botón con la página actual tiene aria-current=page y aria-disabled=true.
En el caso de la variante con selector, un elemento <select> se encuentra entre los botones. Tiene un aria-describedby que llama al párrafo inicial.
El componente contiene por defecto etiquetas <span> sólo visibles para lectores de pantalla que amplían la información de cada botón: [Página:] 2 [(resultados del 20 al 30)]. Otras elementos como los botones de la variante con selector y la cantidad de resultados por página también tienen estas etiquetas.

Qué tener en cuenta
Qué usar	Dónde	Función
`idPrefix`	Parámetro Nunjucks dentro del componente	Permite crear `id` únicos para los items del listado.
`id`	Parámetro Nunjucks dentro del componente	Permite crear un `id` para el componente.
`active: true`	Parámetro Nunjucks dentro del item actual	Añade `aria-current=page` y le da estilos al botón.
`aria-label`	Dentro del parámetro Nunjucks `attributes`	Descibe el tipo de navegación.

Buenas prácticas #

Incluir el máximo de contenido posible por página, siempre y cuando no provoque una demora en mostrar el contenido.
Se recomienda que una vez el usuario entra en uno de los elementos de la página, al volver atrás, el sistema recuerde la posición del usuario respecto a las páginas del contenido.