Pagination examples

Show params

Params

params:
- name: id
  type: string
  required: true
  description: The id of the pagination.
- name: hasSelect
  type: boolean
  required: false
  description: If true, the pagination appearance shows a select to select active page instead of a button group.
- name: ariaLabel
  type: string
  required: true
  description: String to add an aria-label to the nav.
- name: classesContainer
  type: string
  required: false
  description: Classes to add to the container div.
- name: totalItems
  type: string
  required: true
  description: Total number of items.
- name: itemsPerPage
  type: string
  required: true
  description: Number of items per each page.
- name: hasPrevious
  type: boolean
  required: false
  description: If true, shows the previous button if hasSelect is true.
- name: hasNext
  type: boolean
  required: false
  description: If true, shows the next button if hasSelect is true.
- name: previousText
  type: string
  required: false
  description: Text for the previous button. Defaults to "Anterior".
- name: nextText
  type: string
  required: false
  description: Text for the previous button. Defaults to "Siguiente".
- name: items
  type: array
  required: true
  description: Array of items objects.
  params:
  - name: href
    type: string
    required: true
    description: Item link.
  - name: active
    type: boolean
    required: false
    description: If true, item will be active.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item.
- name: classes
  type: string
  required: false
  description: Classes to add to the pagination nav container tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the pagination nav container tag.

default

Show code

Macro

{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "default",
  "idPrefix": "pagination",
  "totalItems": "64",
  "itemsPerPage": "10",
  "items": [
    {
      "href": "#",
      "text": 1
    },
    {
      "href": "#",
      "text": 2,
      "active": true
    },
    {
      "href": "#",
      "text": 3
    },
    {
      "href": "#",
      "text": 4
    },
    {
      "href": "#",
      "text": 5
    },
    {
      "href": "#",
      "text": 6
    }
  ],
  "attributes": {
    "aria-label": "Paginación"
  }
})  }}

Markup



<!-- pagination -->
<div id="default" class="lg:flex lg:flex-wrap lg:align-center">
  <nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
    <ul class="flex flex-wrap">
      <li>

      

<!-- button --><a href="#" role="button" draggable="false" class="c-button mb-sm mr-sm"  id="pagination">
        <span class="sr-only">Página&nbsp;</span>
1      <span class="sr-only">&nbsp;(resultados del 10 al 20)</span>

</a><!-- /button -->
  </li>
  <li>

      

<!-- button --><a href="#" role="button" draggable="false" tabindex="-1" aria-disabled="true" class="c-button c-button--primary c-button--disabled mb-sm mr-sm c-button--disabled"  id="pagination-2" aria-current="page" tabindex="-1">
  <strong>      <span class="sr-only">Página&nbsp;</span>
2      <span class="sr-only">&nbsp;(resultados del 20 al 30)</span>
</strong>
</a><!-- /button -->
  </li>
  <li>

      

<!-- button --><a href="#" role="button" draggable="false" class="c-button mb-sm mr-sm"  id="pagination-3">
        <span class="sr-only">Página&nbsp;</span>
3      <span class="sr-only">&nbsp;(resultados del 30 al 40)</span>

</a><!-- /button -->
  </li>
  <li>

      

<!-- button --><a href="#" role="button" draggable="false" class="c-button mb-sm mr-sm"  id="pagination-4">
        <span class="sr-only">Página&nbsp;</span>
4      <span class="sr-only">&nbsp;(resultados del 40 al 50)</span>

</a><!-- /button -->
  </li>
  <li>

      

<!-- button --><a href="#" role="button" draggable="false" class="c-button mb-sm mr-sm"  id="pagination-5">
        <span class="sr-only">Página&nbsp;</span>
5      <span class="sr-only">&nbsp;(resultados del 50 al 60)</span>

</a><!-- /button -->
  </li>
  <li>

      

<!-- button --><a href="#" role="button" draggable="false" class="c-button mb-sm mr-sm"  id="pagination-6">
        <span class="sr-only">Página&nbsp;</span>
6      <span class="sr-only">&nbsp;(resultados del 60 al 64)</span>

</a><!-- /button -->
  </li>
    </ul>
  </nav>
  <p class="block lg:ml-auto text-sm text-neutral-dark">
     <span class="sr-only">Posición de paginación: </span>10 - 20 de 64
  </p>
</div>
<!-- /pagination -->

Listbox style

hasSelect: true

Selecciona una página para cargar datos

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

Show code

Macro

{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "listbox-style",
  "hasSelect": true,
  "idPrefix": "pagination-has-select",
  "totalItems": "64",
  "itemsPerPage": "10",
  "items": [
    {
      "href": "#",
      "text": 1
    },
    {
      "href": "#",
      "text": 2
    },
    {
      "href": "#",
      "text": 3,
      "active": true
    },
    {
      "href": "#",
      "text": 4
    },
    {
      "href": "#",
      "text": 5
    },
    {
      "href": "#",
      "text": 6
    },
    {
      "href": "#",
      "text": 7
    },
    {
      "href": "#",
      "text": 8
    },
    {
      "href": "#",
      "text": 9
    },
    {
      "href": "#",
      "text": 10
    },
    {
      "href": "#",
      "text": 11
    },
    {
      "href": "#",
      "text": 12
    },
    {
      "href": "#",
      "text": 13
    },
    {
      "href": "#",
      "text": 14
    }
  ],
  "hasPrevious": true,
  "hasNext": true,
  "previousText": "Anterior",
  "nextText": "Siguiente",
  "attributes": {
    "aria-label": "Paginación"
  }
})  }}

Markup



<!-- pagination -->
<div id="listbox-style" class="lg:flex lg:flex-wrap lg:align-center">
  <p class="w-full mb-xs text-sm text-neutral-dark">
    Selecciona una página para cargar datos
  </p>
  <nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
    

<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--sm c-button--transparent mr-xs"  id="pagination-has-select-previous">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" /></svg>  <span class="sr-only">Página&nbsp;</span>
Anterior<span class="sr-only">:&nbsp;Página 2 con los resultados del 10 al 20</span>
</a><!-- /button -->
    

<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="listbox-style-listbox-label" class="mb-sm sr-only">
        <p>Selecciona una página para cargar datos</p>
    </div>
  <button id="listbox-style-listbox-button" class="c-listbox c-listbox--sm c-listbox--transparent mr-xs" data-module="c-listbox-button" aria-haspopup="listbox" data-change="change" aria-labelledby="listbox-style-listbox-label listbox-style-listbox-button" >
    <span class="inline-flex self-center max-w-xs align-middle truncate"> 3</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white max-h-52 overflow-y-auto" data-module="c-listbox-tooltip" >
    <ul id="listbox-style-listbox" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-none" aria-labelledby="listbox-style-listbox-label" aria-activedescendant="pagination-has-select-3">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select">
    1
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-2">
    2
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-selected="true" id="pagination-has-select-3">
    3
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-4">
    4
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-5">
    5
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-6">
    6
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-7">
    7
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-8">
    8
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-9">
    9
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-10">
    10
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-11">
    11
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-12">
    12
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-13">
    13
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-has-select-14">
    14
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
    

<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--sm c-button--transparent mr-xs"  id="pagination-has-select-next">
    <span class="sr-only">Página&nbsp;</span>
Siguiente<span class="sr-only">:&nbsp;Página 4 con los resultados del 30 al 40</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" /></svg>
</a><!-- /button -->
  </nav>
  <p class="block lg:ml-auto text-sm text-neutral-dark">
     <span class="sr-only">Posición de paginación: </span>20 - 30 de 64
  </p>
</div>
<!-- /pagination -->

Without previous page

hasSelect: true, hasPrevious: false

Selecciona una página para cargar datos

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

Show code

Macro

{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "without-previous-page",
  "hasSelect": true,
  "idPrefix": "pagination-without-prev",
  "totalItems": "64",
  "itemsPerPage": "10",
  "items": [
    {
      "href": "#",
      "text": 1,
      "active": true
    },
    {
      "href": "#",
      "text": 2
    },
    {
      "href": "#",
      "text": 3
    },
    {
      "href": "#",
      "text": 4
    },
    {
      "href": "#",
      "text": 5
    },
    {
      "href": "#",
      "text": 6
    }
  ],
  "hasPrevious": false,
  "hasNext": true,
  "previousText": "Anterior",
  "nextText": "Siguiente",
  "attributes": {
    "aria-label": "Paginación"
  }
})  }}

Markup



<!-- pagination -->
<div id="without-previous-page" class="lg:flex lg:flex-wrap lg:align-center">
  <p class="w-full mb-xs text-sm text-neutral-dark">
    Selecciona una página para cargar datos
  </p>
  <nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
    

<!-- button --><a href="#" role="button" draggable="false" tabindex="-1" aria-disabled="true" class="c-button c-button--sm c-button--transparent mr-xs c-button--disabled"  id="pagination-without-prev-previous">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false"><path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" /></svg>  <span class="sr-only">Página&nbsp;</span>
Anterior
</a><!-- /button -->
    

<!-- listbox -->
<div data-module="c-listbox" class=" relative">
    <div id="without-previous-page-listbox-label" class="mb-sm sr-only">
        <p>Selecciona una página para cargar datos</p>
    </div>
  <button id="without-previous-page-listbox-button" class="c-listbox c-listbox--sm c-listbox--transparent mr-xs" data-module="c-listbox-button" aria-haspopup="listbox" data-change="change" aria-labelledby="without-previous-page-listbox-label without-previous-page-listbox-button" >
    <span class="inline-flex self-center max-w-xs align-middle truncate"> 1</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white max-h-52 overflow-y-auto" data-module="c-listbox-tooltip" >
    <ul id="without-previous-page-listbox" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-none" aria-labelledby="without-previous-page-listbox-label" aria-activedescendant="pagination-without-prev">
      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-selected="true" id="pagination-without-prev">
    1
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-without-prev-2">
    2
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-without-prev-3">
    3
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-without-prev-4">
    4
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-without-prev-5">
    5
  </li>
  <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="pagination-without-prev-6">
    6
  </li>
    </ul>
  </div>
</div>
<!-- /listbox -->
    

<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--sm c-button--transparent mr-xs"  id="pagination-without-prev-next">
    <span class="sr-only">Página&nbsp;</span>
Siguiente<span class="sr-only">:&nbsp;Página 2 con los resultados del 10 al 20</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" /></svg>
</a><!-- /button -->
  </nav>
  <p class="block lg:ml-auto text-sm text-neutral-dark">
     <span class="sr-only">Posición de paginación: </span>0 - 10 de 64
  </p>
</div>
<!-- /pagination -->