2.5.2

Bolt Pagination

Pagination Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-pagination
Source code
View on Github
Dependencies

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

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
attributes

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

object
align

Horizontally align the items.

string center
  • start, end, center
total *

Total pages within the pagination

number
current *

Current page selected

number
pages *

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

array or object
first

A link object for the first page

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.

previous

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

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.

next

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

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.

last

A link object for the last page

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.

previousText

Text to be displayed for the previous anchor

string Previous
nextText

Text to be displayed for the next anchor

string Next

Internationalization Support

For better internationalization support, align prop uses the start (left) and end (right) vocab. This helps the pagination to have the desired alignment regardless of the writing direction of the language being displayed.

Align start

Align end

Align center

Pagination on the Left, Something on the Right

In this case, you must set the align prop to be start so it is not centered within the cell.