2.24.0Pagination Component in Bolt
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.
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
|
|
| 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
| — |
|
| previous | A link object for the previous page (e.g. if on page 3, this links to page 2) |
object
| — |
|
| next | A link object for the next page (e.g. if on page 3, this links to page 4) |
object
| — |
|
| last | A link object for the last page |
object
| — |
|
| previousText | Text to be displayed for the previous anchor |
string
|
Previous
|
|
| nextText | Text to be displayed for the next anchor |
string
|
Next
|
|
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.
In this case, you must set the align prop to be start so it is not centered within the cell.
Something on the right