Bolt Design System

Overview

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

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`	—

Bolt Pagination

Published

Overview

Install via NPM

Usage

Schema