Bolt Pagination

Last Updated: 2.4.0 NPM Package: @bolt/components-pagination

Getting Started

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

Usage

{% 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 %}

Schema

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
Getting Started Usage Schema Edit this page Testing Steps