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

Overview

Usage

Schema

Edit this page

Testing Steps

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