Bolt Design System

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

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

  npm install @bolt/components-pagination

Dependencies

@bolt/core-v3.x

Bolt Pagination

A navigation system for browsing search results.