Pagination

A navigation system for browsing search results.

Published Last updated: 4.6.0 Change log Github NPM
Twig 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
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

integer
current *

Current page selected

integer
pages *

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

array , 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
Install Install
npm install @bolt/components-pagination
Dependencies @bolt/core-v3.x