Bolt Pagination

The sequence of numbers assigned to pages on a search results page. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-pagination
  {% include "@bolt-components-pagination/pagination.twig" with {
  current: 5,
  total: 10,
  first: {
    href: 'page-1-url'
  },
  previous: {
    href: 'page-4-url'
  },
  pages: {
    3: {
      href: 'page-3-url'
    },
    4: {
      href: 'page-4-url'
    },
    5: {
      href: 'page-5-url'
    },
    6: {
      href: 'page-6-url'
    },
    7: {
      href: 'page-7-url'
    }
  },
  next: {
    href: 'page-6-url'
  },
  last: {
    href: 'page-10-url'
  }
} only %}
Name Type Value(s) Description Default
attributes object

A Drupal-style attributes object with extra attributes to append to this component.

N/A
align string
  • start, end, center

Horizontally align the items.

center
total* number

Total pages

Total pages within the pagination

N/A
current* number

Current page

Current page selected

N/A
pages* array OR object

A keyed array of page item objects where the key is the page number

N/A
first object
    • href

      The link for this pager item. Href may also be passed as part of attributes (which will take precedence).

    • attributes

      A Drupal-style attributes object for this link.

A link object for the first page

N/A
previous object
    • href

      The link for this pager item. Href may also be passed as part of attributes (which will take precedence)

    • attributes

      A Drupal-style attributes object for this link.

A link object for the previous page (e.g. if on page 3, this links to page 2)

N/A
next object
    • href

      The link for this pager item. Href may also be passed as part of attributes (which will take precedence)

    • attributes

      A Drupal-style attributes object for this link.

A link object for the next page (e.g. if on page 3, this links to page 4)

N/A
last object
    • href

      The link for this pager item. Href may also be passed as part of attributes (which will take precedence)

    • attributes

      A Drupal-style attributes object for this link.

A link object for the last page

N/A
previousText string

Previous text

Text to be displayed for the previous anchor

Previous
nextText string

Next text

Text to be displayed for the next anchor

Next